body {
    max-width: 1080px;
    height: calc(100vh - 8rem);
    margin: auto;
    display: flex;
    flex-direction: column;
    padding: 4rem 1rem;
    font-family: 'Roboto Mono', monospace;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.06'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h1 {
    margin: 0
}

body > div {
    padding: 10px;
}

dialog {
    max-width: 640px;
}

dialog button.special {
    margin-top: 2rem;
    background-color: #ffc4ba;
}

.guid {
    margin: 4rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.guid > div {
    width: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guid input {
    text-align: center;
    font-size: 30px;
    width: 100%;
    border: none;
    background-color: transparent;
    font-family: inherit;
    color: inherit;
}

.guid button {
    border-radius: 5px;
    border: none;
    background-color: transparent;
    width: 100%;
    height: 24px;
    padding: 0;
}

button.special {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Roboto Mono', monospace;
}

button.special:hover {
    box-shadow: 6px 6px 0 #000;
}

input.special {
    padding: 0.75rem;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
    font-family: 'Roboto Mono', monospace;
    display: inline-block;
    font-size: 1rem;
    width: 5rem;
    text-align: center;
}

.alert {
    padding: 1rem;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
    margin-bottom: 1rem;
}

.alert-danger {
    background-color: #f8d7da;
    color: #000;
}

div.submit {
    text-align: center;
}

div#result {
    background: #fff3cd;
    opacity: 0;
    margin-top: 4rem;
}

h1, h2 {
    text-align: center;
}

footer {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

footer a {
    color: black;
}

#leaderboard p {
    margin: 0;
    text-align: center;
}

button.link-btn {
    text-decoration: underline;
    cursor: pointer;
    font-family: 'Roboto Mono', monospace;
    background: transparent;
    border: none;
    font-size: 1rem;
}