*:root{
  --space_cadet:hsl(124,48%, 22%);
  --red_crayola:hsl(342,100%,50%);
  --black_coral:hsl(219, 13%, 44%);
  --blue_ryb:hsl(244, 86%, 59%);
  --ultured:hsl(0,0%,96%);
  --white:hsl(0,0%,100%);


/*
transitions
*/
--transitions:0.25s ease;
--transition-2:0.5s ease;
/*
spacing
*/
--section-padding:60px;
/*
boeder radius
*/
--radius-4:4px;
--radius-8:8px;
--radius-12:12px;
}


*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li{
  list-style: none;
}
a{
  text-decoration: none;
  color: green;
}
a,
img,
span,
input,
button,
ion-icon{
  display: block;
}
input,
button{
  background: none;
  border: none;
  font: inherit;
}
button{
  cursor: pointer;
}
input{
  width: 100%;

}
html{
  font-family: 'poppins', sans-serif;
  scroll-behavior: smooth;
}
body{
  background-color: var(--white);
  
}
.container{
  padding-inline: 15px;
}
.header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 74px;
  background: var(--white);
  box-shadow: 0 2px hsla(0,0%, 0%, 0.1);
  padding-block: 16px;
  overflow: hidden;
  transform: 0.3s ease-out;
  z-index: 4;


}
.header .nav-active{
  height: 250px;
  transition: 0.35s ease-out;
}
.header.active{
  position: fixed;
  animation: fadeIn 0.5s ease forwards;

}
.header.container{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.logo img{
  width: 100%


}

.nav-toggle-btn{
  color: hsl(0,0%, 0,0.8);
  font-size: 35px;
  padding-inline: 5px;
}
navbar{
  display: none;
}