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

body, html {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

:root {
    --dark: #282727;
    --accent: #63c19b;
    --accent-fade: rgba(99, 193, 155, 0.2);
    --light: #f1f3f0;
    --grey: #dfdfdf;

    --header-font-m: 1.6em;
    --header-font: 2.5em;
    --font-mobile-p: 14px;
    --font-p: 18px;

    --header-font-thick: 500;
    --text-font-200: 200;
    --text-font-300: 300;
    --text-font-500: 500;



    --margin-bm: 50px;
}

li {
    list-style: none;
}

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

button {
    border: none;
    cursor: pointer;
}

input::placeholder, textarea::placeholder {
    font-family: 'Poppins', sans-serif;
    color: var(--grey);
    opacity: 0.5;
    font-size: var(--font-mobile-p);
    font-weight: var(--text-font-200);
}

input, textarea {
    color: var(--grey);
    padding: 10px;
    font-size: var(--font-mobile-p);
}


.btn_nav {
    width: auto;
    color: var(--dark);
    padding: 7px 14px;
    background-color: var(--accent);
    border-radius: 5px;
    font-size: 14px;
    font-weight: var(--text-font-500);
    text-align: center;
}

.btn_nav:hover {
    background-color: var(--grey);
    text-decoration:none; 
    color:var(--dark);
    font-weight: var(--text-font-500);
  }
  

.btn_dark {
    width: auto;
    color: var(--light);
    padding: 7px 14px;
    background-color: var(--dark);
    border-radius: 5px;
    font-size: 14px;
    font-weight: var(--text-font-300);
    text-align: center;
}


.btn_dark:hover {
    background-color: var(--grey);
    text-decoration:none; 
    color:var(--dark);
    font-weight: var(--text-font-500);
  }
  

.btn_accent {
    color: var(--light);
    font-weight: var(--text-font-500);
    padding: 7px 14px;
    background-color: var(--accent);
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin-bottom: var(--margin-bm);
}

.btn_accent:hover {
    color: var(--accent);
    font-weight: var(--text-font-500);
    border: 1.5px solid var(--accent);
    background-color: transparent;
}

.btn_link {
    color: var(--accent);
    font-size: var(--font-mobile-p);
    font-weight: bold;
}

.btn_link:hover {
    color: var(--grey);
}

.header h2 {
    font-size: var(--header-font-m);
    font-weight: var(--header-font-thick);
    font-family: 'Poppins', sans-serif;
    font-weight: var(--header-font-thick);
    letter-spacing: 2px;
    text-align: center;
}

/* .header {
    font-family: 'Poppins', sans-serif;
    font-weight: var(--header-font-thick);
    letter-spacing: 2px;
    text-align: center;
} */

.header_light {
    color: var(--light);
}

.header_dark{
    color: var(--dark);
}

.seperator {
    width: 90%;
    height:2.5px;
    background-color: var(--accent);
    margin-bottom: var(--margin-bm);
}

.section_text {
    font-size: var(--font-mobile-p);
    font-weight: var(--text-font-300);
    text-align: center;
    width: 85%;
    margin-bottom: 20px;
}

.text_light {
    color: var(--light);
}

.text_dark {
    color: var(--dark);
}