:root{
    --blue: #196666
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--blue);
}

.hamburger{
    position: relative;
    display: block;
    width: 35px;
    cursor: pointer;
    appearance: none;
    background: none;
    outline: none;
    border: none;

}

.hamburger .bar, .hamburger:after, .hamburger:before{
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color:#fff ;
    margin: 6px 0px;
    transition: 0.4s;
}

.hamburger.is-active:before{
    transform: rotate(-45deg) translate(-5px, 4px)
}

.hamburger.is-active:after{
    transform: rotate(45deg) translate(-7px, -6px)
}

.hamburger.is-active .bar{
    opacity: 0;
}

nav{
   display: block; 
   width: 100%;
   z-index: 98;
   transition: 0.4s;
   font-family: "nunito", sans-serif;
   font-weight: 600;
   font-style: normal;
   max-width: 120px;
   display: flex;
   flex-direction: row;
   opacity: 0;
}

nav a{
    font-family: "nunito", sans-serif;
    font-weight: 600;
    font-style: normal; 
}

nav.is-active{
    left: 0;
    opacity: 1;
    color: #fff;
    transition: 0.55s;
}


.navItems{
    display: block;
    text-align: center;
    margin-bottom: 0 auto 16px;
    padding: 12px 16px;
    text-decoration: none;
    color: #fff;
   }

.navItems:hover{
    background-color: #ec6753;
}

h1, h2{
    font-family: "nunito", sans-serif;
    font-weight: 600;
    font-style: normal;   
    color: #fff;
    user-select: none;
}

.popUp{
    opacity: 50%;
    transition: 1s;
}

.popUp:hover{
    opacity: 100%;
    transform: translateY(-3rem);
    transition: 200ms;
}