<input type="checkbox" id="menu-toggle"/>
<label for="menu-toggle"><i class="fas fa-times"></i>
  <i class="fas fa-bars"></i>
</label>
<div class="page-content-wrapper">
  <div class="page-content">
    <img src="https://jeffsum.com/images/jeff_1.jpg"/>
            <p>You really think you can fly that thing? Checkmate... Must go faster. Checkmate... Did he just throw my cat out of the window? This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Must go faster... go, go, go, go, go!</p><p>Hey, take a look at the earthlings. Goodbye! Remind me to thank John for a lovely weekend. Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Must go faster. You really think you can fly that thing? Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p><p>This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. Did he just throw my cat out of the window? Did he just throw my cat out of the window? Eventually, you do plan to have dinosaurs on your dinosaur tour, right? So you two dig up, dig up dinosaurs?</p>
    <img src="https://jeffsum.com/images/jeff_2.jpg"/><p>Life finds a way. God help us, we're in the hands of engineers. Life finds a way. Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! You really think you can fly that thing? Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</p><p>Just my luck, no ice. They're using our own satellites against us. And the clock is ticking. Life finds a way. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? You really think you can fly that thing? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!</p>
    <img src="https://jeffsum.com/images/jeff_3.jpg"/>
    <p>Yeah, but John, if The Pirates of the Caribbean breaks down, the pirates don’t eat the tourists. Life finds a way. Did he just throw my cat out of the window? I was part of something special. They're using our own satellites against us. And the clock is ticking.</p><p>God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Checkmate... Jaguar shark! So tell me - does it really exist? Did he just throw my cat out of the window? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p>
    <p>Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should. So you two dig up, dig up dinosaurs? Must go faster. I was part of something special. Must go faster... go, go, go, go, go! God help us, we're in the hands of engineers.</p>
    <p>They're using our own satellites against us. And the clock is ticking. Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? God help us, we're in the hands of engineers. So you two dig up, dig up dinosaurs? Forget the fat lady! You're obsessed with the fat lady! Drive us out of here!</p>
    <p>Did he just throw my cat out of the window? Life finds a way. Checkmate... My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! I was part of something special. Checkmate... Is this my espresso machine? Wh-what is-h-how did you get my espresso machine?</p><p>Jaguar shark! So tell me - does it really exist? God help us, we're in the hands of engineers. You know what? It is beets. I've crashed into a beet truck. You really think you can fly that thing? My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard!</p><p>Hey, take a look at the earthlings. Goodbye! Forget the fat lady! You're obsessed with the fat lady! Drive us out of here! My dad once told me, laugh and the world laughs with you, Cry, and I'll give you something to cry about you little bastard! We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
          </div>
</div>
<div class="menu">I'm a menu</div>
<a href="https://jeffsum.com/" target="_blank" class="jefflink">Get Yourself Some Jeff</a>

html,body {
  min-height:100%;
  max-height:100%;
  margin:0;
  padding:0;
}

*,*:before,*:after {
  box-sizing:border-box;
}

body {
  background-image:linear-gradient(202deg, #61BFD9 16%, #0551B4 67%);
  font-family:"Helvetica Neue", "Arial", sans-serif;
  .menu {
    position:fixed;
    height:100vh;
    width:30vw;
    top:0;
    left:35vw;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    transform:scale(0.6) translateY(30px);
    color:white;
    opacity:0;
  }
  .page-content-wrapper {
    position:fixed;
    z-index:2;
    transition:transform 0.5s ease-in-out;
    width:100%;
    height:100%;
    &:before,&:after {
      content:'';
      display:block;
      position:fixed;
      top:-10vh;
      height:120vh;
      width:60vw;
      background:white;
      z-index:0;
      transition:transform .5s ease-in-out,box-shadow 0.5s ease-in-out;
      box-shadow:0 0 0 black;
    }
    &:before {
      left:-10vw;
    }
    &:after {
      right:-10vw;
    }
    .page-content {
      position:relative;
      z-index:1;
      transition:opacity 0.25s ease-in-out;
      padding:20px 40px 80px 40px;
      width:100%;
      height:100%;
      overflow:auto;
      img {
        width:30vw;
        height:auto;
        margin-top:20px;
        margin-bottom:20px;
        border-radius:5px;
        box-shadow:0 10px 10px rgba(black,0.25);
        &:nth-of-type(odd){
          float:left;
          margin-right:20px;
        }
        &:nth-of-type(even){
          float:right;
          margin-left:20px;
        }
      }
    }
  }
  #menu-toggle, #menu-toggle + label {
    position:fixed;
    top:0;
    left:0;
    z-index:3;
    display:block;
    height:40px;
    width:40px;
  }
  #menu-toggle {
    opacity:0;
  }
  #menu-toggle + label {
    transition:transform 0.5s ease-in-out;
  }
  #menu-toggle + label .fas {
    font-weight:100;
    font-size:35px;
    position:absolute;
    display:flex;
    height:40px;
    width:40px;
    align-items:center;
    justify-content:center;
    top:0;
    left:0;
    transition:opacity 0.5s ease-in-out;
    
    &.fa-times {
      opacity:0;
    }
  }
  .jefflink {
    position:fixed;
    z-index:5;
    bottom:10px;
    left:50%;
    padding:20px;
    background-image:linear-gradient(202deg, #61BFD9 16%, #0551B4 67%);
    border-radius:10px;
    width:220px;
    text-align:center;
    margin-left:-110px;
    text-decoration:none;
    color:white;
    text-shadow:0 2px 2px #0551B4;
    transition:transform 0.5s ease-in-out;
    &:hover {
      background-image:linear-gradient(202deg, darken(#61BFD9,10) 16%, darken(#0551B4,10) 67%);
       text-shadow:0 2px 2px darken(#0551B4,10);
    }
  }
  #menu-toggle:checked {
    + label {
      transform:rotate(180deg);
      .fas {
        &.fa-times {
          opacity:1;
        }
        &.fa-bars {
          opacity:0;
        }
      }
    }
    ~ .page-content-wrapper {
      pointer-events:none;
      transform:scale(1.5);
      &:before,&:after {
        box-shadow:0 0 10px black;
      }
      &:before {
        transform:translateX(-15vw);
      }
      &:after {
        transform:translateX(15vw);
      }
      .page-content {
        opacity:0;
      }
    }
    ~ .menu {
      transform:scale(1) translateY(0px);
      opacity:1;
    }
    ~ .jefflink {
      transform:translateY(200px)
    }
  }
}