body {
    --inf-trnsc: 2;
    --inf-length: 6s; /*2.4s*/
    --inf-height: 200px;
    --infinity: url(#infinity);

    background: radial-gradient(black 15%, transparent 16%) 0 0,
                radial-gradient(black 15%, transparent 16%) 8px 8px,
                radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
                radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    margin: 0;
}

.splash {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    user-select: none;
    z-index: 100;
    color: white;
    box-shadow: 0 1px 3px 1px black;
    box-sizing: border-box;
    background: #282828;
    gap: 0px;
    animation: var(--inf-length) rzsplash step-end, .8s rzsplash var(--inf-length) ease;
}
.infinity {
    position: relative;
    width: 300px;
    height: 0;
    transform: scale(0);
    animation: var(--inf-length) hdnsplash step-end, .8s hdnsplash var(--inf-length) ease;
}
.infinity svg {
    fill: none;
    stroke-width: 10;
    transform: scale(var(--inf-trnsc));
    stroke: var(--infinity);
    stroke-dasharray: 60 172;
    stroke-linecap: round;
    animation: strkwidth 2s ease, loop 2.5s linear infinite;
    position: absolute;
    transition: .4s;
}
.infinity svg:nth-of-type(1) {
    animation: none;
    stroke: #222;
    stroke-dasharray: none!important;
    animation: strkwidth 2s ease;
}
.infinity svg:nth-of-type(2) {
    filter: blur(10px);
}
.splash .logo {
    text-align: center;
    text-shadow: 1px 1px 1px black;
    width: fit-content;
    max-width: 600px;
    box-sizing: border-box;
    font-size: 1em;
    animation: var(--inf-length) fntsplash step-end, .8s fntsplash var(--inf-length) ease;
}
.splash .logo h1 {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    line-height: 1.5em;
    animation: 2.5s typing steps(20, end), .4s blink-caret step-end 6;
}
.splash .logo h2 {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: 1s appear step-end, 2s typing 1s steps(20, end), .2s blink-caret 1s step-end 6;
    font-size: 1.2em;
}

.coming-soon {
    display: flex;
    width: inherit;
}
.coming-soon .content {
	background: #000;
    position: relative;
    /* animation: flicker 1.5s infinite alternate; */
}
.coming-soon .content div {
	color: #fff;
	font-size: 5em;
    font-weight: bold;
	position: absolute;
    top: 0;
}
.coming-soon .content div:nth-child(1) {
	color: #3cff00;
}
.coming-soon .content div:nth-child(2) {
	color: #008848;
	/* animation: water 4s ease-in-out infinite; */
}

.mainboard {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 132px 32px 32px;
    width: 100%;
    color: wheat;
    user-select: none;
}
.mainboard div {
    border-radius: 20px;
}
.mainboard h3 {
    font-size: 3em;
    line-height: 1em;
    margin: .5em auto;
}
.mainboard > div > .content {
    background: #393939d4;
    box-shadow: 0 0 6px 3px #393939d4;
    padding: 32px;
    display: flex;
    flex-direction: row;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}
.mainboard .card {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 500px;
}
.mainboard .card > .preview {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}
.mainboard .card > .description {
    display: flex;
    flex-direction: column;
    border-radius: 0 0 20px 20px;
    background: #646464d4;
    font-weight: bold;
    padding: 0 16px;
    box-sizing: border-box;
}
.mainboard .card > div, .mainboard .card > a { height: 50%; }
.mainboard .card a { color: unset; text-decoration: unset; }
.mainboard .card .preview img { width: 100%; object-fit: cover; transition: .4s; }
.mainboard .card:hover .preview img { transform: scale(1.1); }
.mainboard .card .block-title { text-align: center; font-size: 1.4em; margin-bottom: 0; }
.mainboard .card .block-language { margin-top: auto; }
.mainboard .card .block-language img { width: 32px; vertical-align: middle; }

@keyframes typing {
    from { width: 0; } to { width: 100%; }
}
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-right: .15em solid lawngreen; }
}
@keyframes appear {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes loop {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 232; }
}
@keyframes strkwidth {
    from { stroke-width: 0; stroke-dasharray: 0 0; transform: scale(0); }
    to { stroke-width: 10; stroke-dasharray: 60 172; transform: scale(var(--inf-trnsc)); }
}
@keyframes rzsplash { from { height: 100%; gap: 32px; } to { height: 100px; gap: 0px; } }
@keyframes fntsplash { from { font-size: 20px; } to { font-size: 1em; } }
@keyframes hdnsplash { from { transform: scale(1); height: var(--inf-height); } to { transform: scale(0); height: 0; } }
@keyframes water {
	0%, 100% { clip-path: polygon( 0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100% ); }
	50% { clip-path: polygon( 0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100% ); }
}
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #0fa, 0 0 80px #0fa, 0 0 90px #0fa, 0 0 100px #0fa, 0 0 150px #0fa; }
    20%, 24%, 55% { text-shadow: none; }  
}
.d-none {
    display: none;
}
.gold {
    color: gold;
    text-decoration: underline;
    font-weight: bold;
}
.author {
    text-align: center;
    font-weight: bold;
    margin-top: 1em;
    font-size: 1.2em;
}


@media (max-width: 650px) {
    body { --inf-trnsc: 1.4; --inf-height: 180px; }
    .splash { gap: 0; }
    .splash .logo { font-size: 3vw; }
    .infinity { overflow: hidden; }
}