button:hover {
  cursor: pointer;
}

h1, label {
  user-select: none;
}

html, body {
  background: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial;
}

#canvas_div {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

#canvas {
  display: flex;
  flex-grow: 0;
  width: 100%;
  height: 100%;
  margin: auto;
}

#coords {
  position: absolute;
  left: 1vw;
  bottom: max(-3vh, -3vw);
  color: white;
  font-family: Impact;
  font-size: min(6vh, 6vw);
  overflow-wrap: anywhere;
}

#konami_progress {
  position: absolute;
  right: 5vw;
  bottom: max(-1vh, -1vw);
  color: rgba(255, 255, 255, 0.5);
  font-size: min(4vh, 4vw);
}

#sorting_algos_attribution {
  position: absolute;
  left: 1vw;
  top: 0;
  color: white;
  font-size: min(2vh, 2vw);
  overflow-wrap: anywhere;
  user-select: auto;
}

.popup {
  position: absolute;
  left: 5%;
  top: 8%;
  background-color: rgba(0, 0, 0, 0.5);
  width: calc(90% - 6.2vw);
  height: calc(84% - 5.2vw);
  border-radius: 2vw;
  border: 0.6vw solid rgba(0, 0, 0, 0.5);
  padding: 2vw 2.5vw 2vw;
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: 1.1vw;
  color: white;
  gap: 1vw;
}

.popup_header {
  align-self: center;
  font-size: 2vw;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1vw;
  align-items: flex-end;
}

.flex-vertical {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.2vw;
}

.flex-vertical-2 {
  gap: 0.4vw;
}

select, input[type = text], input[type = number], button {
  background-color: black;
  color: white;
  font-size: 1.3vw;
  border: 0.2vw solid white;
  border-radius: 0.5vw;
  padding: 0.3vw;
}

input[type = checkbox] {
  width: 1.7vw;
  height: 1.7vw;
  margin-bottom: 0.38vw;
}

#proceed_btn {
  align-self: center;
}

#settings_btn, #settings_close_btn, #remarketing_close_btn, #remarketing_popup_phase_2_back_btn {
  position: absolute;
  border: none;
  background: none;
  padding: 0;
  width: 3vw;
  height: 3vw;
}

#settings_btn {
  bottom: 0.5vw;
  right: 0.5vw;
}

#settings_close_btn, #remarketing_close_btn {
  right: 1vw;
  top: 1vw;
}

#remarketing_popup_phase_2_back_btn {
  left: 1vw;
  top: 1vw;
  border: 0.3vw solid white;
  width: auto;
  padding: 0.4vw;
}

#settings_btn svg, #settings_close_btn svg, #remarketing_close_btn svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.remarketing_btn {
  background: rgb(5, 150, 247);
  border: none;
  border-radius: 0.3vw;
  padding: 0.5vw;
}

#remarketing_popup {
  align-items: stretch;
  width: calc(90% - 1.2vw);
  padding: 2vw 0 2vw;
}

.remarketing_popup_phases {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1vw;
  font-size: 1.1vw;
  color: white;
  overflow: auto;
}

.remarketing_popup_phases h1, .remarketing_popup_phases button {
  align-self: center;
}

.remarketing_popup_phases p {
  margin: 0 2vw 0;
}

.dark_mode_scroll {
  overflow: auto;
  scrollbar-color: #333 #111;
}

#remarketing_popup_phase_2 p {
  font-size: 1.5vw;
  line-height: 200%;
}

#remarketing_btn_container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1vw;
}