body {
     margin: 0;
     padding: 0;
     text-align: center;
     height: 100vh;
     background-image: linear-gradient(rgb(100, 100, 100), black);
 }

 #canvas {
     max-width: 100%;
     max-height: 100vh;
     margin-top: 50px;
     background-image: linear-gradient(rgb(0, 2, 92), black);
     border-top: 8px solid rgb(121, 0, 0);
     border-left: 8px solid rgb(216, 0, 0);
     border-right: 8px solid rgb(216, 0, 0);
 }

 #start-button {
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-style: solid;
     border-width: 2px;
     border-color: red;
     border-radius: 50px;
     padding: 5px;
     width: 150px;
     margin-top: 20px;
     background: blue;
     color: yellow;
     font-weight: 700;
     font-family: comic sans MS;
     text-shadow: 2px 2px 1px black;
     box-shadow: 8px 8px 18px black;
     cursor: pointer;
     display: none;
 }

 h1 {
     position: absolute;
     top: 26%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 40px;
     font-family: comic sans MS;
     color: rgb(255, 217, 0);
     text-shadow: 3px 3px 4px rgb(255, 0, 0);
     z-index: 10;
     display: flex;
 }

 #left-button {
     position: absolute;
     top: 50%;
     left: 42%;
     transform: translate(-50%, -50%);
     opacity: .2;
     /* Disable selection on Safari browsers */
     -webkit-touch-callout: none;
     /* Disable selection on Safari browsers */
     -webkit-user-select: none;
     /* Disable selection on Firefox */
     -moz-user-select: none;
     /* Disable selection on IE/Edge */
     -ms-user-select: none;
     /* Disable selection on other browsers */
     user-select: none;
     display: none;
 }

 #right-button {
     position: absolute;
     top: 50%;
     left: 58%;
     transform: translate(-50%, -50%);
     opacity: .2;
     /* Disable selection on Safari browsers */
     -webkit-touch-callout: none;
     /* Disable selection on Safari browsers */
     -webkit-user-select: none;
     /* Disable selection on Firefox */
     -moz-user-select: none;
     /* Disable selection on IE/Edge */
     -ms-user-select: none;
     /* Disable selection on other browsers */
     user-select: none;
     display: none;
 }

 .button {
     /* Disable selection on Safari browsers */
     -webkit-touch-callout: none;
     /* Disable selection on Safari browsers */
     -webkit-user-select: none;
     /* Disable selection on Firefox */
     -moz-user-select: none;
     /* Disable selection on IE/Edge */
     -ms-user-select: none;
     /* Disable selection on other browsers */
     user-select: none;
 }

 /* @media all and (min-width: 2000px) {
     #left-button {
         left: 42%;
         display: none;
     }

     #right-button {
         left: 58%;
         display: none;
     }
 } */

 @media all and (max-width: 1800px) {
     #left-button {
         left: 42%;
         display: flex;
     }

     #right-button {
         left: 58%;
         display: flex;
     }

 }

 @media all and (max-width: 1600px) {
     #left-button {
         left: 41%;
     }

     #right-button {
         left: 59%;
     }

 }

 @media all and (max-width: 1400px) {
     h1 {
         top: 32%;
     }

     #start-button {
         top: 68%;
     }

     #left-button {
         left: 40%;
     }

     #right-button {
         left: 60%;
     }

 }

 @media all and (max-width: 1200px) {
     #left-button {
         left: 38%;
     }

     #right-button {
         left: 62%;
     }

 }

 @media all and (max-width: 1000px) {
     #left-button {
         left: 35%;
     }

     #right-button {
         left: 65%;
     }

 }

 @media all and (max-width: 800px) {
     #left-button {
         left: 30%;
     }

     #right-button {
         left: 70%;
     }
 }

 @media all and (max-width: 600px) {
     #left-button {
         left: 25%;
     }

     #right-button {
         left: 75%;
     }
 }

 @media all and (max-width: 500px) {
     #left-button {
         left: 21%;
     }

     #right-button {
         left: 79%;
     }
 }

 @media all and (max-width: 400px) {
     #left-button {
         top: 60%;
         left: 12%;
     }

     #right-button {
         top: 60%;
         left: 88%;
     }
 }