:root {
    --border-color: #777777;
    --danger-color: #cc5500;
}

.container {
    padding: 10px 10px 20px 10px;
    margin: 0 auto;
    max-width: 800px;
}

hr {
    margin: 20px 0;
}

article {
    border: solid var(--border-color) 1px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
}

p + p {
    margin-top: 1em;
}

figure {
    margin: 10px 0;
    text-align: center;

    img {
        width: 100%;
        max-width: 600px;
        aspect-ratio: 16/9;
    }

    figcaption {
        color: #333333;
        font-style: italic;
    }
}

blockquote {
    background-color: #ededed;
    padding: 1em 1em;
    margin: 1em 1em;
}

code {
    display: block;
    padding: 1em;
    margin: 0.5em 0;
    color: #eeeeee;
    background-color: #222222;
    word-break: break-all;
    font-family: sans-serif;
}

.nenpyo {
    width: 100%;
}

form {
    margin-top: 10px;

    & > div + div {
        margin-top: 20px;
    }

    & > div {
        display: flex;
        flex-direction: column;

        label {
            display: inline-block;
        }

        input[type=text],
        input[type=email],
        input[type=password],
        input[type=number] {
            border: solid var(--border-color) 1px;
            border-radius: 5px;
        }

        button {
            border: solid var(--border-color) 1px;
            border-radius: 5px;
            padding: 0 0.5em;
            max-width: 10em;
        }

        button:disabled {
            background-color: #eeeeee;
        }
    }
    
    li {
        color: var(--danger-color);
    }
}

li {
    list-style-position: inside;
}

.helptext {
    color: var(--danger-color);
}

footer {
    nav {
        ul {
            display: flex;
            list-style: none;

            li {
                padding-right: 0.5em;
            }

            li + li {
                border-left: solid 2px #777777;
                padding-left: 0.5em;
            }
        }
    }
}

.turnstile-wrapper {
    height: 65px;
}