@import url(fonts.css);


:root {
    --dark-blue: #050a30;
    --light-blue: #3aa9c5;
    --color-white: #e9e9eb;
    --yellow: #ffc973;
    --red: #ef4b4c;
  }
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Glacial Indifference';
}
  

header{
  position: fixed;
  height: 80px;
  top: 0; left: 0; right: 0;
  background: #050a30;
  padding: 0px;
  padding-left: 1%;
  padding-right: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 9999;
}

header .navbar-logo{
  width: 30%;
  padding: 15px;
}

header .navbar ul{
  list-style: none;
}

header .navbar ul li{
  position: relative;
  float: left;
  padding: 15px;
}

header .navbar ul li a{
  font-size: 26px;
  padding: 20px;
  color: #e9e9eb;
  display: block;
}

header .navbar ul li a:hover{
  font-size: 26px;
  padding: 20px;
  color: #ffc973;
  display: block;
}


header .navbar ul li ul{
  position: absolute;
  left: 0;
  top: 100%;
  background: #050a30;
  box-shadow: 1px 1px 0px 1px #3aa9c5;
  border-radius: 20px;
  display: none;
}


header .navbar ul li ul li{
  width: max-content;
  padding: 1px;
}

header .navbar ul li:hover > ul{
  display: block;
}

/* this the after effect with the yellow line */
header .navbar ul li a::after {
  content: '';
  width: 0%;
  height: 2px;
  background-color: #ffc973;
  display: block;
  margin: auto;
  transition: 0.5s;
}
  
header .navbar ul li a:hover::after {
  width: 100%;
}


#menu-bar{
  display: none;
}

header label{
  font-size: 26px;
  color: #e9e9eb;
  cursor: pointer;
  display: none;
}

.logos img{
  position:absolute;
  left: -15px;
  width: 60px;
  padding-right:20px;
  padding-left: 2px;
  right:0px;
  transition: opacity 0.1s ease-in-out;
}

.logos img.logo-white:hover{
  opacity:0;
}

.wetlab-logo{
  width:50px;
}

.hp-logo{
  width:50px;
}

.project-logo{
  width:50px;
}

.team-logo{
  width:50px;
}


/* progress bar style*/

.progress_header {
  height: 90px;
  position: fixed;
  width: 100%;
  background-color: #f1f1f1;
  left: 0.1vh;
  z-index: 1000;
}

.progress-container {
  width: 100%;
  height: 90px;
  background: #050a30;
}

.progress-bar {
  background: #3aa9c5;
  position: fixed;
  width: 0%;
  height:90px;
  animation: progress 1s linear;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
} 

@media (max-width:1300px){
    header{
      width: 100%;
      padding: 20px;
    }

    .progress_header{
      width: 100%;
    }

    header label{
      display: initial;
    }

    header .navbar{
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: #050a30;
      border-top: 1px solid rgba(0,0,0, .1);
      display: none;
      padding-left: 30px;
      width: 100%;
    }

    header .navbar ul li{
      width: 100%;
    }

    header .navbar ul li ul{
      position: relative;
      width: 100%;
      box-shadow: 0px 0px 0px 0px #3aa9c5;
    }

    header .navbar ul li ul li{
      background: #050a30;
    }

    #menu-bar:checked ~ .navbar{
      display: initial;
    }
}