* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

.screen-box {
  position: absolute;
  display: none;
  flex-direction: column;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 20px;
  width: 40vw;
  height: 20vh;
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.screen-box.show {
  display: flex;
}

.screen-background {
  display: none;
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
}

.screen-background.show {
  display: unset;
}

button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.squares {
  display: block;
  width: fit-content;
}

.square {
  margin: 10px;
  border-radius: 20px;
  width: calc(50vw - 20px);
  height: calc(50vh - 20px);
}

.row {
  display: flex;
}

.orange {
  background: hsl(39, 100%, 48%);
}

.orange.highlight {
  background: hsl(42, 100%, 60%);
}

.blue {
  background: hsl(240, 100%, 45%);
}

.blue.highlight {
  background: hsl(240, 100%, 62%);
}

.red {
  background: hsl(0, 100%, 35%);
}

.red.highlight {
  background: hsl(0, 100%, 50%);
}

.green {
  background: hsl(120, 100%, 23%);
}

.green.highlight {
  background: hsl(120, 100%, 35%);
}

.logo {
  background: purple;
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  width: max(13vw, 13vh);
  height: max(13vw, 13vh);
  margin: auto;
  border-style: solid;
  border-width: 0.5vh;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: larger;
}

.logo.mobile {
  width: max(15vw, 15vh);
  height: max(15vw, 15vh);
}

.logo-under {
  background: white;
  position: absolute;
  left: 50vw;
  top: 50vh;
  transform: translate(-50%, -50%);
  width: max(16vw, 16vh);
  height: max(16vw, 16vh);
  border-radius: 100%;
}

.logo-under.mobile {
  width: max(18vw, 18vh);
  height: max(18vw, 18vh);
}