:root {
    font-size: 100%;
    --text-color: white;
    --bg-color: #2e3035;
    --dark-bg-color: #1a1b1d;
    --post-bg-color: #44474e;
    --accent-color: #ed9712;
    --accent-color-gradient: #ffda66;
    --gutters: 30%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: var(--dark-bg-color);
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: var(--accent-color-gradient);
}

a:visited {
    color: var(--accent-color);
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow-x: hidden;
    min-height: 100vh;
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    overflow-x: auto;
    width: 100%;
    margin: 0 auto;
    --center-width: min(max(80ch, 80ch), 100%);
}

#canvas {
    height: var(--canvas-height);
    width: var(--canvas-width);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
    place-items: center center;
    &.hidden {
        height: 0;
        visibility: hidden;
    }
}

#piece {
    height: var(--canvas-height);
    width: var(--canvas-width);
    grid-area: 1 / 1 / 4 / 4;
    opacity: 0;
    transition: opacity 0.2s;
    background-color:white;
    z-index: 2;
    place-self: start center;
    &.revealed {
        opacity: 1;
    }
}

#ui {
    width: var(--canvas-width);
    grid-area: 1 / 1 / 1 / 4;
    place-self: start center;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.2s ease;
    transition: transform 0.2s ease;
    z-index: 3;
    &.revealed {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }
}

#buffering {
    z-index: 1;
    position: fixed;
    top: 30vh;
    right: calc(50vw - 20vh);
}

@keyframes bufferloop {
    0% {fill-opacity: 0.3;}
    40% {fill-opacity: 1;}
    80% {fill-opacity: 0.3;}
    100% {fill-opacity: 0.3;}
}

#buffering svg {
    width: 40vh;
    height: 40vh;
    & .vect {
        fill: #8effff;
        fill-opacity: 0.3;
        animation: bufferloop 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease;
    }
    & #chip1 {
        animation-delay: 0;
    }
    & #chip2 {
        animation-delay: 0.66s;
    }
    & #chip3 {
        animation-delay: 1.33s;
    }
}

#hint1, #hint2 {
    z-index: 3;
    &.revealed {
        opacity: 0;
        cursor: pointer;
    }
}

#hint1 {
    grid-area: 1 / 1 / 1 / 1;
    place-self: start start;
}

#hint2 {
    grid-area: 3 / 3 / 3 / 3;
    place-self: end end;
}

@media screen and (min-aspect-ratio: 12/10) { /* landscape */
    :root {
        --canvas-width: 100%;
        --canvas-height: calc(900vw / 16);
    }

    #main {
        margin: auto 0;
    }
    
    #hint1, #hint2 {
        /* width: ~16vw; */
        width: calc(100vw * 299 / 1920);
    }
}

@media screen and (max-aspect-ratio: 12/10) { /* portrait */
    :root {
        --canvas-height: 100vh;
        --canvas-width: calc(var(--canvas-height) * 16 / 9);
    }
    
    #hint1, #hint2 {
        /* height: ~7vh; */
        height: calc(var(--canvas-height) * 76 / 1080)
    }

}

@media screen and (max-aspect-ratio: 2/3) {
    :root {
        --canvas-height: calc(1.5 * 100vw);
    }

    #main {
        margin: auto;
    }
}


.postline {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    overflow-x: auto;
    width: 100%;
    margin: 0 auto;
}