:root {
    --primary: #00C795;
    --secondary: #056F5C;
    --theme-dark: #09242C;
    --text-main: #00111C;
    --theme-light: white;
}
@font-face {
    font-family: 'Poppins Regular';
    src: url("../fonts/Poppins/Poppins-Regular.ttf");
}
@font-face {
    font-family: 'Poppins Light';
    src: url("../fonts/Poppins/Poppins-Light.ttf");
}
@font-face {
    font-family: 'Poppins Bold';
    src: url("../fonts/Poppins/Poppins-Bold.ttf");
}

@font-face {
    font-family: 'Oswald Bolder';
    src: url("../fonts/Oswald/Oswald-Bold.ttf");
}
@font-face {
    font-family: 'Oswald Regular';
    src: url("../fonts/Oswald/Oswald-Regular.ttf");
}

* {
    color: var(--text-main);
    box-sizing: border-box;
}
body {
    font-family: 'Poppins Regular';
    /* margin: 0; */
}
main {
    /* height: 559vh; */
    background-color: var(--theme-light);
    margin-top: 96px;
}
.primary {    
    color: var(--primary);
}
button, li, li>a {
    cursor: pointer;
    background: transparent;
    border: none;
    height: 24px;
    padding: 0;
}
.buttons button:hover, .menu-items li:hover {
    border-bottom: 1px solid var(--primary);
}
.wrappler {
    /* height: 100vh;
    position: absolute;
    width: 100%;
    top: 0;
    background: #80808080;
    margin-top: 96px;
    display: none; */

    position: relative;
    margin: 96px 0 0 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition-property: opacity;
    transform: translateZ(0);
    /* opacity: 0; */
    display: none;
    background-color: #caacac80;
    transition-duration: 200ms;
    z-index: 1;
}