*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
    --res: calc(.01 *10vmin);
}

body {
  font-family: 'Bebas Neue', Helvetica, sans-serif;
  font-size: 16px;
  background: #f4f4f4;
}

nav {
/* ORIGINAL */
    /* position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    padding: .9375rem 1.5625rem;
    background: #fafafa;
    box-shadow: inset 0 -0.1875rem 0 orange; */
    
/*MODIFIE */
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    margin-top: 0;
    padding: .9375rem 1.5625rem;
    background: #fafafa;
    box-shadow: inset 0 -0.1875rem 0 #F9B233; */
}



.nav-icon {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 1.25rem;
}
.nav-icon span {
    font-family: Roboto Flex, sans-serif;
    font-size: 1.56rem;
    margin-left: 1.875rem;
    font-weight: 400;
    color:#333;
}
.nav-icon img {
    width: 25rem;
}
.hamburger {
    display: none;
}
.navlinks-container a {
    margin: 0 .625rem;
    font-size: calc(32 * var(--res));
    /*font-weight: 500;*/
    text-decoration: none;
    color: #414141;
    display: inline-block;
    position: relative;
}
.navlinks-container a::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -0.0625rem;
    width: 100%;
    height: .1875rem;
    border-radius: 50%;
    transform: scale(0);
    transform-origin: left;
    background: #F9B233;
    transition: transform .3s ease-out;
}
.navlinks-container a:hover::after {
    transform: scaleX(1);
}
.nav-authentication {
    margin-left: auto;
}

.sign-btns button {
    font-family: Roboto Flex, sans-serif;
    font-size: 1rem;
    min-width: 90px;
    padding: .625rem .3125rem;
    margin: 0 .3125rem;
    border-radius: 5px;
    cursor: pointer;
    border: none;  
}
.sign-btns button:nth-child(2) {
    border:none;
    background: rgba(146,195,238,0.718); /* #92c3eeb7 */
}
.sign-user {
    display: none;
}

/*@media screen and (max-width: 900px) {*/
/*    navlinks-container a{*/
/*        font-size: clamp(18px, 3vw, 28px);*/
/*    }*/
}
@media screen and (max-width: 900px) {
    nav {
    /* ORIGINAL */
        /*padding: 15px 20px;
        position: relative;*/
    
    /* MODIFIE */
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
    padding: .9375rem 1.5625rem;
    background: #fafafa;
    box-shadow: inset 0 -0.1875rem 0 #F9B233; */
    }
    .nav-icon {
        order: 2;
        margin: 0 auto;
        width: 500;
    }
    .main-navlinks {
        order: 1;
    }
    .nav-authentication {
        order: 3;
    } 
    .nav-icon span {
        font-size: 22px;
    }
    
    /* HAMBURGER */

     .hamburger {
        width: 20px;
        height: 20px;
        cursor: pointer;
        border: none;
        display: flex;
        background: #fafafa;
        align-items: center;
        position: relative;
     }
    
     .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        background: #F9B233;
        position: absolute;
        pointer-events: none;
        transition: opacity .3s,.15s,ease-out;
     }

    .hamburger span:nth-child(1),
    .hamburger span:nth-child(3) {
    transition: transform 0.3s ease-out;
    }

     .hamburger span:nth-child(1) {
        transform: translateY(7px);
     }
     .hamburger span:nth-child(3) {
        transform: translateY(-7px);
     }

     .hamburger.open span:nth-child(1) {
        transform: translate(0) rotate(135deg);
      }
      .hamburger.open span:nth-child(2) {
        opacity: 0;
        transition: opacity 0s ease-out;
      }
      .hamburger.open span:nth-child(3) {
        transform: translate(0) rotate(-135deg);
      }

    .navlinks-container {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        position: absolute;
        background: #fafafa;
        top: 100%;
        left: 0;
        transform: translateX(-100%);
        width: 30vw;
        height: 40vh;
        padding: 15px 50px 15px 20px;
        border-right: 3px solid #F9B233; /* #c5c5c6 */
        border-bottom: 3px solid #F9B233; /* #c5c5c6 */
        border-radius: 0 0 10px 0;
        /* opacity: 80%; */
    }
    .open {
        transform: translateX(0%);
    }
    
    .navlinks-container a {
        font-size:calc(64 * var(--res));
        margin: 10px 0;
    }
    
    .sign-btns {
        display: none;
    }
    
    .sign-user {
        display: block;
        cursor: pointer;
        border: none;
    }

    .sign-user img{
        width: 20px;
        color:#F9B233;
    }
}
    
@media screen and (max-width: 500px) {
    .hamburger button{
        order:1;
    }
    .nav-icon img {
        align-items: center;
        width: 200px;
        order:2;
    }

    .nav-icon span {
        font-size: 20px;
        /* order:1; */
    }
}