.container
  .scores
    .score
      .title
        p 1UP
      .value
        p 2800
    .score
      .title
        p HI-SCORE
      .value
        p 280000
    .score
      .title
        p Daily CSS Images
      .value
        p 12 (HAMBURGER)
    .score
      .title.pepper
        p Pepper
      .value
        p 5      

  .game
    .row
      .flex
        .ladder      
        .bump-large
          .bun-top
        .ladder
            .hotdog.one
        .split-ladder
        .ladder
        .bump-large
          .bun-top
          .lettuce
        .ladder
    .row
      .flex      
        .bump
        .bump-large
          .lettuce      
        .ladder
        .bump
        .bump       
        .bump
        .ladder
           .egg
        .bump-large
        .ladder      
    .row
      .flex
        .bump      
        .bump-large
          .beef.one
        .ladder
        .bump
        .bump
          .mrpepper
            .hat              
            .face
            .body
              span.arm.left
              span.arm.right
            .legs
        .bump
        .ladder
        .bump-large
          .beef.two
    .row
      .flex
        .ladder      
        .bump-large
          .bun-bottom
        .ladder
        .bump
        .ladder
        .bump
        .ladder
        .bump-large
           .bun-bottom
        .ladder
          .hotdog.two

body {
  font-family: monospace;
  font-size: 24px;

  background: black;
}

.container {
  overflow: hidden;

  width: 780px;
  margin: auto;
}

.game {
  width: 100%;
  margin: 10% auto 0 auto;
}

.scores {
  display: flex;

  justify-content: space-between;
}

.title {
  color: red;
}

.score {
  text-align: right;

  color: white;
  & p {
    margin: 0;
    padding: 0;
  }
}

.pepper {
  color: #00fb05;
}

.row {
  position: relative;

  height: 120px;

  border: 10px royalblue solid;
  border-right: none;
  border-bottom: none;
  border-left: none;
  &:nth-child(4) {
    border-bottom: 10px royalblue solid;
  }
}

.flex {
  display: flex;

  width: 100%;
  height: 100%;
}

.ladder {
  position: relative;

  width: 7%;
  height: 100%;
  margin-top: -10px;

  border-top: 10px cyan solid;
  border-bottom: 10px cyan solid;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 1%,
    rgba(0, 0, 0, 0) 2%,
    rgba(0, 0, 0, 0) 3%,
    rgb(0, 0, 0) 4%
  );
}

.split-ladder {
  position: relative;

  width: 7%;
  height: 100%;

  border-right: 55px black solid;
  border-left: 55px black solid;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(0, 0, 0) 0%,
    rgb(0, 0, 0) 1%,
    rgba(0, 0, 0, 0) 2%,
    rgba(0, 0, 0, 0) 3%,
    rgb(0, 0, 0) 4%
  );
}

.bump-large {
  position: relative;

  width: 25%;
  height: 100%;

  background-color: black;
}

.bump {
  position: relative;

  width: 7%;
  height: 100%;

  background-color: black;
}

.bump-slim {
  position: relative;

  width: 4%;
  height: 100%;

  background-color: black;
}

.bun-top {
  position: absolute;
  top: -40px;

  width: 100%;
  height: 40px;

  border-radius: 100% 100% 0 0;
  background-color: wheat;
  background-image: linear-gradient(
    to top,
    rgb(245, 212, 96) 55%,
    rgb(245, 122, 40) 100%
  );
}

.bun-bottom {
  position: absolute;
  bottom: -15px;

  width: 100%;
  height: 30px;

  border-radius: 0 0 40% 40%;
  background-color: wheat;
  background-image: linear-gradient(
    to bottom,
    rgb(245, 212, 96) 80%,
    rgb(245, 122, 40) 100%
  );
}

.beef {
  position: absolute;
  z-index: 5;
  bottom: -10px;

  width: 100%;
  height: 40px;

  border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
  background-color: brown;
  background-image: linear-gradient(
    to bottom,
    rgb(108, 67, 29) 0%,
    rgb(152, 80, 25) 50%,
    rgb(108, 67, 29) 100%
  );
}

.beef.one {
  animation: fall 3s 1s 1 forwards;
}

.beef.two {
  animation: fall2 3s 6.5s 1 forwards;
}
.lettuce {
  position: absolute;
  z-index: 10;
  bottom: -10px;

  width: 100%;
  height: 20px;

  border: 4px darkgreen solid;
  border-radius: 100%;
  background-color: #00c400;
  &:after {
    position: absolute;
    z-index: 9;

    display: inline-block;

    width: 100%;
    height: 50%;

    content: "";
    transform: rotate(-7deg);

    border: 3px darkgreen dashed;
    border-radius: 50%;
    background-color: #00c400;
  }
  &:before {
    position: absolute;
    z-index: 9;
    left: 10%;

    display: inline-block;

    width: 90%;
    height: 50%;

    content: "";
    transform: rotate(7deg);

    border: 3px darkgreen dashed;
    border-radius: 25%;
    background-color: #00c400;
  }
}

.hotdog {
  position: relative;
  z-index: 30;

  width: 50%;
  height: 75%;
  margin: auto;

  transform: translateY(50%);
  &:before {
    position: absolute;
    top: 0;
    left: 25%;

    display: inline-block;

    width: 50%;
    height: 50%;

    content: "";
    transform: rotate(-23deg);

    border: 1px solid black;
    border-right: none;
    border-bottom: none;
    border-radius: 60% 60% 100% 70%;
    background-color: #980602;
    background-color: #980602;
  }
  &:after {
    position: absolute;
    bottom: 15%;
    left: 17%;

    display: inline-block;

    width: 57%;
    height: 50%;

    content: "";
    transform: rotate(25deg);

    border: 1px solid black;
    border-top: none;
    border-right: black;
    border-left: black;
    border-radius: 60% 60% 70% 60%;
    background-color: #980602;
    background-color: #980602;
  }
  &.one {
    animation: move 8s infinite;
    animation-direction: reverse;
  }
  &.two {
    animation: move-squash 8s 1s 1 forwards;
  }
}

.egg {
  position: absolute;
  z-index: 20;
  top: 22%;
  left: 25%;

  width: 50%;
  width: 150%;
  height: 75%;
  height: 75%;

  animation: left-right 15s infinite;

  border-radius: 78% 81% 100% 75%;
  background-color: white;
  &:after {
    position: absolute;
    bottom: 18%;
    left: 27%;

    display: inline-block;

    width: 50%;
    height: 50%;

    content: "";
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);

    border-radius: 60% 60% 70% 60%;
    background-color: yellow;
  }
}

.mrpepper {
  position: absolute;
  z-index: 20;
  bottom: 15%;
  left: 12%;

  width: 75%;
  height: 33%;

  animation: left-right 8s 1 forwards;

  background-color: white;
  & .hat {
    position: relative;
    z-index: 40;
    left: 0;

    width: 100%;
    height: 33%;

    text-align: center;

    background-color: white;
    &:after {
      font-size: 0.5em;

      display: block;

      content: "P";
      transform: translateY(-5%);

      color: red;
    }
    &:before {
      position: absolute;
      top: 0;
      left: -10%;

      width: 120%;
      height: 50%;

      content: "";

      border-radius: 20%;
      background-color: white;
    }
  }
  & .face {
    position: relative;
    left: 0;

    width: 100%;
    height: 55%;

    border-radius: 100%;
    background-color: rgb(255, 118, 80);
    &:after {
      position: absolute;
      top: 33%;
      left: 25%;

      display: block;

      width: 12%;
      height: 25%;

      content: "";

      background-color: orange;
    }
    &:before {
      position: absolute;
      top: 33%;
      right: 25%;

      display: block;

      width: 12%;
      height: 25%;

      content: "";

      background-color: orange;
    }
  }
  & .body {
    position: relative;
    left: 10%;

    width: 80%;
    height: 33%;

    background-color: white;
    & .arm {
      position: absolute;

      width: 50%;
      height: 50%;

      background-color: white;
    }
    &:after {
      position: absolute;
      top: 33%;
      left: 25%;

      display: block;

      width: 12%;
      height: 25%;

      content: "";

      background-color: orange;
    }
    &:before {
      position: absolute;
      top: 33%;
      right: 25%;

      display: block;

      width: 12%;
      height: 25%;

      content: "";

      background-color: orange;
    }
  }
  & .legs {
    position: relative;
    left: 12%;

    width: 75%;
    height: 20%;

    background-color: red;
    &:after {
      position: absolute;
      top: 50%;
      left: 5%;

      display: block;

      width: 25%;
      height: 100%;

      content: "";

      background-color: green;
    }
    &:before {
      position: absolute;
      top: 50%;
      right: 5%;

      display: block;

      width: 25%;
      height: 100%;

      content: "";

      background-color: green;
    }
  }
}

.left {
  left: -50%;

  transform: rotate(-45deg);

  border-radius: 50% 10% 10% 50%;
}
.right {
  right: -50%;

  transform: rotate(45deg);

  border-radius: 10% 50% 50% 10%;
}

@keyframes move {
  0% {
    transform: translate(0, 50%);
  }
  25% {
    transform: translate(0, -100%);
  }
  50% {
    transform: translate(-900%, -100%);
  }
  75% {
    transform: translate(-900%, 50%);
  }
  100% {
    transform: translate(0, 50%);
  }
}
@keyframes move-squash {
  0% {
    height: 75%;

    transform: translate(0, 50%);
  }
  25% {
    height: 75%;

    transform: translate(0, -100%);
  }
  50% {
    height: 75%;

    transform: translate(-900%, -100%);
  }
  75% {
    height: 75%;

    transform: translate(-900%, 50%);
  }
  90% {
    transform: translate(-450%, 50%);

    opacity: 1;
  }
  100% {
    transform: translate(-450%, 50%);

    opacity: 0;
  }
}

@keyframes left-right {
  0% {
    transform: translateX(500%);
  }
  50% {
    transform: translateX(-1000%);
  }
  100% {
    transform: translateX(500%);
  }
}

@keyframes fall {
  10% {
    transform: translate(0) rotate(5deg);
  }

  50% {
    transform: translate(0, 100%) rotate(0);
  }

  100% {
    transform: translateY(250%);
  }
}

@keyframes fall2 {
  10% {
    transform: translate(0) rotate(-5deg);
  }

  50% {
    transform: translate(0, 100%) rotate(0);
  }

  100% {
    transform: translateY(250%);
  }
}