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

body {
    width: 100%;
    height: 100svh;
    background-color: #1b1b1b;
    display: flex;
    justify-content: center;
    align-items: center;
}

#noise {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

#main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: min(.73em, max(1.1vh, .78vw));
    font-family: monospace;
}

.clock {
    width: 30em;
    height: 30em;
}

#frame {
    width: 100%;
    height: 100%;
    outline: 1em solid black;
    border-radius: 50%;
    background-color: #444;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tick-ray {
    height: 100%;
    position: absolute;
}

.tick-ray div {
    height: .4em;
    width: .12em;
    background-color: black;
}

.tick-ray.thick div {
    height: .8em;
    width: .4em;
    background-color: black;
}

.hand {
    width: .8em;
    position: absolute;
    transition: opacity 1s;
}

.hand.invisible {
    opacity: 0;
}

.hand.animatable {
    transition: rotate .2s;
}

#hour-hand,
#ghost-hour-hand {
    height: 60%;

}

#minute-hand,
#ghost-minute-hand {
    height: 80%;

}

#hour-hand div {
    background-color: black;
    height: 50%;
}

#minute-hand div {
    background-color: black;
    height: 50%;
}

#ghost-hour-hand div {
    background-color: #00000022;
    height: 50%;
}

#ghost-minute-hand div {
    background-color: #00000022;
    height: 50%;
}

.circle {
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    background-color: black;
    border-radius: 50%;
}

#input {
    font-size: 3em;
    margin-top: 16em;
    background-color: #333;
    border-radius: .2em;
    border: none;
    outline: none;
    color: #888;
    text-align: center;
    padding-top: .3em;
    padding-bottom: .3em;
    font-family: inherit;
    text-transform: uppercase;
    position: absolute;
    box-shadow: 0 .2em .2em #00000044;
    transition: background-color .2s, opacity 3s, filter 3s;
}

#input:disabled {
    background-color: #222;
}

#clue {
    font-size: 2em;
    text-align: center;
    color: #666;
    margin-bottom: 24.5em;
    position: absolute;
    white-space: pre-wrap;
    line-height: 1.5em;
    text-shadow: 0 0 .2em #88888855;
    padding: 0 1em;
}

.innerClue {
    animation: fadeIn 5s;
}

.innerHint {
    animation: fadeIn 2s;
}

.innerClue>span {
    white-space: nowrap;
}

#clue .wave-letter {
    display: inline-flex;
    animation: wave 5s infinite linear;
    --amplitude: 2px;
}

#hint {
    color: #aaa;
    font-size: 1.3em;
    margin-top: 45em;
    position: absolute;
    text-shadow: 0 0 .4em #aaaaaa88;
    text-align: center;
    padding: 0 1em;
}

.innerHint.error {
    color: #ff4444;
    text-shadow: 0 0 .4em #ff444488;
}

.disappearing {
    opacity: 0;
    filter: blur(5px);
    pointer-events: none;
    transition: opacity 3s, filter 3s;
}

.disappeared {
    opacity: 0;
    pointer-events: none;
    transition: none !important;
}

#progress {
    position: absolute;
    bottom: 1em;
    display: flex;
    gap: 1em;
}

#progress .dot {
    height: 1em;
    width: 1em;
    border: 2px solid #555;
    border-radius: 50%;
    transition: background-color .3s;
}

#progress .dot.full {
    background-color: #555;
}

#hof-button {
    border: 2.5px solid #555;
    border-radius: 50%;
    position: absolute;
    bottom: 1em;
    left: 1em;
    height: 3.4em;
    width: 3.4em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-color: #222;
    transition: background-color .2s, border .2s;
}

#hof-button:hover {
    background-color: #444;
    border: 2.5px solid #777;
}

#hof-button svg {
    color: #888;
    transition: color .2s;
}

#hof-button:hover svg {
    color: #aaa;
}

#hof-bg {
    position: absolute;
    width: 100vw;
    height: 100svh;
    background-color: #00000088;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity .2s;
}

.inactive {
    opacity: 0;
    pointer-events: none;
}

#hof {
    background-color: #1b1b1b;
    outline: .6em solid #111;
    border-radius: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#hof h1 {
    color: #aaa;
    font-size: 4em;
    margin-top: .8em;
}

#hof-list {
    display: flex;
    flex-direction: column;
    color: #888;
    font-size: 2.5em;
    gap: .4em;
    margin: 1.5em;
}

#hof-list .item {
    display: flex;
}

#hof-list .item .num {
    width: 2em;
}

#hof-list .item .name {
    width: 9em;
}

#hof-list .item .blank {
    width: 14.5em;
    display: flex;
    justify-content: center;
    color: #444;
}

#hof-list>:nth-child(1) {
    color: gold
}

#hof-list>:nth-child(2) {
    color: silver
}

#hof-list>:nth-child(3) {
    color: #cd7f32
}

#end {
    display: flex;
    position: absolute;
    flex-direction: column;
    align-items: center;
    color: #aaa;
    font-size: 2em;
    transition: opacity 3s;
}

#end p {
    text-align: center;
}

#end.active {
    opacity: 1;
    transition: none;
}

#end h1 {
    margin-bottom: .5em;
}

#time-taken {
    margin-top: .5em;
}

#hof-set {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5em;
    padding-top: 1.5em;
    border-top: 2px solid #444;
    gap: .5em;
}

#hof-set.visible {
    display: flex;
}

#name {
    font-size: 1.3em;
    margin-top: .5em;
    background-color: #333;
    border-radius: .2em;
    border: none;
    outline: none;
    color: #888;
    text-align: center;
    padding-top: .3em;
    padding-bottom: .3em;
    font-family: inherit;
    box-shadow: 0 .2em .2em #00000044;
}

#name::placeholder {
    color: #666;
}

#hof-submit-status {
    margin-top: 1em;
    /* move the whole thing down */
    margin-bottom: -2em;
    opacity: 0;
}

#hof-submit-status.visible {
    opacity: 1;
    transition: opacity 1s;
}















@keyframes fadeIn {
    0% {
        opacity: 0;
        filter: blur(5px);
        translate: 0 .2em;
    }
}

/* -((cos(0.4*2 π))/(2))+0.5 */
@keyframes wave {
    0%, 100% {
        transform: translateY(0px);
    }

    10% {
        transform: translateY(calc(var(--amplitude) * 0.095));
    }

    20% {
        transform: translateY(calc(var(--amplitude) * 0.345));
    }

    30% {
        transform: translateY(calc(var(--amplitude) * 0.655));
    }

    40% {
        transform: translateY(calc(var(--amplitude) * 0.904));
    }

    50% {
        transform: translateY(var(--amplitude));
    }

    60% {
        transform: translateY(calc(var(--amplitude) * 0.904));
    }

    70% {
        transform: translateY(calc(var(--amplitude) * 0.655));
    }

    80% {
        transform: translateY(calc(var(--amplitude) * 0.345));
    }

    90% {
        transform: translateY(calc(var(--amplitude) * 0.095));
    }
}

@keyframes wrong {
    10% {
        translate: -.1em 0;
    }

    20% {
        translate: .1em 0;
        background-color: #663333;
    }

    30% {
        translate: 0 0;
    }
}

@keyframes correct {
    20% {
        background-color: #338833;
    }
}

@media (max-width: 500px) {
    #hof-button {
        height: 5em;
        width: 5em;
    }

    #hof {
        font-size: .8em;
    }

    #clue {
        margin-bottom: 30em;
    }
}