@font-face {
    font-family: "Courier Prime";
    src: url("/spast204/CourierPrime-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Bruno Ace SC";
    src: url("/spast204/BrunoAceSC-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "NotoColorBlob";
    src: url("/spast204/NotoColorBlob.ttf") format("truetype");
}

@font-face {
    font-family: "PlaywriteHR";
    src: url("/spast204/PlaywriteHR-VariableFont_wght.ttf") format("truetype");
}

body {
    font-family: "Courier Prime", "NotoColorBlob", sans-serif;
    background-color: #070606;
    color: #33d77b;
    display: flex;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    flex-direction: column;
    margin: 0;
    display: flex;
    flex-direction: column;
    margin: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><g transform="scale(-1, 1) translate(-512, 0)"><path d="M 14.61483,508.63967 13.21598,479.9516 c -0.76981,-15.77844 -1.621054,-54.28452 -1.889614,-85.56959 -0.26856,-31.28505 0.02671,-56.88174 0.653059,-56.88152 0.626429,2.4e-4 3.002197,2.00322 5.278546,4.4516 4.090997,4.40016 4.114204,5.0803 2.233534,58.86001 -1.046462,29.92462 -2.570966,66.42772 -3.388932,81.11799 z M 36.621646,336.39145 c -2.001676,0.0637 -4.062014,-0.22986 -6.117088,-0.90808 -3.741954,-1.23496 -6.80491,-2.96257 -6.80491,-3.83718 0,-0.87463 3.118829,-3.96865 6.928565,-6.87448 8.357824,-6.37482 12.856311,-14.50148 12.856311,-23.22406 v -6.47644 l 4.173383,4.17724 c 5.325154,5.32514 7.317274,20.6844 3.586008,27.65631 -3.150187,5.88616 -8.617223,9.29575 -14.622269,9.48669 z M 9.850236,323.65108 c -2.9908797,0 -2.3683288,-13.28744 0.91968,-19.64577 1.593177,-3.08086 5.666824,-7.93504 9.053915,-10.78507 l 6.159586,-5.18194 h -4.957813 c -5.937738,0 -13.1538556,-8.33576 -13.1538556,-15.19417 0,-7.45684 8.3610886,-14.48362 17.2228916,-14.47541 l 7.508203,0.008 -6.430085,3.91833 c -11.177465,6.81504 -6.457605,19.53557 6.03593,16.26843 6.514705,-1.70361 16.983219,-14.42438 21.315114,-25.8981 5.363185,-14.20527 4.569277,-34.69448 -1.827786,-47.17456 -4.490036,-8.76003 -16.795081,-22.31227 -20.260165,-22.31227 -1.113097,0 -3.835614,4.09887 -6.051402,9.10801 -4.392519,9.93002 -4.29223,18.76222 0.398013,34.99449 3.110241,10.7641 1.355818,15.81618 -5.862042,16.88668 -10.9044529,1.61724 -21.1519304,-13.45371 -19.4448122,-28.59919 0.51387258,-4.55899 2.8204527,-12.1898 5.1278441,-16.95624 5.4863261,-11.3332 22.2219171,-28.28227 33.7076901,-34.14051 9.773393,-4.98474 12.810506,-4.91193 7.709157,0.18934 -2.885861,2.88584 -2.559708,3.93258 3.85265,12.31919 12.997987,16.99986 15.251524,24.32283 15.310087,49.72495 0.04966,21.55928 -0.279719,23.45503 -6.294835,36.15377 -5.082141,10.72912 -10.50717,17.44634 -27.204201,33.68452 -11.470875,11.15567 -20.855276,21.81888 -20.855276,23.69548 0,1.87662 -0.89032,3.41212 -1.978488,3.41212 z M 82.849459,199.99561 78.424928,188.1015 C 73.54758,174.98664 64.49046,160.87171 52.808915,148.18011 c -5.776586,-6.27616 -7.476859,-9.64077 -6.994266,-13.84941 0.529304,-4.61581 1.690677,-5.66283 6.839706,-6.16339 4.825927,-0.46929 7.156625,0.60977 10.506838,4.86886 2.767944,3.51894 4.035857,4.56556 5.185814,3.72134 h 0.004 c 0.321148,-0.23663 0.633452,-0.62065 0.966056,-1.14 6.105355,-9.53156 7.605069,-31.9688 3.006371,-45.002879 l -2.820888,-7.99131 9.764924,6.070792 c 5.370229,3.338302 10.324125,5.507713 11.009196,4.822563 0.685071,-0.68515 -2.516419,-6.225905 -7.114048,-12.315294 l -8.358339,-11.071023 6.600116,3.439205 c 3.863413,2.013903 12.81601,3.806412 21.604925,4.327942 12.33182,0.731645 16.7164,0.136515 24.55721,-3.330982 l 9.54078,-4.219718 -3.98016,-4.42469 c -5.7221,-6.35787 -6.71309,-8.609784 -5.35195,-12.156817 2.16654,-5.645812 9.35197,-3.351954 30.16034,9.621979 11.26017,7.020663 25.06012,14.249265 30.66656,16.067495 5.60642,1.818033 11.08416,4.203693 12.17233,5.297797 2.77396,2.789074 -25.15999,0.389564 -36.98072,-3.176462 l -9.28188,-2.801539 -9.02685,8.648168 c -5.98016,5.730095 -12.01935,9.404147 -17.903,10.885638 l -8.88001,2.233515 5.5645,7.19121 c 6.96841,9.00014 10.74914,18.28617 9.8963,24.31007 -0.59205,4.18173 -1.53523,4.58614 -9.56011,4.08835 -5.583,-0.34663 -12.33502,-2.66957 -18.1078,-6.22927 l -9.208472,-5.67648 -3.381196,8.86066 c -1.861025,4.87301 -6.432874,11.90852 -10.159079,15.6346 l -6.774005,6.77414 3.041153,10.24402 c 1.673049,5.6338 2.993412,15.64671 2.936828,22.25025 z m -70.3986,-36.95753 c -1.38597,-0.0198 -2.130554,-0.94034 -3.4855412,-2.78603 C 4.0349069,153.53568 -0.04422004,137.52952 2.9593884e-4,125.07969 0.05233016,110.54196 4.7100065,99.13657 13.67582,91.592201 c 4.398494,-3.700959 7.526997,-5.470518 8.999803,-5.406019 0.111389,0 0.212964,0.01978 0.30528,0.04551 1.292289,0.361865 0.694173,2.773444 -2.256722,7.121764 -2.658849,3.917999 -5.422559,10.255684 -6.140255,14.081284 -0.857833,4.57268 -0.401455,10.62428 1.051071,16.89827 0.81308,3.51181 1.93599,7.09624 3.319368,10.52614 1.383378,3.43011 3.025463,6.70747 4.868939,9.61427 3.23827,5.10627 5.466165,9.9603 4.953955,10.78889 -0.01781,0.0277 -0.037,0.0574 -0.06173,0.089 -0.0079,0 -0.01781,0.0198 -0.0271,0.0317 -0.174503,0.20438 -0.516801,0.47741 -0.969914,0.79219 -0.129987,0.091 -0.34495,0.2117 -0.494622,0.30924 -0.46722,0.30469 -0.957984,0.61511 -1.588192,0.97381 -1.615079,0.9196 -3.665366,1.96444 -5.838873,2.94439 -2.30466,1.03929 -3.907551,1.73529 -5.158747,2.16019 -0.254453,0.0859 -0.537872,0.1832 -0.761243,0.24343 -0.1379,0.0372 -0.289967,0.0809 -0.417342,0.10822 -0.121875,0.0261 -0.246163,0.0526 -0.359373,0.0697 -0.05184,0.008 -0.104464,0.0178 -0.154519,0.0231 -0.02612,0.004 -0.0554,0.01 -0.08112,0.0119 -0.144232,0.0138 -0.281876,0.0212 -0.413485,0.0198 z m 19.64191,-59.41252 3.002513,-7.639731 c 2.724793,-6.936578 2.698677,-8.096169 -0.285971,-12.651439 -2.31762,-3.53714 -5.049199,-5.015664 -9.266424,-5.015664 -6.516109,0 -15.692651,-7.520232 -15.692651,-12.86017 0,-1.731176 2.29376,-5.439258 5.09692,-8.242577 4.334174,-4.334075 6.378129,-4.952352 13.667807,-4.130884 11.522673,1.298877 19.790357,7.604119 23.826843,18.173596 5.358556,14.031236 -0.583812,26.698503 -14.378793,30.654879 z M 244.1078,72.232502 c -9.31237,0.310821 -18.61621,-0.586423 -27.07667,-2.790063 -11.0829,-2.886613 -41.6977,-17.148146 -43.67357,-20.345184 -1.52657,-2.469944 9.28993,-19.916841 17.84888,-28.788578 1.04332,-1.081441 2.31564,-2.246177 3.72514,-3.427532 2.81895,-2.362512 6.18081,-4.786159 9.31666,-6.719933 1.56791,-0.9666887 3.07979,-1.81269 4.44,-2.465393 13.68459,-6.5650176 28.28177,-5.6044619 36.64452,2.407424 12.18517,11.674264 5.53343,23.103196 -11.02079,18.934918 -4.71903,-1.18828 -12.69594,-2.160113 -17.72523,-2.160113 -9.8431,0 -29.24159,7.196155 -28.15867,10.44503 1.10509,3.315154 23.96198,16.249121 35.02926,19.823456 13.23502,4.274325 36.05398,4.345353 48.36477,0.150365 11.70503,-3.988235 24.90884,-16.068089 24.90884,-22.791188 0,-1.367134 -0.18341,-2.598347 -0.51395,-3.690472 v 0 c -2.31578,-7.641315 -11.89303,-8.379687 -17.07603,0.142451 l -3.68262,6.059118 -1.28293,-5.108455 c -2.16556,-8.628382 6.41489,-18.876751 15.80471,-18.876751 5.73837,0 14.66477,7.312688 14.66477,12.013773 0,4.951759 2.41854,4.836017 7.10633,-0.343861 5.96296,-6.588958 13.70924,-9.697755 23.95824,-9.614263 l 9.49442,0.07716 -6.90925,2.998596 c -3.80062,1.648278 -14.92961,10.820745 -24.7311,20.383962 -9.80146,9.56302 -21.82827,19.708111 -26.72503,22.543877 -11.67029,6.758118 -27.21008,10.626457 -42.7307,11.144425 z m 94.6969,-13.992458 c -1.37859,0.04748 -2.78998,0.01978 -4.19655,-0.08112 -1.40656,-0.100902 -2.80684,-0.275207 -4.16177,-0.51777 -4.13157,-0.739558 -7.83995,-2.1245 -9.99292,-4.072914 -3.81769,-3.455033 -4.88916,-6.227488 -2.76292,-6.121045 0.13632,0 0.2855,0.0277 0.44825,0.05738 0.3255,0.06133 0.70347,0.174107 1.13608,0.340102 5.77137,2.214719 18.90251,-3.247292 24.41424,-10.155181 6.14962,-7.707199 11.24371,-8.752038 14.35176,-2.944583 2.80769,5.246355 -1.85933,16.403047 -8.74862,20.917164 -2.44693,1.603366 -6.31082,2.435123 -10.48755,2.577376 z M 79.348466,58.200475 C 74.058445,58.344904 68.371975,57.181554 63.022085,54.45223 49.132572,47.366277 43.800746,28.507333 52.847555,18.468486 c 7.608531,-8.4428 23.788484,-0.553779 21.574022,10.518432 -2.089045,10.445228 9.351935,14.865762 22.976731,8.880046 2.753132,-1.209647 3.454882,-0.566441 3.419862,3.141641 -0.0542,5.750276 -3.157891,10.371825 -7.933287,13.370223 h -0.004 c -3.715402,2.332043 -8.440901,3.682757 -13.532559,3.821647 z m -29.08222,-3.62459 c -0.424327,0 -8.162924,-3.512409 -17.199686,-7.805925 C 19.564056,40.35511 15.854807,37.573357 12.253782,31.166222 9.8437465,26.878246 7.8717484,20.947729 7.8717484,17.985339 c 0,-4.881126 0.509876,-5.259413 5.4408406,-4.045809 13.078159,3.218802 21.235067,10.285366 29.576846,25.635265 4.316506,7.942836 7.55161,14.501127 7.407734,14.977744 -7.51e-4,0.002 -0.0059,0 -0.0079,0.01978 v 0 h -0.004 v 0 h -0.004 -0.004 v 0 c -0.0015,3.96e-4 -0.0099,-3.96e-4 -0.01187,0 z M 164.9142,42.372574 c -0.76625,0.01978 -5.46909,-2.239846 -10.92806,-5.255457 -23.89469,-13.199875 -46.70942,-15.727394 -59.12277,-6.549783 -4.268765,3.156083 -5.873635,3.586207 -5.873635,1.580416 0,-4.332294 7.121566,-12.290563 14.262885,-15.939884 5.0338,-2.572429 10.55347,-3.177649 24.31763,-2.670167 15.22128,0.561099 19.88884,1.620579 32.15042,7.291716 7.88922,3.648926 14.34404,7.032733 14.34404,7.519837 0,0.700978 -3.618,6.296734 -9.05004,13.992457 h -0.004 -0.004 -0.004 c -0.0178,0.01979 -0.0506,0.02176 -0.0888,0.02374 z M 374.61456,24.871466 c -3.3111,0 -5.63576,-0.0831 -7.4,-0.440609 -2.9411,-0.597305 -4.33671,-1.938523 -6.21368,-4.803175 l -3.45464,-5.270889 53.99881,1.313914 c 29.69923,0.722346 64.68966,1.313913 77.75224,1.313913 12.45027,0 22.30381,0.438631 22.69078,0.989244 h 0.004 c 0.002,0 0.006,0.01979 0.008,0.01979 v 0 0 c -6e-5,0 -0.002,0.01979 -0.004,0.0277 v 0 h -0.004 v 0 c -0.002,0.002 -0.0119,0.01978 -0.0158,0.01978 -1.02942,1.029407 -116.52566,6.760888 -137.36192,6.816484 z" fill="%23BFDFED"/></g></svg>');
    background-position: top right;

    background-repeat: no-repeat;

    background-size: 250px;
}

a {
    color: whitesmoke;
    text-decoration: none;
}

.title {
    font-family: "Bruno Ace SC", "NotoColorBlob";
    font-size: 3em;
    display: flex;
    height: min-content;
    justify-content: space-between;
}

.container {
    text-align: justify;
}

.table {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.about {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    box-sizing: border-box;
    height: fit-content;
    font-size: small;
    display: flex;
    justify-content: space-between;
    border: 2px solid #33d77b;
    border-radius: 5px;
    padding: 2%;
    width: fit-content;
}

button {
    border: 2px solid darkorange;
    color: white;
    background-color: #070606;
    padding: 8px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    width: 50px;
    border-radius: 2px;
    cursor: pointer;
    margin: auto;
}

button:hover {
    filter: invert(100%);
}

.special {
    width: 100px;
    border-radius: 10px;
    animation-name: borderRotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.special:hover {
    filter: none;
    animation: none;
    border-color: #070606;
    color: #070606;
    background-color: gold;
}

.tea {
    opacity: 0;
    font-family: "PlaywriteHR";
    color: goldenrod;
    background-color: #070606;
    text-align: center;
    display: inline-block;
    font-size: 24px;
    margin: auto;
}

.tea.brewed {
    opacity: 1;
}

/* Full-screen dark/foggy overlay */
.tea-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 1); /* Deep dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none; /* Stops it from blocking clicks when hidden */
    transition: opacity 0.5s ease;
}

/* Active class triggered by button */
.tea-transition-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Mega Steam Container */
.screen-steam {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

/* Massive smoke particles filling space */
.screen-steam span {
    display: block;
    width: 80px;
    height: 300px;
    background: linear-gradient(to top, pink, transparent);
    border-radius: 50%;
    filter: blur(50px); /* Massive blur creates the full-screen smoke cloud */
    transform: translateY(100vh);
}

/* When active, make the smoke columns rise up and cover the screen */
.is-active .screen-steam span {
    animation: full-screen-smoke 2.5s ease-in-out forwards;
    animation-delay: calc(var(--i) * -0.3s);
}

@keyframes full-screen-smoke {
    0% {
        transform: translateY(100vh) scaleX(1);
        opacity: 0;
    }
    30% {
        opacity: 0.8;
    }
    70% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-120vh) scaleX(3);
        opacity: 0;
    }
}

@keyframes borderRotate {
    0% {
        border-color: #00f0ff;
        color: #00f0ff;
    }

    33% {
        border-color: #33d77b;
        color: #33d77b;
    }

    66% {
        border-color: darkorange;
        color: darkorange;
    }

    100% {
        border-color: gold;
        color: gold;
    }
}

@media screen and (max-width: 800px) {
    .title {
        font-size: 1rem;
    }

    body {
        background-size: 150px;
    }
}
