:root {
    --color_white: #ffffff;
    --color_water_green: #208e8b;
    --color_violet: #5f1f7b;
    --color_black: #333333;
    --color_green: #93af37;
    --color_red: #af3737;
    --color_grey: #bbbbbb;
    --font_title: "Sansita", sans-serif;
    ;
    --font_text: "Abel", sans-serif;
    ;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

h1,
h2,
h3 {
    font-family: var(--font_title);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

p,
a,
li,
span,
button,
label,
input {
    font-family: var(--font_text);
    font-size: 1rem;
}

input, select {
    border: none;
    background: transparent;
    outline: none;
    font-size: 1.15rem;
}

@media (min-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.5rem;
    }

    p,
    a,
    li,
    span,
    button {
        font-size: 1.0625rem;
    }
}

@media (min-width: 1024px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    h3 {
        font-size: 1.75rem;
    }

    p,
    a,
    li,
    span,
    button {
        font-size: 1.125rem;
    }
}

button {
    background: transparent;
    border: none;
}

.overlay {
    width: 100%;
    height: 100dvh;
    background: var(--color_black);
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

.overlay.active {
    opacity: .8;
    visibility: visible;
    z-index: 200;
}