@import url("./colors.css");

@font-face {
    font-family: "Wyse700b";
    src: url("Ac437_Wyse700b-2y.ttf");
}

@font-face {
    font-family: "IBM Plex Serif";
    src: url("IBMPlexSerif-Light.ttf");
}

body {
    color: var(--fg);
    background-color: var(--bg);
    background-image: linear-gradient(90deg, #00f4, transparent),
        url("Starfield_08-512x512.png"),
        url("Blue_Nebula_08-512x512.png");
    background-size: 4px, 512px, 1024px;
    background-blend-mode: screen, lighten, normal;
    padding: 24px;
    padding-top: 64px;
    font-family: "Wyse700b";
    font-size: 2rem;
    z-index: -10;
    --bg-size: 512px;
    animation: bg-scroll 6000s linear infinite forwards running;
    --drop: color-mix(in hsl, var(--fg), transparent);
}

@keyframes bg-scroll {
    from {
        background-position: 0, 0, 0;
    }
    to {
        background-position: calc(var(--bg-size) * 4),
            calc(var(--bg-size) * 4),
            calc(var(--bg-size) * 10);
    }
}

#div-bodyborder {
    position: fixed;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    pointer-events: none;
    border: 2px solid var(--fg);
    box-shadow: 0 0 16px var(--drop), inset 0 0 16px var(--drop);
}
#div-bodyborder::after {
    position: absolute;
    top: -64px;
    left: -64px;
    width: 96px;
    height: 96px;
    content: '';
    border: 8px double var(--fg);
    box-shadow: 0 0 16px var(--drop), inset 0 0 16px var(--drop);
    border-radius: 50%;
}

header {
    position: relative;
    padding-left: 12px;
    margin-bottom: 8px;
}
header:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    content: '';
    box-sizing: border-box;
    border-left: 4px solid var(--fg);
    box-shadow: 0 0 16px var(--drop);
}

h1 {
    font-family: "IBM Plex Serif";
    font-size: 4rem;
    font-weight: normal;
    margin: 0;
    color: var(--fg);
    text-shadow: 0 0 32px color-mix(in hsl, var(--fg), transparent);
}

main {
    width: min(300px, 100%);
    padding: 8px;
    border: 4px double var(--fg);
    box-shadow: 0 0 16px var(--drop), inset 0 0 16px var(--drop);
}

.div-link {
    position: relative;
    margin: 16px auto;
    background-color: var(--bg);
    background-size: 80%, min(400px, 100vw);
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: luminosity;
    mix-blend-mode: luminosity;
    opacity: 50%;
    box-shadow: 0 0 32px var(--drop);
    --grad: linear-gradient(
            90deg,
            transparent 0,
            var(--fg) 20% 80%,
            transparent 100%
    );
    a {
        display: inline-block;
        height: 100px;
        width: min(400px, 100vw);
        padding-left: 16px;
        line-height: 100px;
        color: var(--fg);
        text-decoration: none;
        -webkit-text-stroke: 4px var(--bg);
        text-shadow: 0 0 16px var(--fg);
        paint-order: stroke fill;
    }
}
.div-link:first-of-type {
    margin: auto;
    margin-top: 8px;
}
.div-link:last-of-type {
    margin: auto;
}
.div-link:hover {
    transform: scale(1.1);
    mix-blend-mode: normal;
    opacity: 100%;
}

#link-bsky {
    background-image: url("bsky_logo.svg");
}
#link-kofi {
    background-image: url("./kofi_logo.svg");
}
#link-e6 {
    background-image: url("./e6_logo.svg");
}
#link-derpi {
    background-image: url("./derpi_logo.svg");
}

.nsfw::after {
    position: absolute;
    right: 8px;
    bottom: 8px;
    content: "nsfw";
    font-size: 1rem;
    user-select: none;
}

footer {
    margin-top: 16px;
    border: 4px double var(--fg);
    box-shadow: 0 0 16px var(--drop), inset 0 0 16px var(--drop);
    width: min(300px, 100%);
    padding: 8px;
    /* background-color: color-mix(in hsl, var(--bg), transparent); */
    font-size: 2rem;

    img {
        margin-top: 8px;
        vertical-align: middle;
    }
}

.label {
    display: block;
    font-size: 1rem;
    user-select: none;
}

.bl-cursor {
    opacity: 100%;
    animation: blink 2s steps(2, jump-none) infinite;
    user-select: none;
}

@keyframes blink {
    0% {
        opacity: 0;
    }
}

#blinkenlights {
    position: fixed;
    bottom: 32px;
    width: calc(100% - 88px);
    padding: 8px;
    border: 4px double var(--fg);
    box-shadow: 0 0 16px var(--drop), inset 0 0 16px var(--drop);
    opacity: 25%;
    z-index: -9;
}

.bl-bar {
    width: 0;
    margin: 4px 0;
    background-color: var(--fg);
    box-shadow: 0 0 16px var(--drop), inset 0 0 16px var(--drop);
    height: 4px;
    animation: bar-move 10s linear infinite;
}
.bl-bar:nth-of-type(2) {
    animation-delay: 0.5s;
}
.bl-bar:nth-of-type(3) {
    animation-delay: 2s;
}

@keyframes bar-move {
    0% {
        width: 0%;
    }
    10% {
        width: 15%;
    }
    20% {
        width: 21%;
    }
    30% {
        width: 48%;
    }
    40% {
        width: 83%;
    }
    50% {
        width: 10%;
    }
    60% {
        width: 39%;
    }
    70% {
        width: 100%;
    }
    80% {
        width: 68%;
    }
    90% {
        width: 9%;
    }
    100% {
        width: 0%;
    }
}

.bl-gibberish::after {
    content: '';
    animation: gibberish 1s linear infinite;
}

@keyframes gibberish {
    0% {
        content: "83:65:07:8C:69:C1";
    }
    10% {
        content: "1E:86:B0:E3:3E:5E";
    }
    20% {
        content: "10:61:86:4C:49:1C";
    }
    30% {
        content: "FF:84:DF:44:80:D8";
    }
    40% {
        content: "70:0C:AF:1B:2F:A4";
    }
    50% {
        content: "E7:77:32:75:D2:AD";
    }
    60% {
        content: "87:2E:D8:DA:6D:57";
    }
    70% {
        content: "DF:E1:70:37:B8:48";
    }
    80% {
        content: "DC:01:89:E3:DF:F5";
    }
    90% {
        content: "<< null >>";
    }
    100% {
        content: "E5:60:CF:B9:3A:DD";
    }
}

@property --angle {
    initial-value: 0deg;
    inherits: false;
    syntax: '<angle>';
}

.bl-spinny {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 1rem;
    height: 1rem;
    background-image: conic-gradient(
        from 0deg,
        transparent 0deg var(--angle),
        var(--fg) var(--angle)
        );
    animation: angle 4s linear infinite;
    clip-path: circle();
}

@keyframes angle {
  0% {
    --angle: 41.4836246355deg;
  }
  10% {
    --angle: 13.0663988112deg;
  }
  20% {
    --angle: 146.096152851deg;
  }
  30% {
    --angle: 7.8144141016deg;
  }
  40% {
    --angle: 78.2498414777deg;
  }
  50% {
    --angle: 30.8392591807deg;
  }
  60% {
    --angle: 61.974474485deg;
  }
  70% {
    --angle: 319.6622087555deg;
  }
  80% {
    --angle: 186.4661377563deg;
  }
  90% {
    --angle: 126.280999249deg;
  }
  100% {
    --angle: 94.7184781177deg;
  }
}

/* Special settings for phones */
@media (pointer: coarse) {
    h1 {
        text-align: center;
    }
    main {
        margin: auto;
    }
    .div-link {
        mix-blend-mode: normal;
        opacity: 100%;
    }
    footer {
        margin: auto;
    }
    header .label {
        width: min(300px, 100%);
        margin: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bl-cursor {
        animation: none;
    }
    #blinkenlights {
        display: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .div-link {
        mix-blend-mode: normal;
        opacity: 100%;
    }
    .bl-cursor {
        animation: none;
    }
    #blinkenlights {
        display: none;
    }
}