style.css

@keyframes octocat-wave {
    0%, 100% { transform: rotate(0) }
    20%, 60% { transform: rotate(-25deg) }
    40%, 80% { transform: rotate(10deg) }
}
.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
}

@font-face {
  font-family: Benguiat Bold;
  src: url("./docs/assets/fonts/Benguiat Bold.ttf");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Benguiat Bold;
  color: red;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('./docs/assets/images/tv_nobg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
.hidden {
  visibility: hidden;
}
#title-screen {
  background-image: url('./docs/assets/images/tv_nobg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#game-title {
  top: 21%;
  right: 45%;
  position: absolute;
  width: 320px;
}
#jump {
    position: absolute;
    font-size: 35px;
    top: 40%;
    right: 51%;
}
#title-button {
  position: absolute;
  top: 52%;
  right: 46.5%;
  font-size: 28px;
  flex-wrap: wrap;
  border: 4px solid red;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
}
.demon_Left {
  position: absolute;
  right: 64.5%;
  bottom: 41.5%;
  width: 75px;
}
.demon_Right {
  position: absolute;
  left: 53.5%;
  bottom: 41%;
  width: 75px;
}
#zToJump_Start {
  position: absolute;
  font-size: 14px;
  top: 73%;
  right: 45%
}
.level_P {
  position: absolute;
  font-size: 38px;
  top: 25%;
  right: 44%;
}
#btn-normal {
  position: absolute;
  top: 50%;
  left: 29%;
  font-size: 24px;
  flex-wrap: wrap;
  border: 4px solid red;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
}
#btn-upsideDown {
  position: absolute;
  top: 50%;
  right: 39%;
  font-size: 24px;
  flex-wrap: wrap;
  border: 4px solid red;
  padding: 10px;
  transform: rotate(180deg);
  border-radius: 50px;
  cursor: pointer;
}
#btn-dustin {
  position: absolute;
  top: 55%;
  left: 31%;
  font-size: 24px;
  flex-wrap: wrap;
  border: 4px solid red;
  border-radius: 50px;
  padding: 10px;
  cursor: pointer;
}
#btn-hopper {
  position: absolute;
  top: 55%;
  right: 42%;
  font-size: 24px;
  flex-wrap: wrap;
  border: 4px solid red;
  padding: 10px;
  border-radius: 50px;
  cursor: pointer;
}
.dustin_Left_Level {
  position: absolute;
  left: 33%;
  bottom: 45%;
  width: 65px;
}
.hopper_Right_Level {
  position: absolute;
  width: 45px;
  bottom: 45%;
  right: 45%;
}
#zToJump_Level {
    position: absolute;
    font-size: 14px;
    top: 73%;
    right: 46%
}
.demon_Left_Level {
  position: absolute;
  left: 32.8%;
  bottom: 49.9%;
  width: 50px;
}
.demon_Right_Level {
  transform: rotate(180deg);
  position: absolute;
  width: 50px;
  bottom: 36.6%;
  right: 45%;
}
#game-over-screen {
  background-image: url('./docs/assets/images/tv_nobg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#game-over {
  font-size: 62px;
  position: absolute;
  top: 26%;
  right: 41%;
}
.try-again-button {
  position: absolute;
  font-size: 22px;
  top: 46%;
  right: 50.5%
}
#restart-button {
  position: absolute;
  top: 52%;
  right: 54%;
  width: 60px;
  border-radius: 10px;
  cursor: pointer;
}
#canvas {
  border: 1px solid black;
  position: absolute;
  top: 48%;
  left: 44.3%;
  transform: translate(-50%, -50%);
  width: 48vw;
  height: 65vh;
  background-size: cover;
  border-radius: 10px;
}
.first-background{
  background-image: url("./docs/assets/images/pixelart.jpg");
}
.bk_tv {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
.second-background {
  background-image: url("./docs/assets/images/Background_2.gif");
}
#highScores {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  line-height: 4.5vh;
  top: 62vh;
  right: 51.5vw;
}

@media screen and (max-width: 768px) {

  #canvas {
    border: 1px solid black;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 85vh;
    background-size: cover;
    border-radius: 10px;
  }
  #game-title {
    top: 22%;
    right: 40%;
    width: 120px;
  }
  #jump {
    top: 29%;
    right: 48%;
    font-size: 16px;
  }
  #title-button {
    top: 45%;
    right: 37%;
    font-size: 14px;
  }
  #zToJump_Start {
    top: 60%;
    right: 35%;
    left: 34%;
    font-size: 14px;
  }
  .demon_Left {
    right: 53%;
    bottom: 45%;
    width: 0px;
  }
  .demon_Right {
    left: 39%;
    bottom: 56%;
    width: 35px;
  }
  body {
    background-image: url('./docs/assets/images/tv_nobg.jpg');
    background-repeat: no-repeat;
    background-size: 100vw 100vh;
  }
  #title-screen {
    background-image: url('./docs/assets/images/tv_nobg.jpg');
    background-repeat: no-repeat;
    background-size: 0px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .level_P {
    top: 24%;
    right: 38%;
    font-size: 14px;
  }
  #btn-normal {
    top: 36%;
    left: 31%;
    font-size: 14px;
  }
  #btn-upsideDown {
    top: 51%;
    right: 38%;
    font-size: 14px;
  }
  #btn-dustin {
    top: 36%;
    left: 32%;
    font-size: 14px;
  }
  #btn-hopper {
    top: 55%;
    right: 46%;
    font-size: 14px;
    text-align: center;
  }
  .dustin_Left_Level {
    left: 39%;
    bottom: 64%;
    width: 34px;
  }
  .hopper_Right_Level {
    width: 28px;
    bottom: 45%;
    right: 53%;
  }
  #zToJump_Level {
    top: 64%;
    right: 35%;
    left: 34%;
    font-size: 14px;
  }
  .demon_Left_Level {
    left: 40%;
    bottom: 65%;
    width: 35px;
  }
  .demon_Right_Level {
    transform: rotate(180deg);
    width: 35px;
    bottom: 39%;
    right: 53%;
  }
  #game-over-screen {
    background-image: url('./docs/assets/images/tv_nobg.jpg');
    background-repeat: no-repeat;
    background-size: 0px;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #game-over {
    font-size: 38px;
    position: absolute;
    top: 25%;
    right: 63%;
    width: 35px;
  }
  .try-again-button {
    position: absolute;
    font-size: 18px;
    top: 43%;
    right: 41%
  }
  #restart-button {
    position: absolute;
    top: 48%;
    right: 52%;
    width: 35px;
    border-radius: 10px;
  }
  #highScores {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: absolute;
    line-height: 4.5vh;
    top: 52vh;
    right: 40vw;
  }
}

@media screen and (max-height: 410px) {
        #game-title {
          top: 24%;
          right: 45%;
          position: absolute;
          width: 150px;
        }
        #jump {
            position: absolute;
            font-size: 22px;
            top: 41%;
            right: 49%;
        }
        #title-button {
          position: absolute;
          top: 52%;
          right: 43%;
          font-size: 20px;
          flex-wrap: wrap;
          border: 4px solid red;
          border-radius: 50px;
          padding: 10px;
        }
        .demon_Left {
          position: absolute;
          right: 66.5%;
          bottom: 36%;
          width: 50px;
        }
        .demon_Right {
          position: absolute;
          left: 57%;
          bottom: 36%;
          width: 50px;
        }
        #zToJump_Start {
          position: absolute;
          font-size: 10px;
          top: 78%;
          right: 42%
        }
        .level_P {
          top: 29%;
          right: 43%;
          font-size: 20px;
        }
        #btn-normal {
          top: 52%;
          left: 31%;
          font-size: 14px;
        }
        #btn-upsideDown {
          top: 52%;
          right: 38%;
          font-size: 14px;
        }
        #zToJump_Level {
          top: 78%;
          right: 42%;
          font-size: 10px;
        }
        .demon_Left_Level {
          left: 35%;
          bottom: 49%;
          width: 35px;
        }
        .demon_Right_Level {
          transform: rotate(180deg);
          width: 35px;
          bottom: 27%;
          right: 45%;
        }
        #btn-dustin {
          top: 58%;
          left: 33%;
          font-size: 14px;
        }
        #btn-hopper {
          top: 58%;
          right: 42%;
          font-size: 14px;
          text-align: center;
        }
        .dustin_Left_Level {
          left: 35%;
          bottom: 42%;
          width: 42px;
        }
        .hopper_Right_Level {
          width: 28px;
          bottom: 42%;
          right: 46%;
        }
        #game-over {
          font-size: 30px;
          position: absolute;
          top: 28%;
          right: 43%;
        }
        .try-again-button {
          position: absolute;
          font-size: 18px;
          top: 48%;
          right: 48%
        }
        #restart-button {
          position: absolute;
          top: 55%;
          right: 54%;
          width: 35px;
          border-radius: 10px;
        }
        #highScores {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          position: absolute;
          line-height: 6vh;
          top: 65vh;
          right: 49vw;
          font-size: 14px;
        }
}

@media   (min-width: 850px) and (max-width: 1180px),
         (min-height: 420px)and (max-height: 600px) {
        #game-title {
          top: 20%;
          right: 30%;
          position: absolute;
          width: 350px;
        }
        #jump {
            position: absolute;
            font-size: 35px;
            top: 39%;
            right: 40%;
        }
        #title-button {
          position: absolute;
          top: 48%;
          right: 34%;
          font-size: 30px;
          flex-wrap: wrap;
          border: 4px solid red;
          border-radius: 50px;
          padding: 10px;
        }
        .demon_Left {
          position: absolute;
          right: 58%;
          top: 47%;
          width: 75px;
        }
        .demon_Right {
          position: absolute;
          left: 66%;
          top: 47%;
          width: 75px;
        }
        #zToJump_Start {
          position: absolute;
          font-size: 20px;
          top: 65%;
          right: 27%
        }
        .level_P {
          top: 23%;
          right: 29%;
          font-size: 40px;
        }
        #btn-normal {
          top: 45%;
          left: 38%;
          font-size: 24px;
        }
        #btn-upsideDown {
          top: 45%;
          right: 28%;
          font-size: 24px;
        }
        #zToJump_Level {
          top: 65%;
          right: 27%;
          font-size: 20px;
        }
        .demon_Left_Level {
          left: 42%;
          bottom: 55%;
          width: 60px;
        }
        .demon_Right_Level {
          transform: rotate(180deg);
          width: 60px;
          bottom: 41%;
          right: 35%;
        }
        #btn-dustin {
          top: 45%;
          left: 38%;
          font-size: 24px;
        }
        #btn-hopper {
          top: 45%;
          right: 28%;
          font-size: 24px;
          text-align: center;
        }
        .dustin_Left_Level {
          left: 41%;
          bottom: 55%;
          width: 50px;
        }
        .hopper_Right_Level {
          bottom: 55%;
          width: 35px;
          right: 32%;
        }
        #game-over {
          font-size: 50px;
          position: absolute;
          top: 23%;
          right: 32%;
        }
        .try-again-button {
          position: absolute;
          font-size: 32px;
          top: 38%;
          right: 38%
        }
        #restart-button {
          position: absolute;
          top: 45%;
          right: 44%;
          width: 65px;
          border-radius: 10px;
        }
        #highScores {
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          position: absolute;
          line-height: 4vh;
          top: 55vh;
          right: 39vw;
          font-size: 22px;
        }
}