* {
    box-sizing: border-box;
}

:root {
    --primary: #384c48;
    --secondary: #91c6b3;
    --black: #000;
    --white: #fff;

    --fontFamily: sans-serif;
    --fontSize: 20px;
    --fontWeight: 500;
    --lineHeight: 130%;
    --letterSpacing: 1px;

    --radius: 20px;

    --scrollbarTrackColor: var(--themeColor);
    --scrollbarThumbColor: var(--theme);
    
    --theme: #384C48;
    --themeColor: #fff;
}

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: var(--scrollbarTrackColor);
	border-radius: 100px;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbarThumbColor);
	border-radius: 100px;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--theme);
    color: var(--themeColor);

    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    line-height: var(--lineHeight);
    letter-spacing: var(--letterSpacing);
    
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 100%;
}

h1,
.h1 {
    font-weight: 500;
    font-size: 5rem;
}

h2,
.h2 {
    font-weight: 500;
    font-size: 3rem;
}

h3,
.h3 {
    font-weight: 600;
    font-size: 2rem;
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
}

.wrapper {
    width: 95%;
    max-width: 1420px;
    margin: 0 auto;
}