/*
colours
green: #bbbc9b;
brown: #4e2e13;
off-white: #f5f5f5;
black: #000000
white: #ffffff
*/

@font-face {
  font-family: 'UntitledSans';
  src: url(assets/font/untitledsans/untitled-sans-web-regular.woff);
}

html{
position: fixed;
width: 100%;
height: 100%;
background-color: #4e2e13;
font-family: 'UntitledSans';
font-size: 10px;
box-sizing: border-box;
padding: 10px;
letter-spacing: 0.25px;
line-height: 17px;
scroll-behavior: smooth;
}

#wrapper{
border: 15px solid;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
border-image: url(border.png) 33.3% repeat;
border-image-repeat: repeat;
transition: 0.5s;
overflow: hidden !important;
}

#header{
width: 100%;
position: fixed;
top: 40px;
height: 40px;
left: 0px;
}

.navigation-container{
height: 40px;
width: 100%;
display: none;
position: absolute;
z-index: 9999;
}

.navigation{
width: 100%;
text-align: center;
position: absolute; 
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9999 !important; 
width: auto;
text-align: center;
}

#middle{
width: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.wordmark{
width: 150px !important;
margin: auto;
display: block;
}

#footer{
width: 100%;
text-align: center;
position: fixed;
bottom: 50px;
color: #bbbc9b;
left: 0px;
}

a:link{
text-decoration: none;
color: #bbbc9b;
}

a:visited{
text-decoration: none;
color: #bbbc9b;
}

a:link{
text-decoration: none;
color: #bbbc9b;
}

a:active{
text-decoration: none;
color: #bbbc9b;
}

a:hover{
text-decoration: underline;
transition: 0.5s;
}