.unset {
  width: unset !important;
}

@media only screen and (min-width: 2800px) {
  #screenwrapper:fullscreen {
    .button, .legal, .difficulty, .button-diff, .button-back {
      font-size: 56px !important;
    }

    #legaltext *, #instructions *, #game-over *, #you-win * {
      font-size: 48px !important;
    }

    .buttoncontainer {
      width: 1000px;
    }

    .sharkie {
      width: 290px;
      height: 290px;
    }
  
    .arrows {
      width: 290px;
      height: 210px;
    }
  
    .d-key {
      width: 130px;
      height: 130px;
    }
  
    .fish {
      width: 260px;
      height: 260px;
    }
  
    .space-bar {
      width: 535px;
      height: 130px;
    }

    .overlay-button {
      height: 140px;
      width: 140px;      
    }

    #game-over img:not(.trophy1,.trophy2),
    #you-win img:not(.trophy1,.trophy2) {
      width: 1400px;
      height: 270px;
    }

    .trophy1 {
      height: 380px;
      width: 380px;
      top: 200px;
      left: -550px;
    }

    .trophy2 {    
      height: 380px;
      width: 380px; 
      left: 550px; 
      top: 200px
    }

    .tomb {
      top: 225px !important;
    }
  }
}

@media only screen and (max-width: 750px) {
    main,
    #menu,
    #instructions,
    #you-win,
    #game-over, 
    #screenwrapper,   
    #legal-terms {
      width: 100%;
    }  
    
    .button-back {
      font-size: 20px;
    }

    .button-back {
      line-height: 45px;
    }
    
    main {
      background-image: none;
    }
  
    .legal {
      font-size: 16px;
    }

    .headline,
    #fullscreen-button {
      display: none;
    }
    
    #game-over img:not(.trophy1,.trophy2),
    #you-win img:not(.trophy1,.trophy2) {
      width: 400px;
      height: 70px;
    }

    .sharkie {
      width: 90px;
      height: 90px;
    }
  
    .arrows {
      width: 90px;
      height: 60px;
    }
  
    .d-key {
      width: 30px;
      height: 30px;
    }
  
    .fish {
      width: 60px;
      height: 60px;
    }
  
    .space-bar {
      width: 135px;
      height: 30px;
    }
  }
  
  @media only screen and (max-width: 660px) {
    canvas,
    #screenwrapper,
    #canvaswrapper {
      width: 100vw;
    }

    main,
    canvas,
    #screenwrapper,
    .in-main {
      border-radius: 0px !important;
    }
  }
  
  @media only screen and (max-height: 510px) {
    canvas,
    main,
    #menu,
    #instructions,
    #you-win,
    #game-over,
    #screenwrapper,
    #legal-terms {
      height: 100vh;
    }

    .headline,
    #fullscreen-button {
      display: none;
    }

    .legal {
      font-size: 16px;
    }

    .button, .button-diff {
      font-size: 26px;
    }

    main {
      background-image: none;
    }

    #game-over img:not(.trophy1,.trophy2),
    #you-win img:not(.trophy1,.trophy2) {
      width: 400px;
      height: 70px;
    }

    .trophy1 {
      height: 80px;
      width: 80px;
      top: -30px
    }

    .trophy2 {    
      height: 80px;
      width: 80px;  
      top: -30px
    }

    .tomb {
      top: 25px !important;
    }

    .sharkie {
      width: 90px;
      height: 90px;
    }
  
    .arrows {
      width: 90px;
      height: 60px;
    }
  
    .d-key {
      width: 30px;
      height: 30px;
    }
  
    .fish {
      width: 60px;
      height: 60px;
    }
  
    .space-bar {
      width: 135px;
      height: 30px;
    }
  }
  
  @media only screen and (orientation: portrait) {
    .in-main,
    canvas,
    #menu {
      display: none !important;
    }

    canvas,
    main,
    #menu,
    #instructions,
    #you-win,
    #game-over,
    #screenwrapper,
    #legal-terms {
      width: 100%;
    }

    .headline,
    #overlay {
      display: none !important;
    }

    main,
    canvas,
    .in-main,
    #screenwrapper {
      border-radius: 0px;
    }

    #landscape {
      display: flex;
    }
  }
  
  @media only screen and (max-height: 800px) {
    .headline, #fullscreen-button {
      display: none;
    }
  }  

  .arrow-up-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  
  #action-wrapper {
    padding-right: 35px;
    padding-bottom: 10px;
    display: flex;
    gap: 20px;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  
  ::-webkit-scrollbar-track {
    border-radius: 10px;
    margin-top: 20px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #cdcdcd;
    border-radius: 10px;
  }