html,
body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Syne Mono";
    overflow: hidden;
    background-color: #f0f8ff;
    font-size: 1vw;
}

#stage {
    width: 100vw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: clamp(8px, 1vw, 20px); */
}

#grid {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 8px;
}

.rect {
    border: 2px solid #222;
    transition: transform .15s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rect.rect:nth-child(4n) {
    background: lightcoral
}

.rect:nth-child(4n + 1) {
    background: cornsilk;
}

.rect:nth-child(4n+2) {
    background: linear-gradient(90deg, cornsilk, lightcoral);
}

.rect:nth-child(4n+3) {
    background: linear-gradient(-90deg, cornsilk, lightcoral);
}

.rect:hover {
    transform: scale(1.5, 1.05);
    cursor: pointer;
}

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


#poetic-web {
    font-size: 4vw;
}

#html-review {
    font-size: 1vw
}

#codeberg,
#brightspace,
#vscodium {
    font-size: 2vw;
}

#trajectory {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    text-align: center;
}

.sub-section {
    background: cornsilk;
    padding: 1em;
    border-radius: 100%;
    border: 2px solid #222
}

.sub-section:hover,
.head-section:hover {
    transform: scale(1, 1.33);
    transition: transform .2s ease;
}

.head-section {
    padding: 1em;
    background: cornsilk;
    border-bottom: 2px solid #222;
    border-top: 2px solid #222
}