/* BASIC STYLES HERE */

body {
  background-image: url(https://codeworksacademy.com/jungle_jumble_lab/assets/img/fruits.svg);
  padding: 2em 3em;
}

h1 {
  text-shadow: -2px 2px var(--bs-danger);
}

h2,
b {
  text-shadow: 2px 2px var(--bs-warning);
}

h3 {
  text-shadow: 2px 2px var(--bs-success);
}

.jumble-card {
  background-color: white;
  border: 3px solid black;
  border-radius: 15px;
  padding: 1em 2em;
}

header>.jumble-card {
  width: fit-content;
  box-shadow: 10px -10px var(--bs-danger);
}

#jumble-body {
  min-height: 20dvh;
}

#jumble-game-input {
  min-height: 40dvh;
}

#jumbles-list {
  max-height: 23dvh;
  overflow-y: auto;
}

#jumble-game .jumble-card:first-child {
  box-shadow: -10px -10px var(--bs-success);
}

#jumble-game .jumble-card:last-child {
  box-shadow: -10px 10px var(--bs-info);
}

#jumble-game p {
  user-select: none;
}

.col-md-5 .jumble-card {
  box-shadow: 10px 10px var(--bs-warning);
}

marquee span {
  user-select: none;
  text-shadow: 0 0 5px black;
}