:root {
    --main_color: #898f65;
    --main_color_op: rgba(137, 143, 101,0.1);
    --main_color_op60: rgba(137, 143, 101,0.6);
    --accent_color: #dd8797;
    --accent_color_light: #ffeff1;
    --accent_color_op: rgba(221, 136, 151, 0.1);
    --dark_color: #333333;
    --light_color: #f4f4f4;
    --white: #fff;
    --header_font: "Bebas Neue", sans-serif;
    --body_font: "Poppins", sans-serif;

    --font_large_h1: 100px;
    --font_medium_h1: 4.5em;
    --font_small_h1: 3.5em;

    --font_small_h2: 50px;
    --font_medium_h2: 60px;
    --font_large_h2: 70px;
    
    --font_large_h3: 1.3rem;
    --font_medium_h3: 1rem;

    --font_large_p: 22px;
    --font_medium_p: 18px;
    --font_small_p: 14px;
    --font_xsmall_p: 11px;


}

html {
    font-family: "Poppins", sans-serif;
}


a {
    text-decoration: none;
    font-family: var(--body_font);
    font-weight: 500;
    color: var(--dark_color);
}


li {
    list-style: none;
}

.main-btn {
    padding: 6px 12px;
    background-color: var(--accent_color);
    color: var(--light_color);
    font-family: var(--header_font);
    font-size: 1.2em;
    letter-spacing: 0.2em;
    text-align: center;
    border-radius: 3px;
    border: none;
}

.main-btn:hover {
    background-color: var(--main_color);
}

.hero-btn {
    width: 300px;
    padding: 10px 14px;
    background-color: var(--main_color);
    color: var(--light_color);
    font-family: var(--header_font);
    font-size: var(--font_large_p);
    letter-spacing: 0.2em;
    text-align: center;
    border-radius: 3px;
}

.hero-btn:hover {
    background-color: var(--accent_color);
}