body {
  color:#fcfce9;
  background-color: #1e4131;
  font-size:13pt;
}

a {
  text-decoration: none;
}

/* The row with the drawn card */
.row:first-child {
  text-align: center;
  margin-top: 2rem;
  filter: drop-shadow(#00000055 0.5vw 0.5vw 1vw);
  flex-direction: column;
}

.awarness, .spirit, .fitness, .focus {
  color:#FFFFFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size:contain;
}

.awarness {
  background-color: #7bbf55;
  background-image: url("awareness.png"), linear-gradient(#7bbf55, #458845);
}

.spirit {
  background-color: #ebc53a;
  background-image: url("spirit.png"), linear-gradient(#ebc53a, #c59837);
}

.fitness {
  background-color: #de4429;
  background-image: url("fit.png"), linear-gradient(#de4429, #943533);
}

.focus {
  background-color: #5995d1;
  background-image: url("focus.png"), linear-gradient(#5995d1, #3472bc);
}

#draw_result {
  clear:both;
  width: 40%;
  border-radius: 0rem;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  margin: auto;
  font-size: 24vw;
  float:left;  
}

#draw_challenge {
  width: 40%;
  border-radius: 0rem;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin: auto;
  padding: 1rem;
}

#draw_challenge_icon {
  height: 13vw !important;
}

/* Restrict card size when screen width is over 600px */
@media screen and (min-width: 600px) {
  #draw_result {
    width: 15rem;
    font-size: 9rem;
  }

  #draw_challenge {
    width: 15rem;
  }

  #draw_challenge_icon {
    height: 5rem !important;
  }
}

#odds_awarness, #odds_spirit, #odds_fitness, #odds_focus {
  border-radius: 0.5rem;
}

#odds_awarness {
  background-image: linear-gradient(#7bbf55, #458845);
}

#odds_spirit {
  background-image: linear-gradient(#ebc53a, #c59837);
}

#odds_fitness {
  background-image: linear-gradient(#de4429, #943533);
}

#odds_focus {
  background-image: linear-gradient(#5995d1, #3472bc);
}

.sun {
  background-color: #ecbe2a;
}

.road {
  background-color: #de4429;
}

.mountain {
  background-color: #5995d1;
}

.missing {
  background-color: #474747;
}

#previous_result {
  background-image: none;
}

:root {
  --bs-border-color: #223322;
}