html,
body {
  margin: 0;
  aspect-ratio: 1;
  display: flex;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

@font-face {
  font-family: 'Lilita One';
  src: url("./dependencies/lilitaOne.ttf");
}

html {
  overflow: hidden;
}

body {
  margin-top: calc((100vmax - 100vmin)/2);
  position: absolute;
}

@media (min-aspect-ratio: 1/1) {

  html,
  body {
    width: initial !important;
    height: 100% !important;
  }

  body {
    margin-top: 0 !important;
    margin-left: calc((100vmax - 100vmin)/2) !important;
  }
}

#bg {
  background-image: url("./img/background2.png");
  background-size: contain;
  width: 100vmin;
  height: 100vmin;
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
}


#drawingBoard {
  width: 55vmin;
  height: 55vmin;
  overflow: hidden;
  position: absolute;
  left: 22.5vmin;
  top: 20vmin;
  border-radius: 7vmin;
}

#barWrapper {
  position: absolute;
  width: 55vmin;
  height: 5vmin;
  left: 36vmin;
  top: 83vmin;
}


#bar {
  background-color: #000066;
  width: 10%;
  height: 100%;
  transition: width ease .4s;
  position: absolute
}

#scoreTxt {
  color: white;
  font-size: 4vmin;
  line-height: 5.5vmin;
  font-family: 'Lilita One';
  position: absolute;
  text-align: center;
  width: 100%;
}

#scoreTxt {
  --stroke-color: #000066;
  --stroke-width: 1vmin;
  text-shadow: calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color),
    calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color);
}

canvas {
  margin-top: -2.5vmin;
  position: absolute;
}

#bin {
  width: 9vmin;
  height: 9vmin;
  background-image: url("img/bin.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 22vmin;
  left: 74.5vmin;
  position: absolute;
  z-index: 2;
}

#camera {
  width: 9vmin;
  height: 9vmin;
  background-image: url("img/camera.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 33vmin;
  left: 74vmin;
  position: absolute;
  z-index: 2;
}