* {
    font-family: 'Courier New', Courier, monospace;
}
html, body {
    margin: 0;
    height: 100%;
}

main, .page {
    min-height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 5vw;
    background-color: lavender;
}

ul, input, p, label {
    display: block;
    font-size: 2vw;
}
input[type="text"], input[type="button"] {
    --box-shadow: .1em .1em .2em .2em hsl(271,24%,74.7%);
    height: 6vw;
    min-width: 50vw;
    border: none;
    font-size: 5vw;
    background-color: thistle;
    box-shadow: var(--box-shadow);
    border-radius: .1em;
    transition: box-shadow .2s;
}

#activityPage {
    --font-size: 2vw;
}
#activityPage input, #activityPage ul {
    font-size: var(--font-size);
}
#activityPage input {
    height: calc(var(--font-size) + 1vw);
}
input:hover {
    box-shadow: var(--box-shadow), 0 0 .1em .1em hsl(300,21.5%,72%) inset;
}
li label, li input {
    display: inline;
}
#error {
    color: red;
}