/* RESET */
*, *::before, *::after, input::file-selector-button{ margin: 0; padding: 0; border: none; border-radius: 0; outline: none; box-sizing: border-box; background: unset; }
input, input::file-selector-button, button, textarea, select { font: inherit; height: auto; }
nav ul, form ul, address ul{ list-style: none; margin: 0; padding: 0; }
nav li + li, address li + li{ margin-top: unset; }
svg{ display: block; }

/* COLOURS */
/*
Magenta:        #FA05FB
Cyan:           #01E8FD
Cyan Darker:    #01D2E5
White:          #fff
Black:          #000
Dark gray 1:    #0D0D0D
Dark gray 2:    #1A1A1A
Dark gray 3:    #262626
Light gray 1:   #878787
Light gray 2:   #CDCDCD
Light gray 3:   #E5E5E5
Light gray 4:   #F7F7F7
*/

@font-face {
    font-family: 'anonymous_probold';
    src: url('/assets/anonymouspro-bold-webfont.woff2') format('woff2'),
         url('/assets/anonymouspro-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;

}

/* TEXT */
body{ color: #fff; font-size: clamp(0.625rem, 1vw, 2rem); font-family: "SF Mono", Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; }
h1{ color: #01E8FD; font: 5.5em/1.1 'anonymous_probold', mono; font-weight: bold; letter-spacing: -0.009em; text-transform: uppercase; text-shadow: 0.09em 0.06em 0 #FA05FB66, -0.05em -0.05em 0 #FA05FB33, -0.1em -0.07em 0 #01E8FD33; -webkit-text-stroke: 0.03em #fff; }
h2{ font-size: 2.4em; color: #878787; font-weight: normal; text-transform: uppercase; margin: 1em 0 2em; }
h2 strong{ color: #fff; }
a{ font-weight: bold; text-decoration: none;}
a:link, a:visited{ color: #01E8FD; }
a:hover, a:active{ color: #FA05FB; }

/* LAYOUT */
html{ background: #0D0D0D; }
html, body{ height: 100%; }
body{ background: linear-gradient(#1A1A1A 0%, #0D0D0D 100%); display: flex; flex-direction: column; place-items: center; place-content: center; }
main{ display: flex; flex: 0 0 auto; width: 100%; max-width: 80em; max-height: 80vh; padding: 1vw 2vw; justify-content: space-between; aspect-ratio: 3/2;}
#spikey{ width: calc(50% - 1vw); height: 100%; place-self: end center; object-fit: contain; object-position: center bottom; }
#intro{ width: calc(50% - 1vw); place-self: center; text-align: center;}
#logo{ filter: drop-shadow(0 0 0.5em #01e8fd); width: 100%; max-height: 20vh; animation: Blink alternate 8s infinite; aspect-ratio: 2/1;  object-fit: contain; object-position: center bottom; }
footer{ display: flex; margin-top: 5vh; height: 10vh; font-size: 1.5em; background: #00000088; width: 100%; text-align: center; padding: 1em 0; }
footer small{ font: inherit; place-self: center; width: 100%; }
footer a{ white-space: nowrap; }


/* ANIMATION */
@keyframes Blink{
    0%{ filter: drop-shadow(0 0 0.5em #01e8fd); opacity: 1; }
    70%{ filter: drop-shadow(0 0 0.5em #01e8fd); opacity: 1; }
    70.5%{ filter: drop-shadow(0 0 0 #01e8fd); opacity: 0.5; }
    71%{ filter: drop-shadow(0 0 0.7em #01e8fd); opacity: 1; }
    72%{ filter: drop-shadow(0 0 0.7em #01e8fd); opacity: 1; }
    72.5%{ filter: drop-shadow(0 0 0 #01e8fd); opacity: 0.5; }
    73%{ filter: drop-shadow(0 0 0.5em #01e8fd);  opacity: 1; }
    100%{ filter: drop-shadow(0 0 0.5em #01e8fd);  opacity: 1; }
}

@media screen and (max-width: 1000px) and (max-height: 960px){
    h1{ font-size: min(6vh, 6vw); }
    h2{ font-size: min(3vw, 3vh); }
}