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

body {
  --current-colour: black;

  min-height: 100dvh;
  padding: 75px;
  background-color: rgb(255, 255, 255);
  display: grid;
}

.left h1,
.left h2,
.agency-selected {
  font-family: monospace;
}

.left h1 {
  color: rgb(41, 62, 163);
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 25px;
}

.left h2 {
  margin-bottom: 25px;
  font-size: 0.9rem;
  font-style: italic;
  color: rgb(176, 176, 176);
}

.left {
  /* display: flex; */
  flex-direction: column;
}

.timer {
  margin-top: 40px;
  margin-bottom: 30px;
  font-family: monospace;
  font-size: 3.5rem;
  font-weight: bold;
}

.agency-selected {
  font-size: 1.2rem;
  color: white;
  background-color: rgb(41, 62, 163);
  padding: 10px;
}

.container {
  display: grid;
  grid-template-columns: 42ch 1fr;
  gap: 100px;
}

.row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.unit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-color: rgb(248, 248, 248);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.353);
  padding: 10px;
  border-radius: 20px;
}

.unit,
.agency {
  display: grid;
  place-content: center;
  border-radius: 20px;
  padding: 10px;
  transition: all 0.1s;
}

.unit {
  border: 4px solid rgba(0, 0, 0, 0);
}

.unit img,
.agency img,
.character-container img {
  width: 80px;
  pointer-events: none;
  user-select: none; /* Standard syntax */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
}

.agency img {
  width: 80px;
  height: auto;
}

.unit:hover {
  cursor: pointer;
  /* border-color: pink; */
  background-color: rgb(236, 236, 236);
}

.unit-selected {
  background-color: rgb(214, 214, 214);
}

.play-btn,
.game-btns button {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none; /* Removes iOS styling */
  -moz-appearance: none;
  appearance: none;
  font-family: monospace;
}

.game-btns {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.game-btns .finish,
.game-btns .restart,
.game-btns .quit {
  font-size: 1.6rem;
  padding: 10px;
  width: 50%;
}

.game-btns .finish {
  background-color: rgba(182, 182, 182, 1);
  cursor: auto;
}

.game-btns .restart {
  background-color: rgb(84, 240, 227);
}

.game-btns .restart:hover {
  background-color: rgb(64, 207, 195);
}

.game-btns .quit {
  background-color: red;
}

.game-btns .quit:hover {
  background-color: rgb(189, 23, 23);
}

.play-btn {
  background-color: rgb(59, 246, 59);
  color: black;
  padding: 10px;
  font-size: 1.5rem;
  margin-top: 50px;
}

.play-btn:hover {
  background-color: rgb(19, 206, 19);
}

.colour-info,
.colour-info-small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.current-colour,
.current-colour-small {
  font-family: monospace;
  font-size: 1.5rem;
  color: white;
  /* height: 60px; */
  padding: 10px;
  /* background-color: black; */
  border: 3px solid black;
}

.colour-info p,
.colour-info-small p {
  font-family: monospace;
  font-size: 2rem;
  font-weight: bold;
}

.character-container {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  border: 4px solid rgba(0, 0, 0, 0);
  background-color: rgb(248, 248, 248);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.353);
  padding: 30px;
  border-radius: 20px;
}

.character {
  border-radius: 10px;
  border: 5px solid rgba(0, 0, 0, 0);
  padding: 10px;
}

.character:hover {
  --border-colour: var(--current-colour);

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.627);
  border-color: var(--border-colour);
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}

.selected {
  border: 5px solid rgba(0, 0, 0, 0);
}

.character-container img {
  width: 80px;
}

.end {
  all: unset;
  padding: 10px;
  border: 3px solid rgba(0, 0, 0, 0);
  border-radius: 20px;
}

.correct,
.correct:hover {
  background-color: greenyellow;
}

.wrong,
.wrong:hover {
  background-color: red;
}

.score {
  font-family: monospace;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.none {
  display: none;
}

.colour-name,
.colour-name-small {
  font-family: monospace;
  font-size: 1.1rem;
}

.corrections {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 50px;
}

.correct-message {
  font-family: monospace;
  font-size: 1.3rem;
}

.links {
  display: flex;
  gap: 20px;
  margin-top: 50px;
}

.links img {
  width: 38px;
}

.name-end {
  background-color: black;
  color: white;
}

.colour-info-small {
  height: 0;
  overflow-y: hidden;
}

@media (width < 1150px) {
  .container {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .agency-selected {
    max-width: 42ch;
  }

  .game-btns {
    flex-direction: row;
  }

  .game-btns .finish,
  .game-btns .restart,
  .game-btns .quit {
    font-size: clamp(1rem, -0.875rem + 8.333vw, 1.6rem);
    padding: 10px;
    width: unset;
  }
}

@media (width < 680px) {
  body {
    padding: 30px;
  }

  .colour-info {
    height: 0;
    overflow-y: hidden;
  }

  .colour-info-small {
    height: auto;
    overflow-y: auto;
    position: sticky;
    bottom: 10px;
    margin-block: 20px;
    background-color: rgb(255, 255, 255);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 5px black;
  }

  .character-container {
    justify-content: center;
  }

  .timer {
    margin-top: 0;
  }

  .unit-row {
    justify-content: center;
  }

  .row {
    align-items: flex-start;
  }
}