.sky {
  text-align: center;
  background: rgb(161, 195, 229);
  background: linear-gradient(180deg, rgba(161, 195, 229, 1) 10%, rgba(213, 230, 247, 1) 97%, rgba(161, 195, 229, 1) 100%);
}

.sky img {
  width: fit-content;
}

.ground {
  text-align: center;
  background: hsl(60, 58%, 76%);
  background: linear-gradient(180deg, rgba(230, 229, 160, 1) 0%, rgba(247, 248, 214, 1) 3%, hsl(60, 58%, 76%) 100%);
  padding-top: 0 !important;
}

.street {
  background-image: url("../images/road.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  min-height: 10em;
}

.subtitle {
  color: #202020;
  font-size: 2em;
}

.parenthetical {
  color: #202020;
  font-size: 1.75em;
}

.deck-contents {
  font-size: 1.5em;
}

.note {
  font-size: 1.3em;
  font-style: italic;
}

.call-to-action {
  text-align: center;
  font-style: italic;
}

.description-block {
  background-color: hsl(60, 58%, 76%)
}

.p-025 {
  padding: 0.25em;
}

.selectable {
  cursor: pointer;
}

.selectable:disabled {
  cursor: not-allowed;
}

/* Durations are doubled from class name and animations have 50% keyframes with 100% value.
 * This is intentional. This allows an element to maintain 'display:block' and be hidden when the class-implied
 * duration. */
.fadein-0-5s {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

.fadein-1s {
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
}

.fadein-2s {
  -webkit-animation: fadein 4s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 4s;
  /* Firefox < 16 */
  -ms-animation: fadein 4s;
  /* Internet Explorer */
  -o-animation: fadein 4s;
  /* Opera < 12.1 */
  animation: fadein 4s;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.fadeout-0-5s {
  -webkit-animation: fadeout 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeout 1s;
  /* Firefox < 16 */
  -ms-animation: fadeout 1s;
  /* Internet Explorer */
  -o-animation: fadeout 1s;
  /* Opera < 12.1 */
  animation: fadeout 1s;
}

.fadeout-1s {
  -webkit-animation: fadeout 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeout 2s;
  /* Firefox < 16 */
  -ms-animation: fadeout 2s;
  /* Internet Explorer */
  -o-animation: fadeout 2s;
  /* Opera < 12.1 */
  animation: fadeout 2s;
}

.fadeout-2s {
  -webkit-animation: fadeout 4s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeout 4s;
  /* Firefox < 16 */
  -ms-animation: fadeout 4s;
  /* Internet Explorer */
  -o-animation: fadeout 4s;
  /* Opera < 12.1 */
  animation: fadeout 4s;
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.pulse {
  -webkit-animation: pulse 2s infinite;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: pulse 2s infinite;
  /* Firefox < 16 */
  -ms-animation: pulse 2s infinite;
  /* Internet Explorer */
  -o-animation: pulse 2s infinite;
  /* Opera < 12.1 */
  animation: pulse 2s infinite;
}

#sidelines-background-glow-aura-opaque,
#defensive-turn-phase-highlight,
#offensive-turn-phase-highlight,
#strategy-pool-turn-phase-highlight {
  -webkit-animation: pulse 1.5s infinite;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: pulse 1.5s infinite;
  /* Firefox < 16 */
  -ms-animation: pulse 1.5s infinite;
  /* Internet Explorer */
  -o-animation: pulse 1.5s infinite;
  /* Opera < 12.1 */
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.66;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 0.66;
  }

  100% {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes pulse {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.66;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 0.66;
  }

  100% {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.66;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 0.66;
  }

  100% {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes pulse {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.66;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 0.66;
  }

  100% {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes pulse {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0.66;
  }

  50% {
    opacity: 0;
  }

  70% {
    opacity: 0.66;
  }

  100% {
    opacity: 1;
  }
}

.hover-glow-remove:hover {
  animation: remove-glow 1s ease-in-out infinite alternate;

}

@keyframes remove-glow {
  from {
    filter: drop-shadow(0 0 0.2em hsla(0, 74%, 50%, 0.95)) drop-shadow(0 0 0.8em hsla(0, 90%, 70%, 0.6));
  }

  to {
    filter: drop-shadow(0 0 0.8em hsla(0, 96%, 17%, 0.68)) drop-shadow(0 0 1.5em hsla(0, 90%, 90%, 0.3));
  }
}

@-webkit-keyframes remove-glow {
  from {
    filter: drop-shadow(0 0 0.2em hsla(0, 74%, 50%, 0.95)) drop-shadow(0 0 0.8em hsla(0, 90%, 70%, 0.6));
  }

  to {
    filter: drop-shadow(0 0 0.8em hsla(0, 96%, 17%, 0.68)) drop-shadow(0 0 1.5em hsla(0, 90%, 90%, 0.3));
  }
}

.hover-glow-add:hover {
  animation: add-glow 1s ease-in-out infinite alternate;
}

@keyframes add-glow {
  from {
    filter: drop-shadow(0 0 0.5em hsla(110, 90%, 40%, 100%));
  }

  to {
    filter: drop-shadow(0 0 2em hsla(110, 60%, 5%, 5%));
  }
}

@-webkit-keyframes add-glow {
  from {
    filter: drop-shadow(0 0 0.5em hsla(110, 90%, 40%, 100%));
  }

  to {
    filter: drop-shadow(0 0 2em hsla(110, 60%, 5%, 5%));
  }
}

.background-arena-highway, .background-arena-rural, .background-arena-suburban, .background-arena-urban {
  background-position: center;
  background-size: cover;
}

.background-arena-highway {
  background-image: url("../images/arenas/Highway.svg");
}

.background-arena-rural {
  background-image: url("../images/arenas/Rural.svg");
}

.background-arena-suburban {
  background-image: url("../images/arenas/Suburban.svg");
}

.background-arena-urban {
  background-image: url("../images/arenas/Urban.svg");
}

.arena-selector {
  display: flex;
  flex-direction: column;
  gap: 1vmin;
}

.arena-selector .selected-arena-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-style: solid;
  border-width: 0.2vmin;
  border-color: hsl(43, 60%, 16%);
  padding: 1vmin;
  border-radius: 0.2vmin;
  background-color: hsla(0, 0%, 95%, 20%);
  box-shadow: inset 0 0 1.0vmin hsl(31, 36%, 32%);
}

.arena-selector .choose-arena-notice {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 1vmin hsl(0, 0%, 100%), 0 0 0.5vmin hsl(0, 0%, 100%), 0 0 0.1vmin hsl(0, 0%, 100%);
}

.arena-selector .selected-arena {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 1.5vmin;
}

.vehicle-distribution {
  background-color: hsla(0, 0%, 98%, 40%);
  border-radius: 1vmin;
  padding: 0.3em;
}

.vehicle-distribution .vehicles-title {
  font-weight: bold;
  text-align: center;
}

.relative-vehicle-distribution {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 2vmin;
}

.arena-selector .selected-arena .selected-arena-svg-wrapper {
  max-height: 15vmin;
  max-width: 15vmin;
}

.arena-selector .selected-arena .selected-arena-svg-wrapper svg {
  height: 100%;
  width: 100%;
}

.arena-selector .arena-selections-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5vmin;
  margin-top: 1vmin;
  background-color: hsla(0, 0%, 85%, 20%);
  border-radius: 1.5vmin;
  border-style: solid;
  border-image-slice: 1;
  /* Fallback color when not animating green hover.*/
  border-color: hsl(86, 78%, 15%);
  border-width: 0.1vmin;
  padding: 0.7vmin;
}

.arena-selector .arena-selections {
  display: flex;
  flex-direction: row;
  gap: 2vmin;
}

.arena-selector .arena-selections .arena-selection {
  max-height: 15vmin;
}

.arena-selector .arena-selections .arena-selection svg {
  height: 100%;
}

.pack-selector .pack-wrapper {
  display: grid;
  grid-template-areas: "one two three";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 0px;
  place-items: center;
  padding: 1vmin;
  border: solid 0.2vmin hsl(43, 60%, 16%);
  border-radius: 0.2vmin;
  background-color: hsla(0, 0%, 95%, 20%);
  box-shadow: inset 0 0 1.0vmin hsl(31, 36%, 32%);
}

.pack-selector .pack-wrapper .pack-empty-notification {
  grid-column-start: 1;
  grid-column-end: 4;
}

.pack-selector .pack-member-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5vmin;
  margin-top: 1vmin;
  border-radius: 1.5vmin;
  border-style: solid;
  border-image-slice: 1;
}

.pack-member-selector {
  border-width: 0.1vmin;
  padding: 0.7vmin;
}

.border-pulse-green {
  animation: border-pulse-neon-green 0.8s ease-in-out infinite alternate;
}

@keyframes border-pulse-neon-green {
  from {
    border-color: hsla(110, 80%, 50%, 100%);
    background-color: hsla(113, 69%, 88%, 0.25);
    box-shadow: inset 0 0 1.0vmin hsl(104, 96%, 55%);
  }

  to {
    border-color: hsla(110, 50%, 30%, 0.6);
    background-color: hsla(113, 70%, 88%, 0.56);
    box-shadow: inset 0 0 0.5vmin hsl(94, 83%, 20%);
  }
}

@-webkit-keyframes border-pulse-neon-green {
  from {
    border-color: hsla(110, 80%, 50%, 100%);
    background-color: hsla(113, 69%, 88%, 0.25);
    box-shadow: inset 0 0 1.0vmin hsl(104, 96%, 55%);
  }

  to {
    border-color: hsla(110, 50%, 30%, 0.6);
    background-color: hsla(113, 70%, 88%, 0.56);
    box-shadow: inset 0 0 0.5vmin hsl(94, 83%, 20%);
  }
}

.pack-selector .choose-ruffian-notice {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 1vmin hsl(0, 0%, 100%), 0 0 0.5vmin hsl(0, 0%, 100%), 0 0 0.1vmin hsl(0, 0%, 100%);
}