/* This targets everything on the page */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* This makes sizing elements MUCH easier later */
}

/* This makes sure your page takes up at least the full height of the screen */
body, html {
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif; /* Matching your previous vibe */
    color: white;
}

@keyframes slowPan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.background-wrapper {
    width: 100%;
    height: 100vh;
    /* This points to your nebula image */
    background-image: url("bg.png"); 
    
    /* KEY LESSON: This ensures the image fills the screen without stretching */
    background-size: cover; 
    
    /* This keeps the image centered even if the window is resized */
    background-position: center; 
    
    /* This prevents the image from repeating if the screen is huge */
    background-repeat: no-repeat; 
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: slowPan 30s ease infinite;
    background-size: 150% 150%;
}

#header {
    text-align: center; /* This keeps the name and tagline perfectly centered in the middle of the screen */
}

#header h1 {
    font-size: 3rem;
    margin: 0;
}

#header .tagline {
    display: block; 
    margin-top: 5px; /* Just a tiny gap to keep them connected visually */
    font-size: 1.2rem;
    opacity: 0.8;
}



/* This hides the text labels so only the icon shows */
.label {
    display: none;
}

/* This makes the icons look like the buttons you want */
/* 1. The Circle/Button (Replaces 'nav li a') */
.content-overlay a {
    display: inline-flex;    /* This centers the icon perfectly */
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin: 0 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* 2. The Icon inside the circle (Replaces '.content-overlay i') */
.content-overlay a i {
    font-size: 1.8rem;
    color: white;
    transition: transform 0.2s;
}

/* 3. The Hover Effect (Replaces 'nav li a:hover') */
.content-overlay a:hover {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-5px); /* Makes the circle "jump" up slightly */
}

.content-overlay a:hover i {
    color: #00d4ff;
    transform: scale(1.1); /* Makes the icon grow slightly */
}