.container {
    max-width: 500px;
    text-align: center;
   
    margin: auto;
    flex: auto;
}

ul {
    list-style: none;
}

li::before {
    content: "\261E";
    color: rgb(0, 0, 0);

    font-weight: bold;
    padding-right: 10px;
}

canvas {

    width: auto;
    height: max-content;
}

button {
    font-family: monospace;
    cursor: pointer;
}

section {
    font-family: monospace;
    padding-top: 10px;
}

#spinner:not([hidden]) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#spinner::after {
    content: "";
    width: 80px;
    height: 80px;
    border: 2px solid #f3f3f3;
    border-top: 3px solid #1A936F;
    border-radius: 100%;
    will-change: transform;
    animation: spin 1s infinite linear
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.instruct {
    justify-content: center;
    background-color: rgb(255, 251, 166);
    width: 500px;
    border: 2px black dotted;
    margin-left: auto;
    margin-right: auto; 
}

a {
    cursor: pointer;
}

a:hover {
    background-color: purple;
    color: white;
}