navbar.css

.navbar {
    height: 12vh;
    background-color: transparent;
    width: 100%;
    position: fixed;
    display: flex;
    top: 0; 
    left:0;
    align-items: center;
    text-align: center;
    z-index: 3;
  }
  
  .nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
    list-style: none;
    width: 50%;
    height: 100%;
    margin-left: auto;
    margin-top: 3%;
  }
  
  .nav-links li {
    text-align: center;
    list-style: none;
    width: 25%;
    margin-left: 2%;  
  }
  
  .nav-links li a {
    text-decoration: underline;
    color: black;
    font-size: 2rem;
    font-family:'Josefin Sans', sans-serif;
    font-weight:bold;
  }
  .devlink{
    margin-right:3%;
  }
  .tzfe:hover a{
    color:#E12D2D;
  }
  .xaz:hover a{
    color:#0F7173;
  }
  .devlink:hover a{
    color:#0F7173;
  }
  
  /* navbar left side */
  .branding {
    width: 50%;
    display: flex;
  }
  
  .nav-title {
    margin: 3% auto auto 10%;
    font-size: 4rem;
    color: #272932;
    text-decoration: underline;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    /* -webkit-text-stroke-width: 0.8px;
  -webkit-text-stroke-color: black; */
  }
  
  /* hamburger */
  .hamburger-menu {
    width: 1rem;
    align-items: center;
    position: absolute;
    right: 22%;
    top: 40%;
  }
  
  .open #middle-line {
    transform: translateX(-50px);
    background: transparent;
  }
  
  .open #top-line {
    transform: rotate(45deg) translateX(-14%) translateY(14%);
    transform-origin: left;
    transition: 0.5s ease-out;
  }
  
  .open #bottom-line {
    transform: rotate(-45deg) translateX(-14%) translateY(-14%);
    transform-origin: left;
    transition: 0.5s ease-out;
  }
  
  /* nav-bar queries */
  @media screen and (min-width:769px) {
    .hamburger-menu {
      display: none;
    }
  
    .navlinks-mask {
      display: none;
    }
  }
  
  @media screen and (max-width:769px) {
  .back-home{
    background: transparent;
  }
    .navbar{
      background-color:rgba(6, 84, 70, 0.5);
    }
    .nav-title {
      display: none;
      color:#fadcac;
    }
  
    .logo {
      height: auto;
      width: 20%;
      margin: auto 0 auto 10%;
    }
  
    .nav-links {
      display: none;
    }
  
    .openPage {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: #158467;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin: auto;
      list-style: none;
      text-decoration: none;
      transition: 0.5s ease-out;
      z-index: 2;
    }
  
    .openPage li {
      text-align: center;
      text-decoration: none;
      list-style: none;
      width: 15%;
    }
  
    .openPage li a {
      text-decoration: none;
      color: #fadcac;
      font-size: 3rem;
      text-align: center;
    }
  
    .openPage li:hover a {
      text-decoration: none;
      color: #065446;
    }
  
    .log-in {
      margin: 50% auto 10% 35%;
      text-decoration: none;
    }
  
    .sign-up {
      margin: 5% auto auto 35%;
      text-decoration: none;
    }
  
    .hamburger-menu {
      width: 1rem;
      align-items: center;
      position: absolute;
      right: 10%;
      top: 35%;
      z-index: 3;
    }
  }