/*  --------------
    COLORS SETTING
    -------------- */
:root {
    --blue: #6f8ec4;
    --blueHover: #79a0e2;
    --green: #616614;
    --greenHover: #81881a;
    --red: #b10f27;
    --redHover: #cf1430;
    --orange: #d58049;
    --orangeHover: #d37435;
    --white: #f4f5f9;
    --yellow: #fbd22c;
    --yellowHover: #e7c332;
    --cookieWarning: rgba(25, 42, 86,0.85);

/*  -----------------
    FONT SIZE SETTING
    ----------------- */
    --mainTitleSize: calc(36px + 100vw / 30);
    --titleSize: calc(20px + 100vw / 75);
    --textSize: 1.25rem;
    --signatureSize: calc(25px + 100vw / 75);
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

/*  -------
    TEXTBOX
    ------- */

.textbox {
    border: none;
    border-bottom: 1px solid #333;
    background-color: transparent;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    height: 1.75rem;
    width: 100%;
    transition: 300ms;
}

.textbox:focus {
    outline: none;
}

/*  ------
    BUTTON
    ------ */

.button {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    letter-spacing: 1px;
    transition: 300ms;
    margin-bottom: 0.25rem;
}

.button__blue {
    border: 1px solid var(--blue);
    color: var(--blue);
}

.button__blue:hover {
    color: var(--white);
    background-color: var(--blue);
}

.button__green {
    border: 1px solid var(--green);
    color: var(--green);
}

.button__green:hover {
    color: var(--white);
    background-color: var(--green);
}

.button__red {
    border: 1px solid var(--red);
    color: var(--red);
}

.button__red:hover {
    color: var(--white);
    background-color: var(--red);
}

.button__orange {
    border: 1px solid var(--orange);
    color: var(--orange);
}

.button__orange:hover {
    color: var(--white);
    background-color: var(--orange);
}

.button__yellow {
    border: 1px solid var(--yellow);
    color: var(--yellow);
}

.button__yellow:hover {
    color: var(--white);
    background-color: var(--yellow);
}