body {
  overflow-x: hidden;
}

#headerContainer {
position:absolute;
color:white;
background-color:white;
margin-left:-12px;
margin-top:100px;
width:101%;
height:calc(40px + 6vw);
border-bottom: 2px solid grey;
box-shadow: 0px 0px 20px #c0c0c0;
}

.middle-part {
  transform-origin:(50% 50%); 
  animation: example 25s linear, example-2 25s linear;
  animation-fill-mode: forwards;
  }
  
@media only screen and (min-width: 600px) {
  .move-links{right:calc(-10px + 22%);}
  .move-donate-button{position:absolute; right:calc(-40px + 5%);}
}

@media only screen and (max-width: 599px) {
  .move-links{right:calc(-10px + 18%);}
  .mobile-button{position:absolute; right:calc(62px + 5vw); width:calc(25px - 0.1vw); height:calc(25px - 0.1vw);}
  .move-donate-button{position:absolute; right:calc(-20px + 6%);}
}

  
  .final-part {
  animation-name: final-part;
  animation-duration:60s;
  }


@keyframes example {
  0% {margin-top:calc(7px + 1%); }
  15% {margin-top:calc(7px + 1%); }
  100% {margin-top:calc(-14px - 1.5%); }
  }

 
  @keyframes example-2 {
  0% {left:calc(0px - 5% + 10.7vw); width:calc(3px + 1%);}
  20% {left:calc(0px - 5% + 10.7vw); width:calc(3px + 1%);}
  100% {left:calc(-3px - 15% + 10.7vw); width:calc(50px + 19%);}
  }
  
  
  @keyframes final-part {
  0% {margin-top:calc(-29px - 3%); left:10%; opacity:0; width:0px; top:calc(10px + 47.5%);}
  25% {margin-top:calc(-29px - 3%); left:10%; opacity:0; width:0px; top:calc(10px + 47.5%);}
  26% {margin-top:calc(-29px - 3%); left:10%; opacity:1; width:0px; top:calc(10px + 47.5%);}
  100% {margin-top:calc(-29px - 3%); left:-42%; opacity:1; width:calc(100px + 140%); top:calc(10px + 47.5%);}
  }
  
  #button-bar {
  position:absolute;
  background-color:white;
  height:40%;
  width: calc(96px + 2%);
  top:40%;
  right: 8%;
  }
  
  #link-bar {
  position:absolute;
  color:black;
  height:20%;
  width: calc(130px + 14%);
  top:45%;
  }
  
  img.social-buttons {
  width:calc(20px + 0.9vw);
  }
  
 label {
    display: block;
    background: white;
    background-image: url("../template_images/checkbox1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    top:calc(17px + 2.1vw);
    width: calc(25px - 0.1vw);
    height: calc(25px - 0.1vw);
    position:absolute;
    right:15%;
}


#mobileMenuButton:checked + label {
    background: white;
    color: yellow;
    background-image: url("../template_images/checkbox2.png");
    background-repeat: no-repeat;
    background-size: 100%;

}

headerContainer {
  color: #000;
  background-color:blue;
  font-weight: 600;
  height: 25px;
  border-bottom: 2px solid lightgrey;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + headerContainer {
  border-bottom: 2px solid red;
}

input[type="checkbox"]:checked ~ div p {
  color:green;
  background-color:lightgray;
  height:160px;
  font-size:20px;
  position:absolute;
  top:calc(-178px + 6vw);
  width:100%;
}

#mobileMenuContainer {
    background-color:orange;
    margin-top:calc(-158px + 6vw);
    height:0px;
}
#mobileMenuContent {
    position:absolute;
    top:200px;
    left:0px;
    width:100%;
    font-size:0.1px;
    }