:root {
    font-family: 'Departure Mono', monospace;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color-scheme: light dark;
    --white: #cfcfcf;
    --gray: #979797;
    --black: #1a1a1a;
}
/* Fonts */
@font-face {
    font-family: "Departure Mono";
    src: url("../assets/fonts/DepartureMono-1.500/DepartureMono-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Departure Mono', monospace; }
h1 { font-size: clamp(1.8rem, 4vw, 4rem); }
h2 { font-size: clamp(1.4rem, 3vw, 3rem); }
h3 { font-size: clamp(1.1rem, 2vw, 2rem); }
h4 { font-size: clamp(1rem, 1.8vw, 1.6rem); }
h5 { font-size: clamp(0.95rem, 1.5vw, 1.4rem); }
h6 { font-size: clamp(0.9rem, 1.2vw, 1.2rem); }
p  { font-size: clamp(1rem, 1.5vw, 1.25rem); }
li { font-size: clamp(1rem, 1.5vw, 1.25rem); }
a  { font-size: inherit; }
label    { font-size: clamp(0.85rem, 1.1vw, 1rem); }
input,
textarea,
select   { font-size: clamp(0.9rem, 1.1vw, 1rem); }
blockquote { font-size: clamp(1rem, 1.5vw, 1.3rem); }
caption    { font-size: clamp(0.8rem, 1vw, 0.95rem); }
figcaption { font-size: clamp(0.8rem, 1vw, 0.9rem); }
code,
pre        { font-size: clamp(0.8rem, 1vw, 0.95rem); }
small      { font-size: clamp(0.75rem, 0.9vw, 0.85rem); }
strong     { font-size: inherit; }
em         { font-size: inherit; }
span       { font-size: inherit; }
th { font-size: clamp(0.9rem, 1.1vw, 1rem); }
td { font-size: clamp(0.85rem, 1.1vw, 1rem); }
button { font-size: clamp(0.9rem, 1.1vw, 1rem); }

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: black;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);;
    grid-template-rows: repeat(2, 1fr);
    width: 90vw;
    max-width: 900px;
    aspect-ratio: 3 / 2;
}

.section-top-left     { grid-column: 1 / 4; grid-row: 1; }
.section-top-right    { grid-column: 4 / 5; grid-row: 1; }
.section-bottom-left  { grid-column: 1; grid-row: 2; }
.section-bottom-right { grid-column: 2 / 5; grid-row: 2; }
.section-right {
    grid-column: 5;
    grid-row: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(0deg);
    margin: 0;
}

.section {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 1px solid var(--white);
    overflow: hidden;
    position: relative;
}

.section::after {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 30px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.section:hover::after {
    animation: scanline 1.2s linear infinite;
}

@keyframes scanline {
    0%   { top: -10%; }
    100% { top: 110%; }
}

@media (max-width: 600px) {
    body {
        flex-direction: column;
        justify-content: center;
    }
    .grid-container {
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 50vh;
    }
    .section {
        border: 0;
        flex: 1;
    }
    .section-right {
        order: -1;
        writing-mode: horizontal-tb;
        transform: none;
    }

}


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

a:hover {
    color: coral;
}

a:active {
    color: coral;
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50%       { border-color: currentColor; }
}

@keyframes typing {
    0%   { width: 0; }
    80%  { width: 13ch; }
    100% { width: 13ch; }
}

h2.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    width: 0;
    display: inline-block;
    animation:
        typing 4.5s steps(13, end) infinite,
        blink  0.75s step-end infinite;
}

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.links a {
    padding: 0.5rem;
}

/* a.disabled {
    pointer-events: none;
    color: #666;
} */
.disabled {
    color: var(--gray);
    position: relative;
    cursor: default;
    pointer-events: auto;
}

.disabled::before {
    content: 'Stay_Tuned...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    white-space: nowrap;
    opacity: 0;
    overflow: hidden;
    width: 0;
    border-right: 2px solid transparent;
}

a.disabled:hover::before {
    opacity: 1;
    animation:
        typing 2s steps(13, end) forwards,
        blink 0.75s step-end infinite;
}

a.disabled:hover {
    color: transparent;
}