:root{
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}
*{
    margin: 0 ;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior:smooth;
  }

/*box holding top section*/
header{
    width:100%;
    
   
    
}

/*box holding nav*/
nav{
    width:100%;
    padding:.5rem;
    color:white;
    background-image: linear-gradient(black,#36454F);
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
}

/*unordered list holding links*/
ul{
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    

    
   
}
li{
    font-size: 1.2rem;
    list-style-type: none;
    padding:1rem;
    border-bottom: 2px solid transparent;
    
}

/*anchor tags*/
a{
    list-style-type: none;
    color:white;
    border-bottom: 2px solid transparent;
}

@keyframes towhite {

    0%{
        border-bottom: 2px solid #36454F;
        border-bottom-width:0%;
    }
    25%{
        border-bottom-width:25%;
    }
    50%{
        border-bottom:2px solid #C4B454;
        border-bottom-width:50%;
    }
    75%{
        border-bottom-width:75%;
    }
    100%{
        
        border-bottom-width:100%;
    }
    
  }
li:hover{
    animation-name: towhite;
    animation-duration: 5s;
   animation-iteration-count: infinite;
  
}
a:visited{
    text-decoration: none;
}
a:link{
    text-decoration: none;
}
a:active{
    text-decoration: none;
}


/*Hamburger Menu*/

.hamburger{
    visibility:hidden;
    
  }

.line{
    width: 35px;
    height: 3px;
    background-color: #C4B454;
    margin: 6px 0;
    border-radius:3px;
  
}

/*logo images*/

#whiteimg{
    height: 3rem;
   cursor:auto;

}

footer{
    height:10vh;
    padding-left: 1rem;
    color:white;
    background-image: linear-gradient(#36454F,black);

    display: flex;
    justify-content: center;
    align-items: center;

}

body{
    background-color: #f8f6eb;
}





/*--.main{
    height: 100vh;
}
.main>img{
    width:100%;
    height: 100%;
    object-fit:cover;
}*/


/*different screen sizings*/
@media screen and (max-device-width:1024px){
    /*makes hamburger on top of ul*/
    .nav{
        display: flex;
  flex-direction: column;
  flex-wrap: wrap;

    
      }
      
      .hamburger{
      
       visibility: visible;
        cursor:pointer;
        display:block;
        
      }
      ul{
        display:none;
        z-index: 100;
        background-image: inherit;
        
      }
      li{
          padding:20px 60px;
          border-bottom:2px solid transparent ;
      }
     
      /*animation making ul slide down*/

      @keyframes transition {
        from {transform: translate(0px,-500px);}
        to {transform: translate(0px,0px);}
      }
      
      /*when the hamburger is clicked do this*/
      ul.active{
        display:flex;
        flex-direction:column;
        align-content:center;
        

        animation-name: transition;
        animation-duration:1s;
        animation-timing-function: cubic-bezier(0, 0.9, 0.53, 1.12);
        
      }
      

      @keyframes towhite {
        0%{
            border-bottom: 2px solid #36454F;
            color:#36454F;
    
        }
        50%{
            border-bottom:2px solid #C4B454;
            color:#C4B454;
        }
        
      }

      .active>a:hover{
        animation-name: towhite;
        animation-duration: 1s;
       animation-iteration-count: infinite;
   
    }
      
  
}





/* width */
::-webkit-scrollbar {
    width: .5rem;
    
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #b9aa45;
    border-radius: 2px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #36454F;
    border-radius: 2px;

  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }