*,
*::before,
*::after {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

html,
body {
    height: 100%;
}

html {
    font-size: 62.5%;
    min-width: 40rem;
}

body {
    font-size: 1.4rem;
}

section {
    border: 1px solid #D6DCE5;
    background-color: white;
    min-width: 35rem;
    padding: 1rem;

    header {
        border-bottom: 1px solid #D6DCE5;
    }
}

h1 {
    outline: none;

}

h2 {
    font-size: 1.6rem;
    margin: 1rem;
}

ul {
    list-style: none;
}

p {
    margin-top: 1rem;
    margin-bottom: 1rem;

    &.center {
        text-align: center;
    }
}

a {
    text-decoration: none;
    color: #E0A800;

    &:hover {
        text-decoration: underline;
    }
}

.grid {
    display: grid;
    gap: 1rem;
    align-items: start;

    &.fit {
        grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
    }

    &.fill {
        grid-template-columns: repeat(auto-fill, minmax(35rem, 1fr));
    }
}

.pad1 {
    padding: 1rem;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;

    &.center {
        justify-content: center;
    }
}

.s16 {
    width: 1.6rem;
    height: 1.6rem;
}

span.beta::before {
    content: "Beta";
    font-size: 1rem;
    color: #E0A800;
}

form {
    padding: 0.5rem;

    fieldset {
        > div {
            padding-top: 2rem;
            position: relative;

            input,
            textarea {
                padding: 0.5rem;
                font-size: 1.4rem;
                outline: none;
                border: 1px solid #D6DCE5;
                resize: none;
                width: 100%;
            }

            input ~ label,
            textarea ~ label {
                position: absolute;
                top: 2.55rem;
                left: 0.6rem;
                transition: all 0.3s cubic-bezier(0,0,0.2,1);
                cursor: text;
                user-select: none;
                color: #6B778C;
            }

            input:focus ~ label,
            textarea:focus ~ label,
            input:not(:placeholder-shown) ~ label,
            textarea:not(:placeholder-shown) ~ label {
                top: 0.5rem;
                left: 0.2rem;
                font-size: 1.1rem;
                color: #E0A800;
            }
        }
    }

    > div {
        margin-top: 2rem;
        text-align: right;

        button {
            background-color: #FFC107;
            padding: 0.5rem;
            font-weight: bold;
            color: #0E1A2B;
            border: 1px solid #E0A800;
            cursor: pointer;
        }
    }
}

fieldset {
    border: none;
}

.validation-errors {
    color: #C23434;
}

.invalid {
    border: 1px solid #C23434;
}

.success {
    color: #22A06B;
    font-weight: bold;
}