body {
    --font-heading: 'Comfortaa', sans-serif;
    --font-body: 'Assistant', sans-serif;

    --color-pink: hsl(346, 100%, 71%);
    --color-teal: hsl(158, 75%, 79%);
    --color-peach: hsl(39, 86%, 74%);
    --color-blue: hsl(200, 87%, 82%);
    --color-primary: var(--color-pink);
    --color-error: hsl(0, 95%, 68%);
    --color-background: hsl(0, 0%, 7%);

    --color-text-primary: hsla(0, 0%, 100%, .9);
    --color-text-secondary: hsla(0, 0%, 100%, .6);
    --color-text-disabled-hint: hsla(0, 0%, 100%, .3);

    --color-text-primary-light-background: hsla(0, 0%, 0%, .87);
    --color-text-secondary-light-background: hsla(0, 0%, 0%, .54);
    --color-text-disabled-hint-light-background: hsla(0, 0%, 0%, .38);

    --color-divider: hsla(0, 0%, 100%, .12);
    --color-surface04dp: linear-gradient(0deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09)), #121212;

    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

html, body {
    width: 100%;
    height: 100%;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-weight: 400;
    line-height: 1.2;
}

h1 {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-background);
}

a {
    color: inherit;
    text-decoration: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
textarea {
    border-radius: 8px;
    padding: 10px;
    background: var(--color-surface04dp);
    font-size: 18px;
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--color-text-primary);
    resize: none;
    border: 2px solid transparent;
    transition: all .1s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--color-text-disabled-hint);
}

input[type="text"].validation-failed,
input[type="email"].validation-failed,
input[type="number"].validation-failed,
textarea.validation-failed {
    border-color: var(--color-error) !important;
}

input[type="number"] {
    text-align: end;
}

button {
    cursor: pointer;
}

code {
    font-family: menlo, inconsolata, monospace;
    font-size: calc(1em - 2px);
    color: #555;
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 2px;
}

@media (min-width: 400px) {
    body {
        font-size: 16px;
    }
}

.font-heading-regular, input[type="text"].font-heading-regular {
    font-family: var(--font-heading);
    font-weight: 400;
}

.font-heading-bold, input[type="text"].font-heading-bold {
    font-family: var(--font-heading);
    font-weight: 700;
}

.font-body-regular, input[type="text"].font-body-regular {
    font-family: var(--font-body);
    font-weight: 300;
}

.font-body-bold, input[type="text"].font-body-bold {
    font-family: var(--font-body);
    font-weight: 500;
}