html,
body,
#ui-mode,
#ui-flags,
#tutorial-flags {
  height: 100%;
  width: 100%;

  position: relative;

  font-family: "Anta", sans-serif !important;
  font-weight: 400;
  font-style: normal;

  overflow: hidden;

  zoom: scale(1);
}

hr {
  margin: 0;
}

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.skill-icon {
  height: 0.8em;
  transform: translate(-0.15em, -0.08em);
}
.inline-icon {
  height: 1em;
  transform: translate(-0.15em, -0.08em);
}
#modal .inline-icon {
  height: 1em;
  transform: translate(0, -0.08em);
}
.inline-token {
  height: 1em;
  transform: translateY(-0.08em);
}

.stat {
  text-align: center;
  width: 2.5em;
}
.stat span {
  width: 1em;
}

body {
  background-image: url("img/misc/gameBG.jpg");
  background-size: cover;
  background-position: center;
  background-color: grey;
}
body:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url("img/misc/backgroundTile.png") repeat;
  background-size: 400px;
  transform: rotate(-2deg);
  transition: opacity 6s;
}
body.netspace:before {
  opacity: 0;
}

#control-panel {
  border-top-left-radius: 14px;
  border-left: solid 3px black;
  border-top: solid 3px black;
  background-color: white;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
#location-window {
  border-bottom-right-radius: 14px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  box-shadow: 0 0 10px black;
}
#location-buttons {
  border-top-left-radius: 14px;
  background-color: white;
  box-shadow: 0 0 5px black;
}
#menu-button-container {
  border-bottom-right-radius: 14px;
  background-color: white;
  box-shadow: 0 0 5px black;
  z-index: 11000;
}
#card-focused-buttons {
  border-bottom-left-radius: 14px;
  background-color: white;
  /* box-shadow: 0 0 5px black; */
}
.modal-content {
  color: whitesmoke;
  background-color: #0f0f11;
  border-image-slice: 9 9 9 9;
  border-image-width: 15px;
  border-image-outset: 10px;
  border-image-repeat: stretch stretch;
  border-image-source: url("img/misc/fancyBorder.png");
  border-style: solid;
  border-radius: 0 !important;
}
#modal-body-container,
#modal-options,
#ending-options {
  font-family: "Delius", sans-serif;
}
#modal-body-container .inline-icon {
  filter: invert();
}
#card-modal-image.card-image-container {
  box-shadow: 0 0 10px black;
}
#card-focused {
  border-left: solid 3px white;
  border-bottom: solid 3px white;
  border-bottom-left-radius: 14px;
  background-color: black;
  box-shadow: 0 0 5px black;
  transition: transform 0.5s;
  z-index: 100;
}
#card-focused.hidden {
  transform: translateX(96%);
}

#ending-options {
  position: absolute;
}

/* Buttons */
button,
.modal-checkbox {
  color: whitesmoke;
  background-color: #080808;
  border-image-slice: 6 6 6 6;
  border-image-width: 10px;
  border-image-outset: 5px;
  border-image-repeat: stretch stretch;
  border-image-source: url("img/misc/fancyButtonBorder.png");
  border-style: solid;
  border-radius: 0 !important;
  transition: background-color 0.05s;
}
button:hover,
.modal-checkbox:hover {
  color: white;
  background-color: #615292;
}
button:active,
.modal-checkbox:active {
  color: white;
  background-color: #413175;
}
button:disabled,
.modal-checkbox:disabled {
  color: #888888;
  background-color: #ababab;
}
button:disabled .inline-icon {
  filter: invert() brightness(0.5) !important;
}

.modal-checkbox {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  margin-right: 0.7em;
  width: 18px;
  height: 18px;
  border-image-width: 8px;
  border-image-outset: 8px;
  transform: translateY(4px);
  cursor: pointer;
}
.modal-checkbox:checked {
  background-color: #fff;
}
.modal-checkbox:checked:hover {
  background-color: #ccc;
}
.modal-checkbox:checked:active {
  background-color: #999;
}

.modal-checkbox-container {
  display: flex;
  font-family: "Delius", sans-serif;
  user-select: none;
  cursor: pointer;
}

/* Action/alert buttons do not have fancy outlines */
.action-button,
.alert-option {
  border-radius: 6px;
  color: black;
  border: 2px solid #615292;
  background-color: #b4abcf;
}
.action-button:hover {
  color: white;
  border: 2px solid #413175;
  background-color: #615292;
}
.action-button:active {
  color: white;
  border: 2px solid #b4abcf;
  background-color: #413175;
}
button:disabled {
  color: #888888;
  border: 2px solid #ababab;
  background-color: #ababab;
}

/* Icon recolouring */
button:not(.action-button, .alert-option) .inline-icon,
.action-button:hover .inline-icon,
.action-button:active .inline-icon,
.alert-option:hover .inline-icon,
.alert-option:active .inline-icon {
  filter: invert();
}

/* Action buttons */
.action-button {
  flex: 1;
}

#ui-mode:not(
    .uimode-select-action,
    .uimode-select-location,
    .uimode-select-enemy,
    .uimode-end-turn
  )
  .action-button,
#ui-mode.uimode-select-location .action-button:not(#action-move),
#ui-mode.uimode-select-enemy
  .action-button:not(#action-engage, #action-fight, #action-evade),
#ui-mode.uimode-end-turn .action-button:not(#action-end-turn),
#ui-mode:not(.uimode-end-turn) #action-end-turn,
#ui-flags:not(.can-draw) #action-draw,
#ui-flags:not(.can-investigate) #action-investigate,
#ui-flags:not(.can-engage, .can-cancel-engage) #action-engage,
#ui-flags:not(.can-fight, .can-cancel-fight) #action-fight,
#ui-flags:not(.can-evade, .can-cancel-evade) #action-evade,
#ui-mode.uimode-select-location #ui-flags:not(.can-cancel-move) #action-move,
#tutorial-flags.waiting .action-button,
#tutorial-flags.force-end-turn .action-button:not(#action-end-turn),
#tutorial-flags.force-credit .action-button:not(#action-credit),
#tutorial-flags.force-draw .action-button:not(#action-draw, #action-end-turn),
#tutorial-flags.force-move .action-button:not(#action-move, #action-end-turn),
#tutorial-flags.force-investigate
  .action-button:not(#action-investigate, #action-end-turn),
#tutorial-flags.force-engage
  .action-button:not(#action-engage, #action-end-turn),
#tutorial-flags.force-fight .action-button:not(#action-fight, #action-end-turn),
#tutorial-flags.force-evade .action-button:not(#action-evade, #action-end-turn),
#tutorial-flags.force-play-event .action-button:not(#action-end-turn),
#tutorial-flags.force-install-asset .action-button:not(#action-end-turn),
#tutorial-flags.force-use-asset .action-button:not(#action-end-turn) {
  pointer-events: none;

  color: #888888 !important;
  border: 2px solid #ababab !important;
  background-color: #ababab !important;

  box-shadow: none !important;
}
#ui-mode:not(.uimode-select-action, .uimode-select-location)
  .action-button
  .inline-icon,
#ui-mode.uimode-select-location .action-button:not(#action-move) .inline-icon,
#tutorial-flags.waiting .action-button .inline-icon,
#tutorial-flags.force-end-turn
  .action-button:not(#action-end-turn)
  .inline-icon,
#tutorial-flags.force-credit .action-button:not(#action-credit) .inline-icon,
#tutorial-flags.force-draw
  .action-button:not(#action-draw, #action-end-turn)
  .inline-icon,
#tutorial-flags.force-move
  .action-button:not(#action-move, #action-end-turn)
  .inline-icon,
#tutorial-flags.force-investigate
  .action-button:not(#action-investigate, #action-end-turn)
  .inline-icon,
#tutorial-flags.force-engage
  .action-button:not(#action-engage, #action-end-turn)
  .inline-icon,
#tutorial-flags.force-fight
  .action-button:not(#action-fight, #action-end-turn)
  .inline-icon,
#tutorial-flags.force-evade
  .action-button:not(#action-evade, #action-end-turn)
  .inline-icon,
#tutorial-flags.force-play-event
  .action-button:not(#action-end-turn)
  .inline-icon,
#tutorial-flags.force-install-asset
  .action-button:not(#action-end-turn)
  .inline-icon,
#tutorial-flags.force-use-asset
  .action-button:not(#action-end-turn)
  .inline-icon {
  filter: invert() brightness(0.5) !important;
}

#ui-mode.uimode-select-location #action-move-default,
#ui-mode:not(.uimode-select-location) #action-move-cancel,
#ui-flags.can-cancel-engage #action-engage-default,
#ui-flags:not(.can-cancel-engage) #action-engage-cancel,
#ui-flags.can-cancel-fight #action-fight-default,
#ui-flags:not(.can-cancel-fight) #action-fight-cancel,
#ui-flags.can-cancel-evade #action-evade-default,
#ui-flags:not(.can-cancel-evade) #action-evade-cancel {
  display: none;
}

/* Mark actions that invoke attacks of opportunity */
#ui-flags.engaged #action-credit,
#ui-flags.engaged #action-draw,
#ui-flags.engaged #action-move,
#ui-flags.engaged #action-investigate,
#ui-flags.engaged #runner-id.selectable .card-image-container,
#ui-mode:not(.uimode-select-installed-card)
  #ui-flags.engaged
  .installed-card.selectable:not(.prevent-attacks)
  .card-image-container,
#ui-flags.engaged
  .grip-card.playable:not(.prevent-attacks)
  .card-image-container {
  box-shadow: 0 0 20px red;
}
#ui-flags.engaged .playable:not(.prevent-attacks) .card-image-container::after,
#ui-mode:not(.uimode-select-grip-card, .uimode-select-installed-card)
  #ui-flags.engaged
  .selectable:not(.prevent-attacks)
  .card-image-container::after {
  box-shadow: inset 0 0 10px red;
}

/* Chaos bag */
#chaos-bag-button-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.8em;
}

/* Cards */
.card-image {
  border-radius: 5px;
  transition: scale 1s linear, filter 1s;
}
.card-text {
  transition: scale 1s linear, filter 1s;
}
.card-image-container.flipping .card-image,
.card-image-container.flipping .card-text {
  scale: 0 1;
  filter: brightness(0.5);
}
.card-image-container.fast .card-image,
.card-image-container.fast .card-text {
  transition: scale 0.25s linear, filter 0.25s;
}

#card-focused {
  position: absolute;
  top: 0;
  right: 0;
  height: 42%;
  padding: 10px;
}
#card-focused-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.25s;
}
#card-focused .card-image-container {
  transition: transform 0.2s;
}
#card-focused-image.focused,
#card-focused-image:hover {
  opacity: 1;
}
#card-focused-image.unfocused {
  opacity: 0.85;
}
#card-focused .card-image-container:hover {
  transform: scale(1.05);
  cursor: pointer;
  opacity: 1 !important;
}

#card-focused-buttons {
  position: absolute;
  top: 0;
  right: 100%;
  padding: 5px 5px 6px 6px;
}
#card-focused-buttons button {
  color: black;
  border: none;
  background: none;
}
#card-focused-buttons button:hover {
  color: #555;
}
#card-focused-buttons button:active {
  color: #aaa;
}
#card-focused-buttons button:disabled {
  color: #ccc;
  border: none;
  background: none;
}

.card-padding {
  opacity: 0;
}

.card-image-container {
  position: relative;
  border-radius: 5px;
  transition: box-shadow 0.2s, scale 0.2s;
}
.playable .card-image-container,
.selectable .card-image-container {
  box-shadow: 0 0 5px white, 0 0 10px #8ebe60, 0 0 10px #8ebe60;
}
.playable:hover .card-image-container,
.selectable:hover .card-image-container {
  box-shadow: 0 0 10px white, 0 0 25px #8ebe60, 0 0 15px #8ebe60;
}
.playable .card-image-container::after,
.selectable:not(.selected-card) .card-image-container::after {
  border-radius: 5px;
  box-shadow: inset 0 0 10px #8ebe60;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
}
.playable,
.selectable {
  cursor: pointer;
}

/* Runner cards */
#stack,
#heap {
  --box-colour: white;
  --size: 10px;
  position: relative;
  cursor: pointer;
}
#stack-body,
#heap-top-card {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  transform: translate(var(--size), calc(-1 * var(--size)));
  box-shadow: 0 0 0 #00000000,
    calc(-1 * var(--size) / 12) calc(1 * var(--size) / 12) 0 #282828,
    calc(-1 * var(--size) / 6) calc(1 * var(--size) / 6) 0 #303030,
    calc(-3 * var(--size) / 12) calc(3 * var(--size) / 12) 0 #282828,
    calc(-2 * var(--size) / 6) calc(2 * var(--size) / 6) 0 #282828,
    calc(-5 * var(--size) / 12) calc(5 * var(--size) / 12) 0 #282828,
    calc(-3 * var(--size) / 6) calc(3 * var(--size) / 6) 0 #262626,
    calc(-7 * var(--size) / 12) calc(7 * var(--size) / 12) 0 #282828,
    calc(-4 * var(--size) / 6) calc(4 * var(--size) / 6) 0 #242424,
    calc(-9 * var(--size) / 12) calc(9 * var(--size) / 12) 0 #282828,
    calc(-5 * var(--size) / 6) calc(5 * var(--size) / 6) 0 #222222,
    calc(-11 * var(--size) / 12) calc(11 * var(--size) / 12) 0 #282828,
    calc(-6 * var(--size) / 6) calc(6 * var(--size) / 6) 0 #202020,
    0 0 10px var(--box-colour),
    calc(-1 * var(--size) / 6) calc(1 * var(--size) / 6) 5px var(--box-colour),
    calc(-2 * var(--size) / 6) calc(2 * var(--size) / 6) 5px var(--box-colour),
    calc(-3 * var(--size) / 6) calc(3 * var(--size) / 6) 5px var(--box-colour),
    calc(-4 * var(--size) / 6) calc(4 * var(--size) / 6) 5px var(--box-colour),
    calc(-5 * var(--size) / 6) calc(5 * var(--size) / 6) 5px var(--box-colour),
    calc(-6 * var(--size) / 6) calc(6 * var(--size) / 6) 5px var(--box-colour),
    calc(-1 * var(--size)) calc(var(--size)) 10px black;
  transition: all 0.2s;
}
#stack:hover,
#heap:hover {
  --box-colour: #8ebe60;
}
#stack.empty #stack-top-card,
#stack.empty #stack-body,
#stack.empty .stack-shuffle-card,
#heap.empty #heap-top-card {
  display: none;
}
#stack:not(.empty) #stack-empty,
#heap:not(.empty) #heap-empty {
  opacity: 0;
}
#stack-empty,
#heap-empty {
  border-radius: 5px;
}

.stack-shuffle-card {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  transform: translate(var(--size), calc(-1 * var(--size))) rotate(0deg);
}
#stack-shuffle-cw.animate {
  animation: shuffle-spin 0.45s linear;
}
#stack-shuffle-ccw.animate {
  animation: shuffle-spin 0.4s linear reverse;
}
@keyframes shuffle-spin {
  0% {
    transform: translate(var(--size), calc(-1 * var(--size))) rotate(0deg);
  }
  100% {
    transform: translate(var(--size), calc(-1 * var(--size))) rotate(360deg);
  }
}
#stack-top-card {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  transform: translate(var(--size), calc(-1 * var(--size)));
}

/* Grip */
#grip {
  position: relative;
  z-index: 1;
}
.grip-card {
  --index: 1;
  --hand-size: 1;
  --card-width: 50%;
  --grip-width: calc(min((var(--hand-size)) * (var(--card-width) + 20%), 50vw));
  position: absolute;
  left: 50%;
  height: 100%;
  transform: translateX(
    calc(
      var(--index) * var(--grip-width) / var(--hand-size) - var(--grip-width) /
        2
    )
  );
  rotate: calc(1deg * (var(--index) - (var(--hand-size) - 1) / 2));
  transition: transform 0.25s, rotate 0.2s;
}
.grip-card .card-image-container {
  transform: translate(0, 25%);
  transition: transform 0.25s, box-shadow 0.2s;
}
.uimode-select-action .grip-card:not(.playable) .card-image-container {
  transform: translate(0, calc(25% + 2px));
}
.grip-card:not(.selected-card):hover {
  rotate: 0deg;
  z-index: 100;
}

.grip-card.playable:not(.selected-card):hover .card-image-container {
  transform: translate(0, -26px) scale(1.2);
}
.grip-card:not(.selected-card, .playable):hover .card-image-container {
  transform: translate(0, 2%);
}

#ui-mode.uimode-end-turn
  .grip-card:not(.selected-card, .playable):hover
  .card-image-container {
  transform: translate(0, 14%);
}

.grip-card.in-play {
  rotate: 0deg;
  z-index: 10000;
}
.grip-card.in-play .card-image-container {
  transform: translate(0, -18%) rotate(0) scale(1.2) !important;
}

.grip-card.selected-card {
  rotate: 0deg;
  z-index: 90;
  transform: translate(
    calc(-50% + 16% * (var(--index) - (var(--hand-size) - 1) / 2)),
    -80%
  );
}
.grip-card.selected-card .card-image-container {
  transform: none;
  box-shadow: 0 0 15px black;
}
.grip-card.selected-card .card-image-container {
  transform: none;
  box-shadow: 0 0 15px white;
}
.grip-card.selected-card .card-image-container:hover {
  scale: 1.01;
}

.uimode-select-action .grip-card.playable,
.uimode-select-grip-card .grip-card {
  cursor: pointer;
}
.grip-card.animate .card-image,
.grip-card.animate .card-text {
  animation: shake-card-unplayable 0.3s;
}
@keyframes shake-card-unplayable {
  12.5% {
    rotate: -2deg;
  }
  37.5% {
    rotate: 2deg;
  }
  62.5% {
    rotate: -1deg;
  }
  87.5% {
    rotate: 1deg;
  }
  100% {
    rotate: 0;
  }
}

.grip-card.transition-out {
  --discard-distance: 0px;
  transform: translateX(
      calc(
        -50% + 90px * (var(--index) - (var(--hand-size) - 1) / 2) + var(--discard-distance)
      )
    )
    rotate(-80deg) scale(0);
  transition: transform 0.4s;
  z-index: -1;
}
.grip-card.installing {
  opacity: 0;
  transition: opacity 0.2s;
}

/* Installed cards */
#rig {
}
.installed-card {
  position: relative;
  height: 32%;
  /* width: 160px; */
  aspect-ratio: 160/224 !important;
  animation: install 0.2s;
  transition: transform 0.2s;
}
@keyframes install {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}
.installed-card .card-image {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.2s, scale 0.2s;
}
.installed-card .hosted-counters {
  transform: scale(0.75);
}
.installed-card:hover .card-image-container {
  transform: scale(1.01);
}
.uimode-select-installed-card .installed-card:hover .card-image-container {
  transform: translateY(-5px), scale(1.01);
}
#ui-mode.uimode-select-installed-card
  .installed-card.selectable
  .card-image-container {
  transition: scale 0.1s, box-shadow 0.1s, filter 0.1s;
}
#ui-mode.uimode-select-installed-card
  .installed-card.selectable:not(.selected-card)
  .card-image-container {
  filter: brightness(0.8);
}
.installed-card.selected-card .card-image-container {
  scale: 1.1;
  z-index: 1000;
}
.installed-card.selected-card:not(:hover) .card-image-container {
  box-shadow: 0 0 15px white;
}

.installed-card.perceived-trashed .card-image {
  filter: saturate(0) blur(1px);
}
.installed-card.perceived-trashed .hosted-counters {
  display: none;
}
.installed-card.perceived-trashed::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("img/card/trashedCardOverlay.png") no-repeat;
  background-size: 100% 100%;
  z-index: 5000;
}

.installed-card.tapped:not(.selectable, .transition-out) {
  transform: rotate(6deg);
}

.installed-card .card-image-container {
  transition: transform 0.2s;
}
.installed-card.transition-out .card-image-container {
  transform: scale(0, 120%);
}
.installed-card.transition-out .hosted-counters {
  display: none;
}

.installed-card-outro-container {
  position: absolute;
  top: 0;
  left: 0;
  filter: opacity(0);
  pointer-events: none;
}
.installed-card.transition-out .installed-card-outro-container {
  filter: opacity(1);
}
.installed-card .installed-card-outro {
  transition: all 0.2s;
}
.installed-card.transition-out .installed-card-outro {
  transform: scale(2);
  filter: opacity(0);
}

/* Locations */
#location-window {
  --local-x: 320px;
  --local-y: 210px;
  --zoom: 0.5; /* 0 <= zoom <= 1 */
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background-color: black;
  background: repeat url("img/misc/screenFG.png"),
    repeat url("img/misc/screenMG.png"), repeat url("img/misc/screenBG.png");
  background-size: 20px, 20px, 66px;
  animation: location-window-screen infinite 30s linear;
  cursor: grab;
}
#location-window:active {
  cursor: grabbing;
}
@keyframes location-window-screen {
  0% {
    background-position: 0px 0px,
      calc(var(--local-x) / 2) calc(var(--local-y) / 2),
      calc(var(--local-x) / 4) calc(var(--local-y) / 4);
  }
  100% {
    background-position: 0px 256px,
      calc(var(--local-x) / 2) calc(var(--local-y) / 2 - 128px),
      calc(var(--local-x) / 4) calc(var(--local-y) / 4);
  }
}
#location-map {
  position: relative;
  transform: scale(var(--zoom));
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  top: 50%;
  left: 50%;
  transition: transform 0.25s;
}
#location-position {
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  transform: translate(var(--local-x), var(--local-y));
  transition: transform 0.25s;
}
#location-position.dragged {
  transition: none;
}
.location-container {
  --x-pos: 0px;
  --y-pos: 0px;
  position: absolute;
  border-radius: 5px;
  transform: translate(calc(var(--x-pos) - 50%), calc(var(--y-pos) - 50%));
  height: 224px;
  width: 160px;
  aspect-ratio: 160/224 !important;
  background-color: black;
  transition: background-color 0.2s;
  z-index: 10;
}
.location-container.transition-in {
  background-color: #00000000;
}
.location-image {
  width: 100%;
  filter: saturate(0.5);
  z-index: 15;
}
:not(.uimode-select-enemy) .location-container:hover {
  z-index: 1000;
}

.current-location .location-image {
  filter: saturate(1);
}

.uimode-select-location
  .location-container:not(.valid-destination, .current-location)
  .location-image {
  filter: saturate(0) blur(1px) brightness(0.25);
}

.uimode-select-enemy .location-container .location-image,
.uimode-select-enemy .enemy-container:not(.selectable) .enemy-image {
  filter: saturate(0) blur(1px) brightness(0.25);
}

.location-connector {
  --mid-x: 0px;
  --mid-y: 0px;
  --length: 0px;
  --rotation: 0deg;
  position: absolute;
  transform: translate(calc(var(--mid-x) - 50%), calc(var(--mid-y) - 50%))
    rotate(var(--rotation));
  width: var(--length);
  height: 0;
  border: 2px dotted #b4abcf;
  z-index: 5;
}
.uimode-select-location .location-connector.valid-connection {
  border: 3px solid #fceda6;
}

#location-buttons {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 10px 6px 8px 10px;
}
#menu-button,
#chaos-bag-button,
#location-buttons button {
  color: black;
  border: none;
  background: none;
}
#menu-button:hover,
#chaos-bag-button:hover,
#location-buttons button:hover {
  color: #555;
}
#menu-button:active,
#chaos-bag-button:active,
#location-buttons button:active {
  color: #aaa;
}
#menu-button:disabled,
#chaos-bag-button:disabled,
#location-buttons button:disabled {
  color: #ccc;
  border: none;
  background: none;
}

#menu-button-container {
  position: absolute;
  padding: 2px 5px 3px 3px;
  font-size: 1.5em;
}

#current-location-marker {
  --x-pos: 0px;
  --y-pos: 0px;
  position: absolute;
  transform: translate(calc(var(--x-pos) - 50%), calc(var(--y-pos) - 50%));
  transition: transform 0.3s;
  z-index: 49;
  width: 180px;
  pointer-events: none;
}
#current-location-marker.hover {
  z-index: 5000;
}
#current-location-marker.moving #current-location-frame,
#current-location-marker.moving #current-location-inner {
  animation: location-marker-movement 0.3s forwards;
}
@keyframes location-marker-movement {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(100%, 100%);
  }
  50% {
    transform: translate(-50%, -50%) scale(120%, 60%);
  }
}
#current-location-marker.moving #current-location-padding {
  animation: location-marker-padding-movement 0.3s forwards;
}
@keyframes location-marker-padding-movement {
  0%,
  100% {
  }
  10%,
  90% {
    box-shadow: none;
  }
}

#current-location-marker #current-location-frame,
#current-location-marker #current-location-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
}
#current-location-marker #current-location-padding {
  width: 180px;
  border-radius: 5px;
  box-shadow: 0 0 10px #d4c26b, 0 0 10px #d4c26b, inset 0 0 10px #d4c26b,
    inset 0 0 10px #d4c26b;
}

#current-location-frame {
  animation: current-location-frame-animation 13s infinite;
  z-index: 1;
}
@keyframes current-location-frame-animation {
  10%,
  12%,
  50%,
  52%,
  74%,
  76%,
  78% {
    filter: opacity(1);
  }
  11%,
  51%,
  75%,
  77% {
    filter: opacity(0.7);
  }
}

#current-location-inner {
  animation: current-location-inner-animation 10s infinite;
}
@keyframes current-location-inner-animation {
  0%,
  100% {
    filter: opacity(1);
  }
  50% {
    filter: opacity(0.2);
  }
}

/* Identity */
#runner-id {
  position: relative;
  transition: transform 0.2s;
}
#runner-id.tapped:not(.selectable, .transition-out) {
  transform: rotate(6deg);
}

/* Enemies */
.enemy-container {
  --x-pos: 0px;
  --y-pos: 0px;
  --index: 0;
  position: absolute;
  border-radius: 5px;
  transform: translate(
    calc(var(--x-pos) - 50% + 40px + 45px * var(--index)),
    calc(var(--y-pos) - 50% - 40px)
  );
  width: 145px;
  transition: transform 0.5s ease-out;
  z-index: calc(50 + var(--index));
}
.enemy-image {
  width: 100%;
  box-shadow: 0 0 15px black;
  filter: saturate(0.5);
  transition: scale 1s linear, filter 1s, box-shadow 0.1s !important;
  z-index: 50;
}
.fast .enemy-image {
  transition: scale 0.25s linear, filter 0.25s, box-shadow 0.1s !important;
}
#ui-mode:not(.uimode-select-enemy)
  .enemy-container.engaged:not(.transition-out) {
  box-shadow: 0 0 20px red;
  background-color: #ff000070;
}

.enemy-container.engaged:not(.attacking) .card-image-container {
  animation: engaged-enemy 0.789s ease calc(-0.2s * var(--index)) infinite;
}
@keyframes engaged-enemy {
  75% {
    scale: 1;
  }
  25% {
    scale: 1.04;
  }
}

.enemy-container.attacking {
  z-index: 1000;
  transform: translate(
      calc(var(--x-pos) - 50% + 40px + 45px * var(--index)),
      calc(var(--y-pos) - 50% - 40px)
    )
    scale(1.1);
  transition: transform 0.2s;
}

.enemy-container .card-image-container {
  transition: transform 0.2s, scale 0.5s;
}
.enemy-container.tapped:not(.selectable, .transition-out)
  .card-image-container {
  transform: rotate(6deg);
}

.uimode-select-enemy .enemy-container.selectable:hover .card-image-container {
  scale: 1.05 !important;
}

.enemy-outro-container {
  position: absolute;
  top: 0;
  left: 0;
  filter: opacity(0);
  pointer-events: none;
}
.enemy-container.transition-out .enemy-outro-container {
  filter: opacity(1);
}
.enemy-container .enemy-outro {
  transition: all 1s;
}
.enemy-container.transition-out .enemy-outro {
  transform: scale(2);
  filter: opacity(0);
}
.enemy-container.transition-out .card-image-container {
  box-shadow: none;
  opacity: 0;
  transition: filter 1s, box-shadow 1s;
}

/* Agenda */

#agenda {
  position: relative;
}

#act .card-image,
#agenda .card-image {
  box-shadow: 0 0 5px black;
  box-shadow: 0 0 5px black;
}

/* Hosted counters */

.hosted-counters {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  top: 0;
  left: 50%;
  height: 100%;
  width: 0;
  transition: all 0.2s;
  user-select: none;
}

#agenda .hosted-counters {
  transform: translateY(-23.5%);
}

.enemy-container .hosted-counters {
  transform: translateY(25%);
}

.location-container > .hosted-counters {
  height: 62%;
}
.location-container:not(:hover) > .hosted-counters.covered,
:not(.location-container) > .hosted-counters.covered {
  left: 24px;
  height: 50%;
  gap: 2.5px;
}

.damage,
.clues,
.doom,
.power {
  --counter-colour: white;
  height: 36px;
  width: 36px;
  aspect-ratio: 1 !important;
  line-height: 31px;
  text-align: center;
  transform: translate(-50%, 0);
  border: 3px solid;
  border-radius: 100%;
  box-shadow: 0 0 10px 5px #00000050 inset, 0 0 5px 5px #ffffff80;
  border-color: var(--counter-colour);
  background-color: var(--counter-colour);
  z-index: 20;
  pointer-events: none;
}
.damage {
  --counter-colour: #b27544;
  color: white;
}
.clues {
  --counter-colour: #354977;
  color: white;
}
.doom {
  --counter-colour: #5f0505;
  color: white;
}
.power {
  --counter-colour: #4e357a;
  color: white;
}

/* Card text */

.card-text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  font-size: 10px; /* Overwrite to change font size */
  pointer-events: none;
  user-select: none;
}
.card-text > * {
  position: absolute;
}
.card-text * {
  color: black;
}
.card-text .card-text-text {
  line-height: normal;
}
.card-text .inline-icon {
  transform: translate(0.015em, -0.08em);
}

.identity .card-text-health {
  color: white;
  text-shadow: -0.08em -0.08em 0 #ca4343, 0.08em -0.08em 0 #ca4343,
    -0.08em 0.08em 0 #ca4343, 0.08em 0.08em 0 #ca4343, -0.08em 0 0 #ca4343,
    0.08em 0 0 #ca4343;
  bottom: 5.5%;
  left: 0%;
  right: 0%;
  text-align: center;
  font-size: 1.5em;
  font-family: "Anta", sans-serif !important;
}

.asset .card-text-cost {
  top: 0.35%;
  left: 3.8%;
  width: 1em;
  text-align: center;
  color: white;
  font-size: 2em;
}
.asset .card-text-title {
  top: 3.59%;
  left: 27%;
  right: 0;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 1em;
}
.asset .card-text-subtypes {
  top: 57.65%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1em;
}
.asset .card-text-text {
  top: 65%;
  bottom: 5%;
  left: 5%;
  right: 5%;
  font-size: 0.95em;
}
.asset .card-text-health {
  color: white;
  text-shadow: -0.08em -0.08em 0 #ca4343, 0.08em -0.08em 0 #ca4343,
    -0.08em 0.08em 0 #ca4343, 0.08em 0.08em 0 #ca4343, -0.08em 0 0 #ca4343,
    0.08em 0 0 #ca4343;
  bottom: 0%;
  left: 0%;
  right: 0%;
  text-align: center;
  font-size: 1.5em;
}

.event .card-text-cost {
  top: 0%;
  left: 2%;
  width: 1.2em;
  color: white;
  text-align: center;
  font-size: 2em;
}
.event .card-text-cost.small {
  scale: 0.8;
}
.event .card-text-title {
  top: 0.45%;
  left: 20%;
  right: 0;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 1.1em;
}
.event .card-text-subtypes {
  top: 56.75%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1em;
}
.event .card-text-text {
  top: 63.5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
  font-size: 0.95em;
}

.asset .card-text-skills {
  top: 17%;
  left: 2%;
}
.event .card-text-skills {
  top: 15%;
  left: 2%;
}
.asset .card-text-skill,
.event .card-text-skill {
  display: block;
  width: 2.5em;
  margin-bottom: 0.3em;
}

.location .card-text-title {
  top: 0.45%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 1.1em;
}
.location .card-text-subtypes {
  top: 57%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1em;
}
.location .card-text-text {
  top: 63.5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
  font-size: 1em;
}
.location .card-text-shroud {
  top: 49%;
  left: 4.75%;
  width: 1em;
  color: white;
  text-align: center;
  font-size: 1.6em;
}
.location .card-text-clues {
  top: 49%;
  right: 4.75%;
  width: 1em;
  text-align: center;
  font-size: 1.6em;
}
.location.alt * {
  color: white;
}
.location.alt .inline-icon {
  filter: invert(1);
}

.enemy .card-text-title {
  top: -0.15%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 1.2em;
}
.enemy.alt .card-text-title {
  color: white;
}
.enemy .card-text-box {
  top: 18%;
  left: 10%;
  right: 10%;
}
.enemy .card-text-subtypes {
  text-align: center;
  font-size: 0.9em;
  font-weight: 900;
}
.enemy .card-text-text {
  font-size: 0.8em;
}
.enemy .card-text-strength {
  top: 9%;
  left: 25.5%;
  color: white;
  text-shadow: -0.08em -0.08em 0 #181613, 0.08em -0.08em 0 #181613,
    -0.08em 0.08em 0 #181613, 0.08em 0.08em 0 #181613, -0.08em 0 0 #181613,
    0.08em 0 0 #181613;
  font-size: 1em;
  font-weight: 900;
}
.enemy .card-text-link {
  top: 9%;
  right: 25.5%;
  text-align: right;
  color: white;
  text-shadow: -0.08em -0.08em 0 #181613, 0.08em -0.08em 0 #181613,
    -0.08em 0.08em 0 #181613, 0.08em 0.08em 0 #181613, -0.08em 0 0 #181613,
    0.08em 0 0 #181613;
  font-size: 1em;
  font-weight: 900;
}
.enemy .card-text-health {
  top: 9.75%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: white;
  text-shadow: -0.08em -0.08em 0 #181613, 0.08em -0.08em 0 #181613,
    -0.08em 0.08em 0 #181613, 0.08em 0.08em 0 #181613, -0.08em 0 0 #181613,
    0.08em 0 0 #181613;
  font-size: 1.2em;
  font-weight: 900;
}

.treachery .card-text-title {
  left: 0;
  right: 0;
  top: 3.25%;
  text-align: center;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 1.1em;
}
.treachery .card-text-subtypes {
  top: 57.85%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1em;
}
.treachery .card-text-text {
  top: 65.5%;
  bottom: 5%;
  left: 5%;
  right: 5%;
  font-size: 0.9em;
}

.act .card-text-title,
.agenda .card-text-title {
  left: 8%;
  right: 0;
  top: 0.1%;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700;
  font-size: 1.1em;
}
.act .card-text-requirement,
.agenda .card-text-requirement {
  top: 3%;
  left: 78.2%;
  right: 4%;
  color: white;
  text-align: center;
  font-size: 1.7em;
}
.act .card-text-act,
.agenda .card-text-agenda {
  top: 48%;
  left: 5.4%;
  right: 75%;
  color: white;
  text-align: center;
  font-size: 1.65em;
}
.act .card-text-text-box,
.agenda .card-text-text-box {
  left: 5%;
  right: 5%;
  top: 50%;
  bottom: 5%;
}
.act .card-text-float,
.agenda .card-text-float {
  float: left;
  width: 28.5%;
  height: 27%;
}
.act .card-text-text,
.agenda .card-text-text {
  font-size: 0.8em;
}
.agenda * {
  color: white;
}

.card-text-text.short {
  font-size: 20px;
  text-align: center;
}
.card-text-text.long {
  font-size: 0.8em;
}
.enemy .card-text-text.long {
  font-size: 0.7em;
}

.asset .card-text-text.long br {
  margin-bottom: 0.5em;
}

.buffed {
  color: #c6ffc6 !important;
}
.nerfed {
  color: #ffc6c6 !important;
}

/* Modal */

#modal-image {
  max-height: 500px;
  max-width: 50%;
  min-width: 200px;
  height: 500px;
  margin-right: 1em;
  margin-bottom: 1em;
}
.card-image-container.card-list-card {
  margin-bottom: 1em;
  left: 0;
  right: 0;
}

#modal .quote {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
  border-left: solid 3px #303030;
}

#modal-dialog {
  z-index: 15000;
}
#main-menu-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("img/misc/mainBG.jpg");
  background-size: cover;
  background-position: center;
  background-color: black;
  opacity: 0;
  transition: opacity 1s;
  z-index: 14999;
  pointer-events: none;
}
#main-menu-bg.show {
  opacity: 1;
  pointer-events: default;
}

/* Character selection */
.character-button {
  padding: 0;
  background: none !important;
  border: none !important;
}
.character-selection-image {
  width: 100%;
  transition: scale 0.1s, box-shadow 0.1s, filter 0.1s;
  filter: brightness(0.9);
}
.character-button.disabled .character-selection-image {
  filter: saturate(0) blur(1px) contrast(0.5);
}
.character-selection-image:hover {
  animation: character-bounce 0.5s ease-out;
  scale: 1;
  filter: brightness(1);
}
.character-button:not(.disabled) #topan-image.character-selection-image:hover {
  box-shadow: 0 0 25px white, 0 0 50px #f8ab63;
}
.character-button:not(.disabled) #baz-image.character-selection-image:hover {
  box-shadow: 0 0 25px white, 0 0 50px #4952d8;
}
.character-button:not(.disabled)
  #catalyst-image.character-selection-image:hover {
  box-shadow: 0 0 25px white, 0 0 50px #f5f4da;
}
@keyframes character-bounce {
  0%,
  33.3%,
  66.7%,
  100% {
    scale: 1;
  }
  16.7% {
    scale: 1.1;
  }
  50% {
    scale: 1.06;
  }
  83.3% {
    scale: 1.03;
  }
}

/* Alerts */
#alert-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  z-index: 10000;
}
.alert {
  width: fit-content;
  min-width: 400px;
  margin: 10px auto 0 auto;
  border-width: 2px;
  border-radius: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  box-shadow: 0 0 5px black;
}
.alert.important {
  order: -10;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 0.4rem 0.4rem;
}
.alert-dismissible .btn-close:hover {
  background-color: #00000000;
  border: none;
  transform: none;
}

.alert.animate {
  animation: alert-animation 0.5s;
}
@keyframes alert-animation {
  12.5% {
    scale: 0.95 1.1;
    color: red;
  }
  37.5% {
    scale: 1.05 0.9;
    color: white;
  }
  62.5% {
    scale: 0.975 1.05;
  }
  87.5% {
    scale: 1.025 0.95;
  }
  100% {
    scale: 1;
  }
}

/* Options */
.modal-options,
.alert-options {
  display: flex;
  justify-content: space-between;
}
.modal-options {
  margin-top: 20px;
  gap: 20px;
}
.modal-checkboxes {
  margin-top: 20px;
  padding-bottom: 12px;
}
.alert-options {
  margin: 2px 0;
  gap: 1rem;
}

.modal-sm .modal-options {
  flex-direction: column;
  gap: 8px;
}

.modal-option,
.alert-option {
  flex: 1;
}

.modal-option.warning,
.alert-option.warning {
  border-radius: 6px;
  color: black;
  background-color: #b65c80;
}
.modal-option.warning:hover,
.alert-option.warning:hover {
  color: white;
  background-color: #923259;
}
.modal-option.warning:active,
.alert-option.warning:active {
  color: white;
  background-color: #6c1236;
}

.modal-option.disabled,
.alert-option.disabled {
  color: #444;
  background-color: #888;
  pointer-events: none;
}

/* Chaos rolls */
#chaos-roll {
  --x-offset: 0px;
  --y-offset: 0px;
  --rotate: 0deg;
  display: flex;
  position: relative;
  margin-bottom: 16px;
  font-family: "Anta", sans-serif !important;
}
#chaos-roll-image {
  width: 10em;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(var(--rotate)) translate(var(--x-offset), var(--y-offset));
}
#chaos-roll-text,
#chaos-roll-elder,
#chaos-roll-fail,
#chaos-roll-skull {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(calc(var(--x-offset) - 50%), calc(var(--y-offset) - 50%))
    rotate(var(--rotate));
}
#chaos-roll-text {
  font-size: 100px;
  color: white;
}
#chaos-roll-elder,
#chaos-roll-fail,
#chaos-roll-skull {
  display: none;
  width: 100px;
}
#chaos-roll-fail {
  transform: scale(1.2)
    translate(calc(var(--x-offset) - 35%), calc(var(--y-offset) - 46%))
    rotate(var(--rotate));
}

#chaos-roll.elder #chaos-roll-elder,
#chaos-roll.fail #chaos-roll-fail,
#chaos-roll.skull #chaos-roll-skull {
  display: block;
}
#chaos-roll.negative #chaos-roll-text {
  transform: translate(calc(var(--x-offset) - 55%), calc(var(--y-offset) - 50%))
    rotate(var(--rotate));
}

#chaos-roll-fade-in {
  position: absolute;
  width: 10em;
  left: 50%;
  transform: translateX(-50%);
  animation: chaos-roll-fade 3s forwards;
}
#chaos-roll-fade-out {
  position: absolute;
  width: 10em;
  left: 50%;
  transform: translateX(-50%);
  animation: chaos-roll-fade 0.5s reverse;
}
@keyframes chaos-roll-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Animations */

.bouncy {
  display: inline-block;
  transition: scale 100ms ease;
}
.bouncy.animate {
  scale: 1.5;
}

.anti-bouncy {
  display: inline-block;
  transition: scale 100ms ease;
}
.anti-bouncy.animate {
  scale: 0.75;
}

.shake {
}
.shake.animate {
  animation: shake 0.5s;
}
@keyframes shake {
  12.5% {
    transform: translate(10px, 0);
  }
  37.5% {
    transform: translate(-10px, 0);
  }
  62.5% {
    transform: translate(5px, 0);
  }
  87.5% {
    transform: translate(-5px, 0);
  }
}

/* shake for objects centered with a translation */
.shake-centered {
}
.shake-centered.animate {
  animation: shake-centered 0.5s;
}
@keyframes shake-centered {
  12.5% {
    transform: translate(calc(10px - 50%), -50%);
  }
  37.5% {
    transform: translate(calc(-10px - 50%), -50%);
  }
  62.5% {
    transform: translate(calc(5px - 50%), -50%);
  }
  87.5% {
    transform: translate(calc(-5px - 50%), -50%);
  }
}

/* shake for hosted counters */
.shake-counter {
}
.shake-counter.animate {
  animation: shake-counter 0.5s;
}
@keyframes shake-counter {
  12.5% {
    transform: translate(calc(10px - 50%), 0);
  }
  37.5% {
    transform: translate(calc(-10px - 50%), 0);
  }
  62.5% {
    transform: translate(calc(5px - 50%), 0);
  }
  87.5% {
    transform: translate(calc(-5px - 50%), 0);
  }
}

.turn-banner {
  position: fixed;
  top: 40%;
  left: 50%;
  width: 40%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 200ms ease;
  z-index: 100000;
}
.turn-banner.animate-in {
  transform: translate(-50%, -50%) scale(1.2);
}
.turn-banner.animate-out {
  transform: translate(-50%, -50%) scale(0);
}

#pain {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500000;
  pointer-events: none;
}
#pain * {
  position: absolute;
  opacity: 0;
}
#pain-top {
  top: 0;
  width: 100vw;
  transform: rotate(90deg);
}
#pain-bottom {
  bottom: 0;
  width: 100vw;
  transform: rotate(-90deg);
}
#pain-left {
  left: 0;
  height: 100vh;
}
#pain-right {
  right: 0;
  height: 100vh;
  transform: rotate(180deg);
}
#pain.animate * {
  animation: pain-animation 0.5s ease-out;
}
@keyframes pain-animation {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

#modal {
  z-index: 2000000;
}
#modal .card-list {
  max-height: 70vh;
  overflow-y: scroll;
}

/* Scrollbar */
* {
  scrollbar-color: #615292 black;
  scrollbar-width: thin;
}

/* Endings */
#ending-window {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  z-index: 10000000;
  overflow-y: auto;
}
#ending-text-box {
  height: 100%;
  font-family: "Delius", sans-serif;
  color: whitesmoke;
  background-color: #080808;
  border-image-slice: 9 9 9 9;
  border-image-width: 15px;
  border-image-outset: 10px;
  border-image-repeat: stretch stretch;
  border-image-source: url("img/misc/fancyBorder.png");
  border-style: solid;
  opacity: 0;
  transition: opacity 6s ease-in;
}
#ending-window.show {
  display: block;
}
#ending-text-box.show {
  opacity: 1;
}
.ending-image-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.ending-image {
  width: 50%;
  transition: scale 1.5s linear;
}
.ending-image.flipping {
  scale: 0 1;
}
.ending-image.face-down {
  border-radius: 5px;
  cursor: pointer;
}
.ending-image.face-down:hover {
  box-shadow: 0 0 10px white;
}

/* Fonts */
.font-scifi {
  font-family: "Anta", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}
.font-fancy {
  font-family: "EB Garamond", serif !important;
  font-weight: 400;
  font-style: normal;
}

.tippy-box {
  font-family: "Delius", sans-serif;
}