/* font-family: "Audiowide", sans-serif;
font-weight: 400;
font-style: normal; */
/* 

font-family: "Jura", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#canvas1 {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background: url("assets/background1920x1080.png");
  background-size: cover;
  background-position: center;
}
.controls {
  position: absolute;
  left: 5px;
  bottom: 6px;
  display: flex;
  flex-direction: column;
}
.controls > button {
  width: 50px;
  height: 50px;
  background: transparent;
  color: azure;
  font-family: "Audiowide", sans-serif;
  font-weight: 400;
  font-style: normal;
  border: 1px solid azure;
  margin: 5px;
  box-shadow: 1px 1px 1px rgb(0, 0, 0);
  text-shadow: 1px 1px 1px rgb(0, 0, 0);
  transition: 0.3s;
}
.controls > button:hover,
.controls > button:active,
.controls > button:focus {
  background: purple;
  box-shadow: 4px 4px 4px rgb(0, 0, 0);
  text-shadow: 2px 2px 2px rgb(0, 0, 0);
}
.assets{
   display: none;
}
@media screen and (max-width: 900px) {
  #canvas1 {
    background: url("assets/background1080x1920.png");
    background-size: cover;
    background-position: center;
  }
}