/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*  20px 50px; */
  padding:7px 7px;
  background: var(--black);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 3s ease-out;
}
.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--yellow);
  transition:all ease-out 1s;
  text-align: center;
}
.logo:hover{
  color:var(--green);
}

.nav a {
  margin: 0 15px;
  text-decoration: none;
  color: var(--white);
  /* transition: color 0.3s; */
  transition: all 3s ease-out;
}

.nav a:hover {
  color: var(--green);
}

.btn-header {
  padding: 10px 20px;
  border: none;
  background: var(--green);
  color: var(--white);
  border-radius: 6px;
  cursor: pointer;
  text-decoration:none;
  margin-left:17px;
}
.btn-header:hover{
  color:black;
  background-color:#ffd500;
  transition:all ease-out 1s;
}
.nav > span{
  display:none;
}
@media(max-width:700px){
  .nav > a{
    display:none;
  }
  .nav > span{
    display:block;
    background-color: var(--yellow);
    /* width:70px; */
    height:3px;
  }
  .middle{
    width:54px;
    margin:7px;
  }
}

.menu{
  display:grid;
  align-content: center;
  justify-content: center;
  width:100%;
  height:1vh;
  position:fixed;
  top:0;
  background-color: #0a0a0a;
  z-index: 1001;
  transition: all 1s ease-out;
  font-size:0px;
  opacity:0;
}
.menu > a{
  font-size:1px;
  transition: all 1s ease-out;
  opacity:0;
  color:#00b050;
  text-decoration: none;
}
.menu > a:hover{
  color:#ffd500;
  transition: all 1s ease-out;
}