header input{
  display: none;
}

  label{

    display: flex;
  justify-content: center;
    /* width: 1.5rem;
    height: 1.5rem; */
    margin:0.5rem;
  }
  .box{



    height: 1.5rem;
    width: 2rem;

  }
.box div{
    display: block;
    height: 0.2rem;
    background-color: white;
  }
  .middle{

    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .mobileheader{
    position: sticky; top: 0px;
    width: 100%;
      background-image:linear-gradient(to bottom, #0D364B 5%, #000000 33%, #000000 66%, #0D364B 99%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 1rem;
      padding-right: 1rem;
  }

  label div div{

      transition: transform 800ms ease;
    }

     input[type=checkbox]:checked ~ label .top {




       transform: translateY(340%) rotate(-315deg)  scaleY(0.2) scaleX(0.5);


     /* animation: burgerTop 1200ms ease forwards; */

    }

     input[type=checkbox]:checked ~ label .middle {

      transform: rotate(-135deg)  scaleX(0) scaleY(0);
      /* animation: burgerMiddle 1200ms ease forwards; */
    }

     input[type=checkbox]:checked ~ label .bottom {
      transform: translateY(-340%) rotate(315deg) scaleY(0.2) scaleX(0.5);
      /* animation: burgerBottom 1200ms ease forwards; */
    }

header nav {
  position: fixed;
  left: 0;
  top: 4rem;
  height: 100vh;
  width: 100vw;
  background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 15%, rgba(0, 0, 0, 0.95) 85%, rgba(13, 54, 75, 0.95) 99%);
  visibility: hidden;
  opacity: 0;
  transform: translateY(3rem);
  transition: visibility 350ms ease, opacity 350ms ease, transform 350ms ease;
}

header nav ul{
  margin: 60vh 15vw 0 15vw;

  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto auto;
  grid-template-areas: 'leer home home leer'
  'about about contact contact';
}
#homie{
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
#buddy{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
#dude{
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
}

header nav ul li {
  display: block;
}
header nav ul li a {

  display: block;
}
input[type=checkbox]:checked ~ nav {
  visibility: visible;
  opacity: 1;
  transform: none;
}
  .floaty{
font-size: 1.25rem;
    margin: 1rem 0 1rem 0;

  text-align: center;
  }

.floaty a{
      text-decoration: none;

      color: #0d364b;
}



.grad{
  padding-left: 5%;
  padding-right: 5%;
}
#gradienttop{
  height: 2rem;
}

.conprofil{
  margin: 0;

}
article{
  margin-top: 1rem;

}
main{
  padding: 0 5% 0 5%;
}
.mid{
  padding: 0 2rem 4rem 2rem;
}


#logofooter{
  width: 5%;

 }

#topbar{
  display: none;
}