body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(circle at 0 0, hsl(240, 100%, 70%) 0, lightblue 100%);

    font-family: sans-serif;

    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 460px) {
    body {
        font-size: 10pt;
    }
}


h1 {
    margin-top: 1rem;
    text-align: center;
    font-variant: small-caps;
    color: gold;
}

h2 {
    margin-top: 2rem;
    font-variant: small-caps;
}

.content {
    position: relative;
    max-width: 500px;
    margin: 1rem auto;
    padding: 1em;

    border: 3px solid gold;
    border-radius: 20px;
    background: rgba(0, 100, 255, .2);

    box-shadow: rgba(100, 100, 111, 0.75) 0 7px 29px 0;
}

.solve {
    margin-bottom: 3em;
}

.user-table {
    width: 100%;
    border-collapse: collapse;

    word-break: break-word;
}

.user-table td, .user-table th {
    padding: .75rem;
}

.user-table tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0, 255, 255, .3);
}


footer {
    margin-top: auto;
    height: 2rem;

    text-align: center;
    padding: 1em;
    background: #0001;
    color: #555;
}

footer a {
    color: #555;
}

html:not(.show-more) .more, html:not(.show-more) .less-btn {
    display: none;
}

html.show-more .more-btn {
    display: none;
}

.more-btn, .less-btn {
    margin: 1rem;
    padding: .5rem 1rem;
    background: #0003;
    border: none;
}