style4.css

@font-face {
    font-family: Jura;
    src: url("./fonts/Jura-Bold.ttf");
}
canvas {
    width: 1000px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 600px;
    border-radius: 30px;
    border: 2px solid black;
}
.cnvc {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh;
}
span {
    font-family: Jura, sans-serif;
    justify-self: center;
    font-size: 40px;
   margin-top: 830px;
   position: absolute;
   color: blue;
   user-select: none;
}
dialog {
    background-color: rgb(58, 56, 56);
    border: rgb(70, 143, 143) 1px solid;
    border-radius: 30px;
    border: 6px solid rgb(70, 143, 143);
    outline: none;
    position: fixed;
}
.dialogs {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 70vh;
}
h1 {
    color: rgb(35, 94, 94);
    font-family: Jura, sans-serif;
    font-size: 30px;
}
h3 {
    margin-top: -800px;
    margin-left: 0px;
    margin-bottom: 40px;
}
button {
    background-color: rgb(70, 143, 143);
    border: 2px solid black;
    border-radius: 20px;
    margin-right: 20px;
    color: rgb(58, 56, 56);
    font-family: Jura, sans-serif;
    transition: 200ms;
    outline: none;
}
button:hover {
    transform: scale(1.03);
    background-color: rgb(77, 133, 133);
}
p {
    font-family: Jura, sans-serif;
    justify-self: center;
    font-size: 40px;
    font-weight: bold;
   position: absolute;
   color: blue;
   user-select: none;
   align-self: end;
}
#pause {
    align-self: start;
    justify-self: left;
    width: 70px;
    height: 60px;
    position: absolute !important;
    z-index: 3;
    pointer-events: auto;
    margin-top: -680px;
    cursor: pointer;
    margin-top: 40px;
    display: inline;
    position: absolute;
}
#deadModal {
  justify-self: center;
}
a {
    text-decoration: none;
     color: rgb(70, 143, 143);
     font-size: 20px;
     font-family: Jura;
}
#space {
    position: absolute;
    justify-self: left;
    align-self: self-end;
}
@media screen and (max-width: 1300px) {
    canvas {
        width: 800px;
        height: 550px;
    }
    #pause {
        margin-top: -20px;
    }
}
@media screen and (max-width: 1035px) {
    canvas {
        width: 800px;
        height: 550px;
    }
    #pause {
        margin-top: -30px;
    }
}
@media screen and (max-width: 825px) {
    canvas {
        width: 700px;
        height: 500px;
    } 
}
@media screen and (max-width: 720px) {
    canvas {
        width: 600px;
        height: 400px;
    }
}
@media screen and (max-width: 620px) {
    canvas {
        width: 500px;
        height: 300px;
    }
    #time {
        font-size: 30px;
    }
}
@media screen and (max-width: 520px) {
    canvas {
       justify-self: center;
        width: 450px;
        height: 300px;
    }
}
@media screen and (max-width: 470px) {
    canvas {
        justify-self: center;
         width: 400px;
         height: 300px;
     }
}
@media screen and  (max-width: 420px) {
    canvas {
        justify-self: center;
         width: 300px;
         height: 200px;
     }
}
@media screen and (max-width: 320px) {
    canvas {
        width: 300px;
        height: 300px;
    }
}
@media screen and (max-width: 299px) {
    canvas {
        width: 200px;
        height: 200px;
    } 
    #time {
        font-size: 20px;
    }
    button {
        width: 100px;
    }
}
@media screen and (max-width: 208px) {
    canvas {
        width: 100px;
        height: 100px;
        margin-bottom: 0px;
    }
    #time {
        position: absolute;
        margin-bottom: 20px;
        font-size: 10px;
    }
    button {
        width: 50px;
        font-size: 7px;
    }
}