html, body { margin: 0; padding: 0; overflow: hidden; background: rgb(0, 0, 0);
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -.05ch;
}
canvas { max-width: 100%; max-height: 100%; min-width: 100%; min-height: 100%; object-fit: contain; }
#progress { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 80%; height: 4em; background: black; border: .5em solid white; padding: .5em; }
#blocker {
    position: absolute;
    top: 0;

    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    color: white;
    user-select: none;
    -webkit-user-select: none;
}
#ui {
    padding: 1em;
    position: absolute;
    left: 0;
    bottom: 0;
    background: transparent;
    color: rgb(197, 0, 0);
    transform-origin: bottom left;
    transform: scale(4) scaleY(0.6);
    user-select: none;
    -webkit-user-select: none;
}

.button::before,
.button::after {
    content:attr(title);
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    padding: .2em
}

.button::before {
    color: rgb(200, 0, 0);
    text-shadow: .5px .5px .5px rgba(0, 0, 0, 1);
}

.selected::after, .button:hover::after {
    animation: blink .5s infinite;
    animation-timing-function: ease-in-out;
    color: rgb(255,0,0);
    text-shadow: 0 0 1px rgba(255, 0, 0, 1);
}

#ui:hover .selected:not(:hover)::after {
    animation: none;
    text-shadow: none;
}
.button {
    position: relative;
    font-family: "Antonio", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    padding: .2em;
    font-weight: bold;
    color: transparent;
    background: transparent;
    text-align: center;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* .button:hover {
    color: rgb(255, 0, 0);
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4), 4px 5px  rgba(0, 0, 0, 1);
} */

#move, #look {
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

#look {
    /* Make 10x larger in pixel size because webkit rounds touch events to the nearest CSS pixel.
       I'm not sure if this actually works or if WebKit rounds anyway but at least we tried. */
    transform: scale(0.1);
    transform-origin: top left;
    width: 500%;
    height: 1000%;
    left: 50%;
}

#done {
    width: 100%;
    height: 100%;
    transform: scaleX(0.05);
    transform-origin: center left;
    transition: transform 5s;
    background: white; 
}
#rotator {
    transform: none;
    transform-origin: bottom left;
    position:absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    width: 100dvw;
    height: 100dvh;
    overflow:hidden;
}

@media (pointer: coarse) and (orientation: portrait) {
    #rotator {
        transform: rotate(90deg);
        transform-origin: bottom left;
        top: -100vw;
        left: 0;
        width: 100vh;
        height: 100vw;
        width: 100dvh;
        height: 100dvw;
    }
}
#blocker * { display: none; }
@media (pointer: coarse) {
    #blocker * { display: block; }
}