:root {
    --background-color: 0, 0, 0;
    --foreground-color: 255, 255, 255;
    --spot-color: 214, 174, 125;
    --red-color: 221, 51, 51;
    --yellow-color: 221, 153, 51;
    --green-color: 129, 215, 66;
}
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    max-width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-display: swap;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    transition: all 0.2s ease;
}
body {
    background-color: rgb(var(--background-color));
    color: rgb(var(--foreground-color));
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    padding: 1.6rem;
}
main {
    place-self: center;
    min-width: 16rem;
    max-width: 32rem;
}
footer {
    display: grid;
    grid-gap: 1.2rem;
}
footer nav {
    justify-self: center;
}
footer ul {
    list-style: none;
    display: flex;
}
footer a {
    padding: .8rem 1.2rem;
    color: rgba(var(--foreground-color), .6);
    font-weight: normal;
    font-size: .88rem;
}
h1 {
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
}
p + p {
    margin-top: .4rem;
}
p.small {
    font-size: 88%;
    opacity: .6;
}
a {
    text-decoration: none;
    color: rgb(var(--spot-color));
    font-size: inherit;
}
a:hover,
input[type=submit]:hover {
    opacity: .88;
    cursor: pointer;
}

/*Forms*/
form {
    display: grid;
    grid-gap: 1.6rem;
}
input, 
select, 
textarea {
    background-color: rgba(var(--foreground-color), 0.16);
    color: inherit;
    border: 0;
    border-radius: 0;
    padding: .4rem .6rem;
    width: 100%;
}
button,
input[type=submit] {
    background-color: rgb(var(--spot-color));
    color: rgb(var(--foreground-color));
    border: 0;
    border-radius: 1.2rem;
    height: 2.4rem;
    width: 100%;
    font-size: inherit;
    display: block;
    text-align: center;
    padding: 0 1.2rem;
}

label {
    display: block;
    margin-bottom: .4rem;
    font-size: .8rem;
}