:root{

    --d100: 8, 8, 8;
    --d200: 18, 18, 18;

    --l100: 240, 240, 240;
    --l200: 160, 160, 160;

    --acc: 0, 255, 140;
    
    --font-size: clamp(8px, 1.5vw, 16px);

    --square-length: min(
        max(800px, 100vh), 
        max(453px, 100vw)
    );

    --padding-value: 25px;
}

*{
    padding: 0; margin: 0;
    box-sizing: border-box;
}

html, body{
    overflow: hidden;
}
body{
    /* min-height: var(--square-length); */
    height: 100dvh;

    display: flex;
    justify-content: center; align-items: center;

    perspective: calc(var(--square-length));
    
    font-size: var(--font-size);
    font-family: monospace;

    background-color: rgb(var(--d100));
    color: rgb(var(--l100));
}

/*  */

@keyframes slide {
    from{
        transform: translateX(var(--start));
    }to{
        transform: translateX(var(--end));
    }
}

@keyframes loading {
    0%{
        content: '';
    }25%{
        content: ' .';
    }50%{
        content: ' ..';
    }75%{
        content: ' ...';
    }100%{
        content: '';
    }
}

/*  */

li{
    list-style: none;
}

a{
    text-decoration: none;
    color: rgb(var(--l100));
}

*:focus{
    outline: 2px solid rgb(var(--acc));
    z-index: 999;
}

/*  */

.light{
    color: rgb(var(--l200));
}
.important{
    color: rgb(var(--acc));
}
.inprogress{
    color: rgb(255, 140, 0);
}

/* home screen */

#intro{
    width: 100%; height: 100dvh;
    position: absolute;
    top: 0; left: 0;

    display: flex;
    align-items: end;

    z-index: 999;
    pointer-events: none;
    cursor: grab;
}

#intro .bg{
    width: 100%; height: 100%;
    position: absolute;

    display: flex; flex-direction: column;
    justify-content: center; align-items: center;

    opacity: 1;
    background-color: rgb(var(--d100));
    text-align: center;

    transition: opacity .5s ease;
    pointer-events: auto;
}
#intro .bg>h1{
    flex: 3;
    display: flex;
    align-items: end;
    /* text-align: left; */
    /* font-size: calc(var(--font-size) * 3); */
}
#intro .bg>div{
    flex: 2;
    display: flex; flex-direction: column;
    justify-content: center;
    letter-spacing: 2px;
    gap: calc(var(--padding-value) / 2);
}
#intro .bg>div p{
    padding-inline: calc(var(--padding-value) / 2);
    text-align: left;

}
#intro .bg>div div{
    display: flex;
    align-items: center;
    gap: calc(var(--padding-value) / 2);
    padding-inline: calc(var(--padding-value) / 2);

}
#intro .bg>div div input{
    all: unset;
    width: var(--padding-value);
    aspect-ratio: 1;
    cursor: pointer;
    border: 1px solid rgb(var(--l100));
}
#intro .bg>div div input:checked{
    background-color: rgb(var(--l200));
}

#intro .bg>footer{
    flex: 1;
    width: 90%;
    padding-block: 40px;

    display: flex;
    justify-content: space-between;
    align-items: end;

    color: rgb(var(--l200));
    font-size: min(1em, 3vw);
}
#intro .bg>footer a{
    color: rgb(var(--l200));
    transition: color .3s ease;
}
#intro .bg>footer a:hover{
    color: rgb(var(--acc));
}

#intro .bg.hide{
    opacity: 0;
    pointer-events: none;
}
/* #intro .bg:has(input[name=choice]:checked){
    opacity: 0;
    pointer-events: none;
} */