html, body
{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* background: ;  */
    /* overflow: hidden; */
}
* 
{
    background: #664e3a;
}
body
{
    overflow-x: hidden;
    color: #ffffff;     
}
main{
    padding-top: 5%;
    color: #ffffff;     
}
.page-header
{
    width: 100vw; 
    height: 100vh;
    overflow: hidden;
}
.background-image
{
    width: 100%;
    height: 100%;
    background: url('../assets/background.jpg') no-repeat center;
    background-size: cover;
}
.center
{
    text-align: center;
}
.click-text
{
    width: 100%;
    height: 100%;
    position: absolute;
    top:90%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    color: #06A8FF;
}
.click-text h4
{
    background: none;
}
.click-text h4:hover
{
    color: #ffffff;
}
.arrow
{
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
}
.arrow span
{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #06A8FF;
    border-right: 5px solid #06A8FF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
    background: none;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}
.line
{
    border: 2px solid #3f280d; 
}
li.nav-item a
{
    text-decoration: none;
    color: #d8a193;
    transition: color 0.5s, text-decoration 2s, font-weight; 
}
li.nav-item a:hover
{
    text-decoration: underline;
    color: #3f280d;
    font-weight: bold;
}
.fab, .fas
{
    color: #ffffff;
    transition: color 0.5s, text-decoration 2s, font-weight; 
}
.fab:hover, .fas:hover
{
    color: #3f280d;
    font-weight: bold;
}