@font-face {
    font-family: 'Open Sans';
    src: url(../fonts/OpenSans-VariableFont_wdth,wght.woff2) format('woff2');
}

*, *::before, *::after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    font-family: sans-serif;
}

:root {
    font-family: 'Open Sans', sans-serif;
    scroll-behavior: smooth;
}
body {
    font-size: 1.6rem;
    margin: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

.container {
    margin-inline: auto;
    padding: 0 1rem;
    max-width: 80rem;
}

input:not([type=submit]),
textarea {
    display: block;
    width: 100%;
    max-width: 40rem;
    padding: .75em;
    border: 1px solid #666;
    border-radius: .3rem;
}

label,
input[type=submit] {
    margin-top: 3rem;
}
input[type=submit] {
    padding: .5em 2em;
}
label {
    display: block;
    margin-bottom: .2em;
    font-weight: bold;
}

.message {
    font-size: 1.4rem;
}
.message.error {
    color: #b90e0a;
}