:root {
--dark-brown:#8E7731;
--bg:#e5e5e5;
}
* {
box-sizing: border-box;
}

html, body {
margin:0px;
padding:0px;
height:100%;
font-family: 'Montserrat', sans-serif; 
background:URL(main-bg.svg); 
background-color:var(--bg);
}


#top {
position:fixed;
width:100%;
background:URL(main-bg.svg); 
background-color:var(--bg);
z-index:100;
}


header > div {
flex-grow:1;
}
#top-logo a {
display:inline-flex;
align-items:center;
}
#top-logo a:hover svg {
}

#top-logo svg {
height:60px;
width:auto;
margin:10px 20px;
}

#logo-img {
height:35px;
width:auto;
}
#menu {
text-align:center;
}
#menu svg {
height:38px;
width:auto;
cursor:pointer;
}
#menu a:hover .href {
fill:#000;
}

#menu-page {
display:none;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
border-top:85px solid transparent;
z-index:99;
}
#menu-page > div {
background-color:var(--dark-brown);
height:100%;
width:100%;
}

#menu-page .container {
height:100%;
width:100%;
background:URL(main-bg.svg); 
background-repeat:no-repeat;
background-size:100% 100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-evenly;
padding:0 2rem 10rem 2rem;
}

#menu-page a {
font-size:2rem;
text-decoration:none;
color:#000;
text-transform:uppercase;
font-weight:600;
letter-spacing:3px;
padding:2rem;
}

#menu-page a:hover {
color:var(--bg);
}

.close svg {
height:3.5rem;
cursor:pointer;
}

#menu-page a:hover path {
fill:var(--bg);
}
#social {
display: flex;
justify-content: flex-end;
}
#social i {
font-size:2rem;
margin-right:0.5rem;
}
#social a {
color:#000;
text-decoration:none;
display:inline-flex;
align-items:center;
margin-right:1.5rem;
font-weight:600;
}
#social a:hover {
color:var(--dark-brown);
}

#content-header {
height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:space-around;
flex-direction:column;
}
#content-header h1 {
text-align:center;
}
#content-header h1 span {
font-family:'Heuristica';
letter-spacing:3px;
margin:0;
}
#content-header h1 p {
font-size:1rem;
text-decoration:none;
color:#000;
font-weight:500;
letter-spacing:1px;
margin:0;
text-align:left;
margin:2rem;
max-width:1200px;
}

#mouse-scroll {
cursor:pointer;
}

#content-header h1 {
text-transform:lowercase;
}


.button {
display:flex;
justify-content:center;
width:100%;
margin-top:2rem;
margin-bottom:4rem;
}
.button a:link, .button a:active, .button a:visited {
color:var(--dark-brown);
border:2px solid var(--dark-brown);
border-radius:2rem;
padding:0.5rem 2rem;
text-decoration:none;
font-weight:600;
}

.button a:hover {
background-color:var(--dark-brown);
color:#fff;
}