* {
    box-sizing: border-box;
}
body {
    margin: 0;
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    background: #fffae9;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 1.25rem;
}
#game {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}
.title {
    margin: 4rem auto 3rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 1.5rem;
}
.title h1 {
    font-weight: 100;
}
#animations {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 1rem;
    max-width: 550px;
    width: 550px;
}
#password-input {
    flex-grow: 1;
}

#password-input label {
    display: block;
    padding: 0.5rem 0;
}
#password {
    width: 100%;
    padding: 1rem;
    font-family: monospace;
    font-size: 2em;
    border: 1px solid #9d9d9d;
    border-radius: 0.75rem;
    outline: none;
    transition: border-color 0.15s ease-in-out, border-radius 0.1s ease-in-out;
}
#password:focus {
    border-color: black;
}
#checking {
    --tmp1: var(--is-checking) flex;
    --tmp2: var(--tmp1, var(--done-checking) none);
    display: var(--tmp2, none);
    flex-direction: row;
    justify-content: center;
    height: 7rem;
}
.lds-dual-ring {
    display: inline-block;
    height: 100%;
    width: auto;
    aspect-ratio: 1/1;
    padding: 1rem;
}
.lds-dual-ring:after {
    content: " ";
    display: block;
    height: 80%;
    width: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    --color: #9d9d9d;
    border: 6px solid var(--color);
    border-color: var(--color) transparent var(--color) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#rules {
    --show-rules: var(--done-checking);
    --viz1: var(--show-rules) flex;
    display: var(--viz1, none);
    flex-direction: column;
    gap: 2rem;
}
.rule {
    transition: background-color .7s ease-in-out;
    color: black;
    border: 1px solid black;
    border-radius: 0.75rem;
    opacity: 0;
    animation: fadeIn 0.5s ease-in-out forwards;
    display: var(--show-y, none) var(--show-n, revert);
    background-color: var(--good-y, #ffecec) var(--good-n, #e3ffe3);
    border-color: var(--good-y, red) var(--good-n, #267b30);
    box-shadow: var(--good-y, 2px 2px 5px 2px rgba(255, 0, 0, .12)) var(--good-n, 3px 3px 5px 2px rgba(60,155,71,.2));
    --delay: 0;
    animation-delay: calc(var(--delay) * 0.05s);
}
.rule-top {
    transition: background-color .7s ease-in-out;
    padding: 0.75rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    background-color: var(--good-y, #ffc7c7) var(--good-n, #aef3ae);
}
.rule-desc {
    padding: 0.75rem;
}
.rule-desc::before {
    content: 'Your password must ';
}
@keyframes fadeIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}
.rule:nth-child(1) {
    --delay: 0;
    --good-y: var(--rule-1-good-y); --good-n: var(--rule-1-good-n);
    --show-y: var(--rule-1-show-y); --show-n: var(--rule-1-show-n);
}
.rule:nth-child(2) {
    --delay: 1;
    --good-y: var(--rule-2-good-y); --good-n: var(--rule-2-good-n);
    --show-y: var(--rule-2-show-y); --show-n: var(--rule-2-show-n);
}
.rule:nth-child(3) {
    --delay: 2;
    --good-y: var(--rule-3-good-y); --good-n: var(--rule-3-good-n);
    --show-y: var(--rule-3-show-y); --show-n: var(--rule-3-show-n);
}
.rule:nth-child(4) {
    --delay: 3;
    --good-y: var(--rule-4-good-y); --good-n: var(--rule-4-good-n);
    --show-y: var(--rule-4-show-y); --show-n: var(--rule-4-show-n);
}
.rule:nth-child(5) {
    --delay: 4;
    --good-y: var(--rule-5-good-y); --good-n: var(--rule-5-good-n);
    --show-y: var(--rule-5-show-y); --show-n: var(--rule-5-show-n);
}
.rule:nth-child(6) {
    --delay: 6;
    --good-y: var(--rule-6-good-y); --good-n: var(--rule-6-good-n);
    --show-y: var(--rule-6-show-y); --show-n: var(--rule-6-show-n);
}
.rule:nth-child(7) {
    --delay: 7;
    --good-y: var(--rule-7-good-y); --good-n: var(--rule-7-good-n);
    --show-y: var(--rule-7-show-y); --show-n: var(--rule-7-show-n);
}
.rule:nth-child(8) {
    --delay: 8;
    --good-y: var(--rule-8-good-y); --good-n: var(--rule-8-good-n);
    --show-y: var(--rule-8-show-y); --show-n: var(--rule-8-show-n);
}
.rule:nth-child(9) {
    --delay: 9;
    --good-y: var(--rule-9-good-y); --good-n: var(--rule-9-good-n);
    --show-y: var(--rule-9-show-y); --show-n: var(--rule-9-show-n);
}
.rule:nth-child(10) {
    --delay: 10;
    --good-y: var(--rule-10-good-y); --good-n: var(--rule-10-good-n);
    --show-y: var(--rule-10-show-y); --show-n: var(--rule-10-show-n);
}
.rule:nth-child(11) {
    --delay: 11;
    --good-y: var(--rule-11-good-y); --good-n: var(--rule-11-good-n);
    --show-y: var(--rule-11-show-y); --show-n: var(--rule-11-show-n);
}