:root{
    --back: rgba(221, 186, 70, 0.17);
    --font: rgb(107, 53, 33);
    --highlight: rgb(199, 46, 26);
    --highlightHov: rgb(119, 27, 27);
    --backDarker2: 191, 122, 44;
    --backDarker: rgb(248, 230, 171);
    --highlightShadow: rgba(142, 19, 3, 0.42);
    --fontLighter: rgb(196, 139, 86);


    --backVar:221, 186, 70;
    --fontVar: 107, 53, 33;
    --highlightVar: 199, 46, 26;
    --highlightHovVar: 119, 27, 27;
    --backDarker2Var: 191, 122, 44;
    --backDarkerVar: 248, 230, 171;
    --highlightShadowVar: 142, 19, 3, 0.42;
    --fontLighterVar: 196, 139, 86;


    --linkedInLogo: 10, 102, 194;
    --gmailLogo: 197, 34, 31;
    --darkGitHub: 36, 41, 46;
    --sciLog: #5e65b1;
}
body{
    font-family: 'Montserrat';
    box-sizing: border-box;
    margin: 0;
    color: var(--font);
}
.hero{
    overflow: hidden;
    padding: 1% 5%;
    background-image: url("asset/tree.webp");
    background-repeat: no-repeat;
    background-origin: border-box;
    background-size: cover;
}