$switch-orangered: #ff3c28;
$switch-deepskyblue: #0ab9e6;
$switch-yellow: #e6ff00;
$switch-deeppink: #ff3278;
$switch-lime: #1edc00;
$switch-gray: #828282;

@each $name, $color in ("orangered", $switch-orangered), ("deepskyblue", $switch-deepskyblue),
        ("yellow", $switch-yellow), ("deeppink", $switch-deeppink), ("lime", $switch-lime), ("gray", $switch-gray) {
  .switch-left-#{$name} {
    #jumbotron-leftjoy path {
      // The normal coloring for the .svg is inline, so we cannot override it normally.
      stroke: $color !important;
    }

    #logo-leftjoy path, #logo-u1 path {
      fill: $color !important;
    }
  }

  .switch-right-#{$name} {
    #jumbotron-rightjoy path {
      // The normal coloring for the .svg is inline, so we cannot override it normally.
      stroke: $color !important;
    }

    #logo-rightjoy path, #logo-u2 path {
      fill: $color !important;
    }
  }
}

#about-section {
  position: relative;
  top: -100px;
}

// TODO: Hack for links appearing as the wrong color
a:hover {
  color: lighten($blue, 5);
}

// Correctly positions the switch screen images in the overlay.
.offset-switch-overlay {
  top: 13.5%;
  left: 22.5%;
  // 100% - (22.5% * 2)
  width: 55%;
}

// Ensure that arrows consume the entire overlay's height.
.glide__arrow {
  height: 100%;
  display: flex;
  align-items: center;
}
