/* -------------------- General Body & HTML Styles -------------------- */
body {
    display: flex;
    justify-content: center;
    background-color: black;
    padding-top: 20px;
    background-position: center;
    background-image: url('../../assets/images/bg/stars.gif');

}

#main-container {
    width: 720px;
    min-height: 100vh;
    margin-bottom: 300px;
}

main {
    width: 100%;
    margin: 20px;
    height: 100%;
    background-color: black;
    padding: 20px;
    margin-top: -60px;
    border-style: double;
    border-color: blue;
    border-width: 4px;

}

#announcements hr {
    border-style: dashed;
    color: white;
    margin: 20px;
}



/* -------------------- Header -------------------- */
#swirl-1 {
    height: 200px;
    background-size: cover;
    background-image: url('../../assets/images/bg/swirl_1.png');
}

#swirl-2 {
    transform: scaleY(2) translate(500px, -30px);
}

#logo {
    position: absolute;
    margin-left: -280px;
    margin-top: -200px;
    box-shadow: 4px 12px 0px black;
    transform: scaleX(1.3);
}


/* -------------------- Navigation -------------------- */
.nav, #music hr {
    transform: scaleX(1.1) scaleY(2.4);
    color: white;
}

nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -35px;
}

nav a {
    background-image: url('../../assets/images/nav.png');
    width: 172px;
    height: 35px;
    padding-bottom: 10px;
    background-size:cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    z-index: 100;
    color: rgb(246, 255, 0);
    text-decoration: none;
    font-size: large;
}

nav a:hover {
    filter: brightness(1.4); /* Increase brightness on hover */
}







/* -------------------- Welcome -------------------- */
#welcome {
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
    background-image: url('../../assets/images/bg/welcome.jpg');
}

#welcome img {
    position: absolute;
}

#logo,
#fish,
#trex,
#ufo {
    cursor: pointer;
}

#earth {
    transform: translate(-50px)
}

#welcome-sign {
    transform: translate(100px, 70px)
}

#ufo {
    width: 120px;
    transform: translate(-100px, 0px)
}

#guitar {
    transform: translate(-10px, 30px)
}

#trex {
    width: 180px;
    transform: translate(400px, 100px)
}

#fish {
    width: 180px;
    transform: translate(500px, 10px)
}

#bike {
    width: 60px;
    transform: translate(320px, 170px)
}




/* -------------------- Announcements -------------------- */
#announcements {
    padding-bottom: 40px;
}
#announcements .header {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../../assets/images/gif/lightning.gif');
}

#announcements .header :nth-child(2) {
    width: 500px;
    position: absolute;
}

.date {
    color: red;
    font-size: 12px;
}

#announcements h1 {
    font-weight: bold;
    font-size: 18px;
    padding: 10px 0;
    color: yellow;
}



/* -------------------- Music -------------------- */
#music .header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../../assets/images/gif/galaxy.gif');
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#music img {
    padding: 20px;
}