/* fonts */
@font-face {
    font-family: "Acer";
    src: url('/fonts/Acer710.ttf') format("truetype");
}

@font-face {
    font-family: "FreePixel";
    src: url('/fonts/FreePixel.ttf') format("truetype");
}

:root {
    --offwhite: rgb(249, 227, 255);
    --lilac: rgb(198, 83, 255);
    --magenta: rgba(255, 0, 255, 0.605);
    --blue: rgba(0, 0, 183, 0.465);
    --aqua: rgba(174, 255, 255, 0.72);
}

body {
    cursor: url(/assets/cursor.png), auto;  

    position: relative;
    width: 1290px; height: 100%;
    margin: 0 auto;
    image-rendering: pixelated;
    overflow-x: hidden;

    background-color: rgb(0, 0, 0);
    background-image: url('/assets/backgrounds/sonic.gif');
    background-size: contain; 
    background-attachment: fixed;
    background-position: center;
   
    font-size: 15px; font-family: 'FreePixel';
    color: var(--offwhite);
    line-height: 1.6;
}

.title {
    position: absolute;
    top: -20px; left: 320px;
}

#container {
    position: relative; z-index: 1;
    margin: 35px auto 0 auto; padding: 0;
    width: 750px; height: auto;
    
    background-image: linear-gradient(
    var(--blue) 5%,
    var(--aqua) 20%,
    var(--blue) 50%);

    backdrop-filter: blur(2px);

    border: 2px rgba(0, 0, 139, 0.807) solid; border-radius: 5px;
    box-shadow: 2px 2px 2px aqua inset, 2px 2px 2px black;
}

header {
    display: flex;
    margin: 0; padding: 0;
    width: 100%; height: 130px;
    overflow: hidden;

    background-image: url('/assets/borders/bar.png');
    background-size: contain; background-repeat: no-repeat;
    border-radius: 5px;

    color: var(--offwhite);
    text-align: left;
    box-shadow: 2px 2px 2px var(--aqua) inset;
}

    header .title {
        right: 0; top: 10px;
        font-family: 'Acer'; font-size: 1.5em;
        text-shadow: 2px 2px 0px blue;
    }

    header ul {
        display: inline-flex;
        height: 100%;
        margin: 0 auto;
    }

    header a:hover {
        color: mediumseagreen;
    }

#music-player {
    display: block;
    margin: 0 auto; padding: 0;
    width: 730px; height: auto; 
}
    #music-player iframe {
        border: 2px black inset; border-radius: 5px;
    }

    .credit {
        margin: 0 auto; 
        height: 30px;
        color: var(--offwhite)
    }

#more {
    margin: 0; padding: 0;
    width: 100%; height: 400px;
    
    border: 2px red solid; border-radius: 5px; 
}
    #info {
        width: 90%;
    }

footer {
    margin: 0 auto 10px auto; padding: 5px 0;
    width: 700px;
    
    font-size: 1em; font-family: 'FreePixel'; font-weight: bold;
    color: var(--offwhite); 
    text-shadow: 1px 1px 1px blue;
    text-align: center; line-height: 1;
}

    footer ul {
        display: inline-flex;
        margin: 5px 0; padding: 0;
    }

    footer li {
        display: inline-flex;
        margin: 0; padding: 0 5px;
        text-decoration: underline;  
    }

    footer a {color: var(--offwhite)}
    footer a:hover {color: blue; text-shadow: 1px 1px 1px blue;}

    .credit {
        text-shadow: 2px 2px 2px blue;
    }
        .credit a {color: var(--offwhite)}

/* decor */

#dancing {
    position: relative; z-index: -1;
    margin: -60px  0 0 auto;
    width: 100%; height: 64px;

    background-image: url('/assets/pixels/girl_dance.gif'), url('/assets/pixels/guy_dance.gif');
    background-size: 64px, 64px;
    background-repeat: repeat-x, repeat-x;
    background-position: bottom left 12px, bottom right;

    filter: blur(2px);

}

.disc {
    position: absolute; z-index: -1; rotate: -180deg;
    bottom: 20px; right: 100px;
    width: 300px;
    overflow: hidden;         
    animation: rotateDisc 20s linear infinite;
}

/* animations */

@keyframes rotateDisc {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}