/* style.css */
/* 
  Primary Colors requested: 
  Background: Black
  Text: Green
  Accents/Highlights: Red 
*/

/* Apply basic styles to the whole page */
body {
    background-color: #000000; /* Black background */
    color: #00FF00; /* Bright green text - retro look */
    font-family: 'Courier New', Courier, monospace; /* Monospace font for regular text */
    margin: 0;
    padding: 0;
    text-align: center; /* Center all elements by default */
}

/* Container to keep content centered and limit extreme widths */
.container {
    max-width: 800px;
    margin: 0 auto; /* Centers the container in the middle of the screen */
    padding: 20px;
}

/* Style for the top header GIF */
.header-gif {
    max-width: 100%; /* Ensures it doesn't overflow */
    height: auto;
    margin-bottom: 20px;
    border: 2px solid #FF0000; /* A red border around the gif */
}

/* Style for the title using the Google Font 'Nosifer' */
.droopy-title {
    font-family: 'Nosifer', cursive; /* The droopy font linked in HTML */
    color: #FF0000; /* Red color for the title */
    font-size: 3rem; /* Make it large */
    margin-bottom: 30px;
    text-shadow: 2px 2px #00FF00; /* Green shadow for a cool outline effect */
}

/* Navigation tabs container */
.navigation {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows tabs to wrap on smaller screens */
    gap: 15px; /* Spacing between the tabs */
    margin-bottom: 40px;
}

/* Individual tab styles */
.tab {
    background-color: #000000;
    color: #00FF00; /* Green text */
    text-decoration: none; /* Removes the underline from links */
    padding: 10px 20px;
    border: 2px solid #00FF00; /* Green border around the tab */
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase; /* Makes text ALL CAPS */
    transition: 0.3s; /* Smooth visual transition when hovering */
}

/* Hover effect: what happens when mouse is over a tab */
.tab:hover {
    background-color: #00FF00; /* Turns green */
    color: #000000; /* Text turns black */
    box-shadow: 0 0 10px #FF0000; /* Adds a red glow around it */
}

/* Style for the currently active/selected tab */
.tab.active {
    background-color: #FF0000; /* Red background for active tab */
    color: #000000; /* Black text */
    border-color: #FF0000;
}

/* Main content area box */
.content {
    border: 2px dashed #FF0000; /* Dashed red border */
    background-color: #111111; /* Slightly lighter black to stand out */
    padding: 30px;
    margin-top: 20px;
    border-radius: 10px; /* Rounded corners for the content box */
}

/* Links inside the content area */
.content a {
    color: #FF0000;
}
.content a:hover {
    color: #00FF00;
}