@font-face {
    font-family: 'Chomsky';
    src: url('/assets/fonts/chomsky/Chomsky.otf') format('opentype'),
}

@font-face {
    font-family: 'Berenika';
    src: url('/assets/fonts/berenika/Berenika-BookOblique.ttf') format('truetype'),
}

@font-face {
    font-family: 'Irish';
    src: url('/assets/fonts/irishuncialfabeta/IrishUncialfabeta-Bold.ttf') format('truetype'),
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url('/assets/cursor/Arrow.png'), auto;
}


body {
    background-image: url('assets/bgs/60v.jpg');
    background-attachment: fixed;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-color: #200702;
}



/* ---DECORATION--- */


.decoration {
    background-image: url('/assets/decoration/halloween-strip.gif');
    background-repeat: repeat-x;
    height: 58px;
    /* Set height of the decoration */
    width: 100%;
    /* Ensure it stretches across the full width */
    position: absolute;
    /* Make sure it's fixed at the top */
    top: 0;
    left: 0;
}


/* CONTAINER */

#container {
    width: 800px;
    background-color: black;
    margin: 0 auto;
    border: 3px solid rgb(36, 36, 36);
}

/* HEADER */

#headerArea {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 2px solid #000000;
    background-image: url('/assets/bgs/halloweenbg1.gif');
    background-attachment: scrolling;
    background-repeat: repeat;
}

/* NAV  */
#navBar {
    background-color: rgb(134, 36, 0);
    padding: 2px;
}

#navBar nav ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 790px;
    height: 35px;
}

#navBar nav ul li {
    list-style: none;
}

#navBar nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 30px;
    font-family: 'Chomsky';
}

#navBar nav ul li a:hover {
    text-decoration: none;
    color: rgb(255, 81, 0);
    font-size: 30px;
}


/* MAIN  */

/* ROW */

.row {
    display: flex;
}


#music {
    /* height: 100px; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    color: white;
    font-family: verdana;
    /* border: 1px solid white; */
    padding: 20px;
}

#music .content {

    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    padding: 20px;

}

#music h3 {
    color: pink;
}

#music p {
    color: rgb(255, 73, 103);
}

.albums, .artists {
    width: 50%;
    overflow: hidden;
    /* height: 60vh; */
    padding: 10px;
    margin: 0 10px;
    border: 1px solid white;
}

#music .content h3, p, ul {
    padding: 10px 0;
} 


#music .content li {
    list-style: none;
    color: rgb(255, 255, 255);
}


.musicHeader .gif {
    width: 100px;
    height: 100px;

}


#games {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    color: white;
    font-family: verdana;
    padding: 20px;
    /* border: 1px solid white; */
}

#games .logo .logo_img {
    height: 5vh;
    width: auto;
}


#games .game_list img {
    height: 40vh;
    width: 28.34vh;
    padding: 10px;
}

#games .game_list h3 {
    padding: 10px;
}

#games ul li {
    list-style: none;
    color: pink;
}