/* import fonts */

@font-face {
    font-family: "NEC_APC3";
    src: url("/fonts/NEC_APC3.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Sharp_PC3K";
    src: url("/fonts/Sharp_PC3K.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}
 
body {
    overflow-x: hidden;
    margin: 0;
    margin-top: 10px;
}

/* TODO: edit colors of site*/

:root {
    --body-text-shadow: 0 0 20px #ffffff4a, 0 0 20px #00ffab45;
    --pink-text-shadow: 0 0 20px #ff3b8d59;
    --letter-shadow: drop-shadow(0 0 0.75rem rgba(255, 59, 141, 0.35));
    --firefox-body-shadow: 0 0 20px #ffffff31, 0 0 20px #00ffab45;
    --firefox-green-shadow: 0 0 20px #08bd994f;
    --link-color: #ff3b8d;
}

/* text settings */

body,
#debug {
    image-rendering: pixelated;
    font-family: "NEC_APC3";
    background-color: black;
    text-shadow: var(--body-text-shadow);
    -webkit-font-smoothing: none;
}

h2 {
    color: var(--link-color);
    font-family: "Sharp_PC3K";
    margin: 0;
    text-shadow: var(--pink-text-shadow);
    transition: 0.7s;
}

a {
    text-decoration: none;
    color: var(--link-color);
    text-shadow: var(--pink-text-shadow);
    transition: 0.7s;
}

@media screen and (min-width: 601px) {
    @supports (-moz-appearance: none) {
        body {
            text-shadow: var(--firefox-body-shadow) !important;
        }
        h2 {
            text-shadow: var(--firefox-green-shadow) !important;
        }
        a {
            text-shadow: var(--firefox-green-shadow) !important;
        }
    }
    body:before {
        content: "";
        position: fixed;
        opacity: 0.2;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1000;
        background-image: url(/img/overlay.png);
        background-repeat: all;
        background-position: 0px 0px;
        animation-name: Static;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: steps(4);
        box-shadow: inset 0px 0px 10em rgb(0 0 0 / 40%);
    }

    body:after {
        content: "";
        position: fixed;
        left: 0;
        top: 0;
        opacity: 0.5;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1000;
        background-image: url(/img/overlay2.png);
        background-repeat: all;
        background-position: 0px 0px;
        animation-name: Static;
        animation-duration: 0.8s;
        animation-iteration-count: infinite;
        animation-timing-function: steps(4);
    }
}

/* figure ouyt what this all does... */

#container {
    width: 900px;
    margin: 0 auto;
}

#logo {
    text-align: center;
    padding-top: 5px;
    animation: flickering 0.07s infinite;
    margin-right: 50px;
}
.noanimation {
    animation: none !important;
}

#maintd {
    width: 675px;
    vertical-align: baseline;
    margin: 0 auto;
}
#menutd {
    width: 225px;
    vertical-align: baseline;
    margin: 0 auto;
}
.box {
    background-color: #000000a8;
    border: 2px solid #383838;
    border-radius: 4px;
    color: white;
    padding: 10px 15px;
    margin: 5px;
}
@-moz-document url-prefix() {
    .box {
        background-color: #000000d3;
    }
}

a:hover {
    text-decoration: underline;
}

@keyframes Static {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px 4px;
    }
}

.navlink {
    color: white;
    display: inline-block;
    margin-bottom: 3px;
}
.centerbox {
    text-align: center;
}

textarea {
    background-color: black;
    color: white;
    border: 1px solid #383838;
    font-family: 'NEC_APC3', monospace;
    resize: none;
}

.letter {
    display: inline;
    height: 160px;
    filter: var(--letter-shadow);
}

footer {
    text-align: center;
    color: white;
}
h3 {
    margin: 0;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(93, 255, 138, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(93, 255, 138, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(93, 255, 138, 0);
    }
}

#bg {
    z-index: -999;
    background-size: cover;
    image-rendering: pixelated;
    background-color: black;
    width: 100%;
    position: absolute;
}