@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

.josefin-sans-<uniquifier> {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Josefin Sans';
}

body {
  background-color: #AFC3DE;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background-color: #1A9200;
}

.score-Display {
  color: #fff;
  display: flex;
  margin-top: 24vh;
  font-size: 5vw;
  height: 4vh;
  width: 62%;
  margin-left: 19vw;
  background-color: #24262D;
  justify-content: center;
  border-radius: 10px 10px 0 0;
}

.score-Display p {
  margin-top: 0.5vh;
}

.score-Display #score {
  margin-top: 0.5vh;
  margin-left: 2vw;
  color: #FFA800;
}

h1 {
  display: none;
}

#btnTop {
  background-color: #24262D;
  width: 15vw;
  height: 5vh;
  margin-top: 34vh;
  margin-left: 19.5vw;
  border-radius: 0 0 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#btnTop img{
  font-size: 5vh;
  width: 10vw;
  display: flex;
  margin-top: 1vh;
}
#btnLeft {
  background-color: #24262D;
  width: 15vw;
  height: 3.75vh;
  margin-left: 34.5vw;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 69.5%;
}

#btnLeft img{
  font-size: 5vh;
  width: 10vw;
  display: flex;
}
#btnBottom {
  background-color: #24262D;
  width: 15vw;
  height: 3.75vh;
  margin-left: 49.5vw;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 69.5%;
}

#btnBottom img{
  font-size: 5vh;
  width: 10vw;
  display: flex;
}

#btnRight {
  background-color: #24262D;
  width: 16vw;
  height: 3.75vh;
  margin-left: 64.5vw;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 69.5%;
  border-radius: 0 0 10px 0;
}

#btnRight img{
  font-size: 5vh;
  width: 10vw;
  display: flex;
}

@media (max-width: 700px) {
  canvas{
    display: none;
  }
  .score-Display{
    display: none;
  }
  
  h1{
    display: block;
  }
}