#topbar{
  display: none;
}
#logo{
  margin-top: 0.5rem;
  width: 2.5rem;
}

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(2rem);
  transition: visibility 350ms ease, opacity 350ms ease, transform 350ms ease;
}
header nav ul{
  margin: 35vh 15vw 0 15vw;

  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto auto;

  grid-row-gap: 1rem;
}
#homie{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}
#marge{
  grid-column-start:1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}
#buddy{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}
#dude{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
}
header nav ul li {
  display: block;
}
header nav ul li a {
font-size: 1.25rem;
  display: block;
}
input[type=checkbox]:checked ~ nav {
  visibility: visible;
  opacity: 1;
  transform: none;
}
  .floaty{
    margin-top: 1rem;
    margin-bottom: 1rem;
  text-align: center;
  }

.floaty a{
      text-decoration: none;

      color: #0d364b;
}

section{
  padding: 1rem 5% 4rem 5%;
}


.sides{
  padding: 0 5% 0 5%;
}
.maskpic{
  width: 300px;
}
.schmal{
  width: 142px;
}