:root {
    --background-color: #f8f8f8;
    --main-color: #242424;
    --sub-color: #4d4d4d;

    --button-color: #181818;
    --button-hover-color: #3f3f3f;
    --button-text-color: #ffffff;

    --error-color: rgba(228, 38, 38, 0.8);
    --error-color-darken: rgba(187, 0, 0, 0.8);
    --info-color: #3666c0;
    --warning-color: #ca7544;
    --success-color: #55b655;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Quicksand", sans-serif;
    font-weight: normal;
    color: var(--main-color);
}

body {
    background-color: var(--background-color);
}

textarea {
    resize: vertical;
}

button {
    margin: 0 10px;
    padding: 20px 40px;
    border-width: 0px;
    border-radius: 40px;
    color: var(--button-text-color);
    background-color: var(--button-color);
}

button:hover {
    cursor: pointer;
    background-color: var(--button-hover-color);
}

a.button {
    text-decoration: none;
    padding: 10px 20px;
    border-width: 0px;
    border-radius: 40px;
    color: var(--button-text-color);
    background-color: var(--button-color);
    width: fit-content;
}

a.button:hover {
    cursor: pointer;
    background-color: var(--button-hover-color);
}

hr.solid {
    border-bottom: 1px solid var(--main-color);
    border-top: none;
}

div.error {
    margin: 10px 0;
    padding: 20px 40px;
    border: 1px solid;
    border-radius: 10px;
    align-items: start;
    font-size: 20px;
    font-weight: normal;
    color: var(--button-text-color);
    background-color: var(--error-color);
}

/** Background for error. */
div.error:hover {
    cursor: pointer;
    background-color: var(--error-color-darken);
}

/** For text error. */
span.error {
    font-size: 16px;
    color: var(--error-color);
}

/** Simple spacer for list. */
.spacer {
    padding-bottom: 20px;
}

/** Class that hide anything, used to keep data available without showing it (Only for design purpose). */
.hide {
    display: none;
}

@media (min-width: 1300px) {
    main {
        margin: 0 auto;
        width: 1200px;
    }

    input,
    textarea {
        font-size: 20px;
        padding: 10px 20px;
        border-width: 1px;
        border-radius: 10px;
        border-color: var(--sub-color);
    }
}

@media (min-width: 700px) and (max-width: 1300px) {
    main {
        margin: 0 20px;
    }

    input,
    textarea {
        font-size: 19px;
        padding: 10px 20px;
        border-width: 1px;
        border-radius: 10px;
        border-color: var(--sub-color);
    }
}

@media (max-width: 700px) {
    main {
        margin: 0;
    }

    input,
    textarea {
        font-size: 16px;
        padding: 10px 20px;
        border-width: 1px;
        border-radius: 10px;
        border-color: var(--sub-color);
    }
}