@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lobster&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap&family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.cdnfonts.com/css/motiva-sans');

@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/responsive-web/client-web/Chirp-Light.3a18e64a.woff2) format('woff2'), url(https://abs.twimg.com/responsive-web/client-web/Chirp-Light.7a5673aa.woff) format('woff');
  font-weight: 300;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/responsive-web/client-web/Chirp-Regular.80fda27a.woff2) format('woff2'), url(https://abs.twimg.com/responsive-web/client-web/Chirp-Regular.60b215ba.woff) format('woff');
  font-weight: 400;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/responsive-web/client-web/Chirp-Medium.f8e2739a.woff2) format('woff2'), url(https://abs.twimg.com/responsive-web/client-web/Chirp-Medium.20fc288a.woff) format('woff');
  font-weight: 500;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/responsive-web/client-web/Chirp-Bold.ebb56aba.woff2) format('woff2'), url(https://abs.twimg.com/responsive-web/client-web/Chirp-Bold.a573679a.woff) format('woff');
  font-weight: 700;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirp;
  src: url(https://abs.twimg.com/responsive-web/client-web/Chirp-Heavy.f44ae4ea.woff2) format('woff2'), url(https://abs.twimg.com/responsive-web/client-web/Chirp-Heavy.d70ec7ca.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}
@font-face {
  font-family: TwitterChirpExtendedHeavy;
  src: url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff2) format('woff2'), url(https://abs.twimg.com/fonts/v1/chirp-extended-heavy-web.woff) format('woff');
  font-weight: 800;
  font-style: 'normal';
  font-display: 'swap';
}

:root {
    color-scheme: light dark;
    --github-color: #24292f;
    --github-text-color: white;
    --bluesky-color: #1185FE;
    --youtube-color: red;
    --twitch-color: #9146ff;
    --email-color: gray;
    --steam-color: #144b7e;
    --x-color: #0f1419;
    --shadow-distance: .25rem;
    --button-shadow-distance: calc(var(--shadow-distance) * 2);
    --light-intensity: 30%;
    --under-shadow: calc(var(--light-intensity) * 2);
    --logo-multiply-level: 80%;
    --logo-shadow-distance: .15rem;
    --logo-light-intensity: 30%;
    --logo-under-shadow: calc(var(--logo-light-intensity) * 2);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow-color: white;
        --github-color: white;
        --github-text-color: #24292f;
    }
}

body {
    display: flex;
    align-items: center;
    margin: 0;
    font-family: system-ui;
    text-align: center;
    width: 100dvw;
    height: 100dvh;
    font-size: 2.5rem;
}

main {
    margin: 0 auto;
    max-width: 720px;
    max-height: 100dvh;
    min-width: 360px;
}


a {
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
}

h1 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-family: "Be Vietnam Pro";
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15rem;
    height: 3rem;
    vertical-align: middle;
    border-radius: .5rem;
    border-style: solid;
    font-family: system-ui;
    vertical-align: middle;
    color: white;
    padding: .25rem;
    font-size: 2rem;
    margin-bottom: .5rem;
    vertical-align: middle;
}

button:not([disabled]):active {
    box-shadow: none !important;
    transform: translateY(var(--button-shadow-distance));
}

button:disabled {
    opacity: .25;
}

button[name="Github"] {
    color: var(--github-text-color);
    background-color: var(--github-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--github-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--github-color), black var(--light-intensity));
    font-family: "Mona Sans";
    font-feature-settings: unset;
    font-weight: 700;
    letter-spacing: -.32px;
}

button[name="Bluesky"] {
    background-color: var(--bluesky-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--bluesky-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--bluesky-color), black var(--light-intensity));
    font-family: "Inter";
    font-weight: 500;
}

button[name="YouTube"] {
    background-color: var(--youtube-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--youtube-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--youtube-color), black var(--light-intensity));
    font-family: "Roboto Condensed";
    font-weight: 500;
}

button[name="Twitch"] {
    background-color: var(--twitch-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--twitch-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--twitch-color), black var(--light-intensity));
    font-family: system-ui;
    font-weight: Bold;
}

button[name="Email"] {
    background-color: var(--email-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--email-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--email-color), black var(--light-intensity));
    font-family: system-ui;
    font-weight: bold;
}

button[name="Steam"] {
    background-color: var(--steam-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--steam-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--steam-color), black var(--light-intensity));
    font-family: "Motiva Sans";
    font-weight: 500;
}

button[name="X"] {
    background-color: var(--x-color);
    box-shadow: 0 var(--button-shadow-distance) color-mix(in srgb, var(--x-color), black var(--under-shadow));
    border-color: color-mix(in srgb, var(--x-color), black var(--light-intensity));
    font-family: "TwitterChirp";
    font-weight: 500;
}

section {
    width: 100%;
}

@keyframes colourize-h1 {
    10% {
        color: orangered;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, orangered, black var(--under-shadow));
    }
    20% {
        color: orange;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, orange, black var(--under-shadow));
    }
    30% {
        color: yellowgreen;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, yellowgreen, black var(--under-shadow));
    }
    40% {
        color: green;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, green, black var(--under-shadow));
    }
    50% {
        color: teal;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, teal, black var(--under-shadow));
    }
    60% {
        color: turquoise;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, turquoise, black var(--under-shadow));
    }
    70% {
        color: purple;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, purple, black var(--under-shadow));
    }
    80% {
        color: mediumpurple;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, mediumpurple, black var(--under-shadow));
    }
    90% {
        color: palevioletred;
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, palevioletred, black var(--under-shadow));
    }
    100% {
        text-shadow: 0 var(--shadow-distance) color-mix(in srgb, red, black var(--under-shadow));
        color: red;
    }
}

:root {
    --logo-multiply-level: 80%;
    --logo-shadow-distance: .15rem;
    --logo-light-intensity: 30%;
    --logo-under-shadow: calc(var(--logo-light-intensity) * 2);
}

.outer {
    transform: translate(12px, 12px);
}

.face {
    filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, #FCEA2B, black var(--logo-under-shadow)));
}

text {
    animation-name: colourize-face;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, red, black var(--logo-under-shadow));


}

@media (prefers-color-scheme: dark) {
    text {
        fill: white;
    }
}


.lens {
    fill: black;
}

.eye {
    stroke: black;
}

.rotate-face {
    transform-origin: calc(50% - 12px) calc(50% - 12px);
    animation-name: rotate-face;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-duration: 60s;
}

.rotate-text {
    transform-origin: calc(50% - 12px) calc(50% - 12px);
    animation-name: rotate-face;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 60s;
}
/* 
.face-border {
    animation-name: colourize-border;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
} */

@keyframes rotate-face {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate-text {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes colourize-shadow {
    10% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, orangered, black var(--logo-under-shadow)));
    }

    20% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, orange, black var(--logo-under-shadow)));
    }

    30% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, yellowgreen, black var(--logo-under-shadow)));
    }

    40% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, green, black var(--logo-under-shadow)));
    }

    50% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, teal, black var(--logo-under-shadow)));
    }

    60% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, turquoise, black var(--logo-under-shadow)));
    }

    70% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, purple, black var(--logo-under-shadow)));
    }

    80% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, mediumpurple, black var(--logo-under-shadow)));
    }

    90% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, palevioletred, black var(--logo-under-shadow)));
    }

    100% {
        filter: drop-shadow(0 var(--logo-shadow-distance) color-mix(in srgb, red, black var(--logo-under-shadow)));
    }
}

@keyframes colourize-border {

    0% {
        stroke: color-mix(in srgb, red, black var(--logo-light-intensity));
    }

    10% {
        stroke: color-mix(in srgb, orangered, black var(--logo-light-intensity));
    }

    20% {
        stroke: color-mix(in srgb, orange, black var(--logo-light-intensity));
    }

    30% {
        stroke: color-mix(in srgb, yellowgreen, black var(--logo-light-intensity));
    }

    40% {
        stroke: color-mix(in srgb, green, black var(--logo-light-intensity));
    }

    50% {
        stroke: color-mix(in srgb, teal, black var(--logo-light-intensity));
    }

    60% {
        stroke: color-mix(in srgb, turquoise, black var(--logo-light-intensity));
    }

    70% {
        stroke: color-mix(in srgb, purple, black var(--logo-light-intensity));
    }

    80% {
        stroke: color-mix(in srgb, mediumpurple, black var(--logo-light-intensity));
    }

    90% {
        stroke: color-mix(in srgb, palevioletred, black var(--logo-light-intensity));
    }

    100% {
        stroke: color-mix(in srgb, red, black var(--logo-light-intensity));
    }
}

@keyframes colourize-face {
    
    0% {
        fill: red;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, red, black var(--logo-under-shadow));
    }

    10% {
        fill: orangered;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, orangered, black var(--logo-under-shadow));
    }

    20% {
        fill: orange;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, orange, black var(--logo-under-shadow));
    }

    30% {
        fill: yellowgreen;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, yellowgreen, black var(--logo-under-shadow));
    }

    40% {
        fill: green;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, green, black var(--logo-under-shadow));
    }

    50% {
        fill: teal;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, teal, black var(--logo-under-shadow));
    }

    60% {
        fill: turquoise;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, turquoise, black var(--logo-under-shadow));
    }

    70% {
        fill: purple;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, purple, black var(--logo-under-shadow));
    }

    80% {
        fill: mediumpurple;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, mediumpurple, black var(--logo-under-shadow));
    }

    90% {
        fill: palevioletred;
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, palevioletred, black var(--logo-under-shadow));
    }

    100% {
        text-shadow: 0 var(--logo-shadow-distance) color-mix(in srgb, red, black var(--logo-under-shadow));
        fill: red;
    }
}