/* 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");
}

/* layout */
body {
    cursor: url(/assets/cursor.png), auto;
    
    position: relative;
    width: 1290px; height: 100%;
    margin: 0 auto;
    image-rendering: pixelated;
    overflow: hidden;
    
    background-color: purple;
    background-image: url('/assets/backgrounds/p4au.gif');
    background-blend-mode: difference;
    background-size: cover; background-position: left;

    line-height: 1.6;
    font-size: 15px; font-family:'FreePixel';
    color: var(--offwhite);
    text-align: center;
}

:root {
    --offwhite: rgb(249, 227, 255);
}

#container {
    margin: 23px auto; padding: 0;
    width: 800px; height: 600px;
}
  
    .title {
        position: absolute; z-index: 3; rotate: -3deg;
        top: 10px; left: 25%;

        font-family: 'Acer'; font-size: 2em;
        color: black; text-shadow: 2px 2px 0px limegreen;

        filter: drop-shadow(0px 0px 10px magenta);
        animation: float 1s linear infinite;
    }

    .title-bg {
        position: absolute; z-index: 2; 
        top: -20px; left: 30%; 
        width: 250px;
        filter: drop-shadow(1px 1px 1px black);
        animation: splat 0.3s;
    }

#about {
    width: 550px; height: 450px;
    margin: 5px auto; padding: 25px;

    background-image: url('/assets/art/index-bg.png');
    background-size: cover; 
    background-position: bottom;
    border-radius: 20px;
    text-align: center;
}
    #about p {
        position: relative; z-index: 3;
        top: 110px;
        margin: 0;
        width: 320px;

        color: rgb(255, 255, 255); 
        font-size: 1.15em; font-weight: bold;
        text-shadow: 1px 1px 1px black, -1px 1px 1px black, -1px 1px 1px black, -1px -1px 1px black;
        filter: drop-shadow(0px 0px 5px magenta);
    }

    .link {
        position: absolute; z-index: 3; rotate: 3deg;
        top: 340px; left: 43%; line-height: 1.2;

        font-family: 'Acer'; font-size: 1.8em;

        filter: drop-shadow(1px 1px 10px magenta);            
        color: black; text-shadow: 2px 2px 0px limegreen;
        text-decoration: underline;
        animation: float 1s linear infinite;
    }  

    .link:hover {
        color: rgb(255, 255, 255); 
        text-shadow: 2px 2px 0px limegreen;
        text-decoration: underline;
    }

    .link-bg {
        position: absolute; z-index: 2; 
        top: 330px; left: 43%; 
        width: 142px;
        filter: drop-shadow(1px 1px 1px black);
        animation: splat 0.3s;
    }

#tv {
    position: absolute; z-index: 2;
    top: 0; left: 25%;
    width: 650px; height: 620px;

    border: 10px transparent solid; border-radius: 10px;
    border-image: url('/assets/borders/tv4.png');
    border-image-slice: 400 400 570 400; 
    border-image-width: 150px 140px 230px 140px;
    border-image-outset: 15px 0px 30px 5px;

    animation: neon 1s linear infinite;
}

#overlay {
    position: absolute; 
    top: 0; left: 25%; 
    width: 650px; height: 450px; 
    
    background-image: url('/assets/backgrounds/earthbound3.gif');
    background-size: cover;
    mix-blend-mode: overlay;
}

.art {
    position: absolute; z-index: 0; rotate: 2deg;
    top: 20px; left: 40%;
    width: 450px;
    animation: neon 1s linear infinite;
}

#footer {
    margin: 0;
    width: 100%;

    font-size: 1em; font-family: 'FreePixel';
    color: var(--offwhite); text-shadow: 1px 1px 1px blue;
    text-align: center; line-height: 0.5;
}

    #footer ul {
        display: inline-flex;
    }

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

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

hr {
    width: 300px; margin: 0;
    border-top: 2px dotted rgb(102, 6, 227); 
    border-bottom: none; border-left: 0; border-right: 0;
}

/* animations */

/* crt effect */
.crt:before {
content: " "; display: block;
position: absolute; z-index: 1;
width: 630px; height: 500px;
top: 0px; left: 25%;
margin: 0; border-radius: 5px;

background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.303) 50%);
background-size: 100% 2px, 3px 100%;
animation: flicker 0.5s linear infinite;
}

@keyframes flicker {
    0% {opacity: 0.27861;}
    25% {opacity: 0.83891;}
    50% {opacity: 0.46019;}
    65% {opacity: 0.71988;}
    70% {opacity: 0.53455;}
    75% {opacity: 0.37288;}
    90% {opacity: 0.7003;}
    95% {opacity: 0.36108;}
    100% {opacity: 0.24387;}
}

@keyframes neon {
    0% {filter: drop-shadow(0px 0px 10px rgb(0, 255, 0));}
    50% {filter: drop-shadow(0px 0px 10px rgb(133, 255, 67));}
    100% {filter: drop-shadow(0px 0px 10px rgb(0, 255, 0));}
    }

@keyframes splat {
    0% {transform: translate(-50px, 50px) scale(0.1)}
    50% {transform: translate(0) scale(1.2)}
    100% {transform: translate(0) scale(1)}
    }

@keyframes float {
    0% {transform: translateY(0)}
    50% {transform: translateY(-5%)}
    100% {transform: translateY(0)}
    }