/* Layout */
/* Color Scheme */
/* Typography */
.bold {
  font-weight: 700;
}

/** Mobile First Min-Width Media Query Mixin
 * Accepts the values xs, sm, md, lg (see variables.scss)
 * Use this mixin to overwrite mobile first CSS
 * Example - ` @include media-query(sm) { ... } `
 * Source - https://glennmccomb.com/articles/useful-sass-scss-media-query-mixins-for-bootstrap/
 */
body {
  margin: 0;
  background: #fafafa;
}

p,
a,
li,
h1,
h2,
h3,
h4,
h5 {
  font-family: "Inter", Helvetica, sans-serif;
}

p {
  font-size: 18px;
  line-height: 1.4em;
}
@media (min-width: 640px) {
  p {
    font-size: 20px;
  }
}

a {
  color: #072ac8;
}
a:visited {
  color: #072ac8;
}

.container {
  margin: 150px auto;
  max-width: 960px;
}

.link {
  color: #072ac8;
  font-size: 18px;
  margin: 0 20px 20px 0;
  display: inline-block;
}
@media (min-width: 640px) {
  .link {
    font-size: 20px;
    margin: 0 30px 30px 0;
  }
}
.link:visited {
  color: #072ac8;
}

.link--highlight-from-left {
  position: relative;
  display: inline-block;
}
.link--highlight-from-left:after {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 0;
  height: calc(100% + 8px);
  background-color: #fcf300;
  transition: width 0.6s ease;
  mix-blend-mode: multiply;
}
.link--highlight-from-left:hover::after, .link--highlight-from-left:focus::after {
  width: calc(100% + 8px);
}
.link--highlight-from-right {
  position: relative;
  display: inline-block;
}
.link--highlight-from-right:after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 0;
  height: calc(100% + 8px);
  background-color: #fcf300;
  transition: width 0.6s ease;
  mix-blend-mode: multiply;
}
.link--highlight-from-right:hover::after, .link--highlight-from-right:focus::after {
  width: calc(100% + 8px);
}
.link--highlight-from-bottom {
  position: relative;
  display: inline-block;
}
.link--highlight-from-bottom:after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -4px;
  width: calc(100% + 8px);
  height: 0%;
  background-color: #fcf300;
  transition: height 0.6s ease;
  mix-blend-mode: multiply;
}
.link--highlight-from-bottom:hover::after, .link--highlight-from-bottom:focus::after {
  height: calc(100% + 8px);
}
.link--highlight-from-top {
  position: relative;
  display: inline-block;
}
.link--highlight-from-top:after {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: calc(100% + 8px);
  height: 0%;
  background-color: #fcf300;
  transition: height 0.6s ease;
  mix-blend-mode: multiply;
}
.link--highlight-from-top:hover::after, .link--highlight-from-top:focus::after {
  height: calc(100% + 8px);
}

.link--highlight-fade-in {
  padding: 1px 0;
  background-color: transparent;
  transition: background-color 0.6s ease-in-out, color 0.6s;
}
.link--highlight-fade-in:hover, .link--highlight-fade-in:active {
  background-color: #fcf300;
  color: black;
}
.link--highlight-from-strikethrough {
  padding: 1px 0;
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 0.1ex), #fcf300 calc(50% - 0.1ex), #fcf300 calc(50% + 0.5ex), transparent calc(50% + 0.5ex), transparent 100%);
  background-color: transparent;
  transition: background-color 0.6s ease-in-out, color 0.6s;
}
.link--highlight-from-strikethrough:hover, .link--highlight-from-strikethrough:active {
  background-color: #fcf300;
  color: black;
}
.link--highlight-from-bottom-border {
  padding: 1px 0;
  text-decoration: none;
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 0.4ex), #fcf300 calc(50% - 0.4ex), #fcf300 100%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position 0.6s ease-in-out, color 0.6s;
}
.link--highlight-from-bottom-border:hover, .link--highlight-from-bottom-border:active {
  background-position: 0 100%;
  color: black;
}

.link--crossing-triangle-waves {
  padding: 2px;
  background-size: 20px auto, 20px auto;
  background-repeat: repeat-x, repeat-x;
  background-position: 0 2em, 0 4em;
  background-image: conic-gradient(from 65deg at 0% 70%, #072ac8 65deg 180deg, transparent 180deg), conic-gradient(from -65deg at 100% 40%, transparent 180deg, #1e96fc 180deg);
  color: #072ac8;
  transition: background-position 1s ease-in, color 1s ease;
}
.link--crossing-triangle-waves:hover {
  background-position: -8em 0, 8em 0;
  transition: background-position 1s ease-out, color 0.5s ease-out 0.5s;
  color: white;
}

.link--background-underline-from-right {
  padding-bottom: 0.2ex;
  background-image: linear-gradient(to right, transparent 0%, transparent 50%, #072ac8 50%, #072ac8 100%);
  background-size: 200% 0.3ex;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-position 0.36s ease-in-out;
}
.link--background-underline-from-right:hover {
  background-position: right bottom;
}
.link--background-underline-from-left {
  padding-bottom: 0.2ex;
  background-image: linear-gradient(#072ac8, #072ac8);
  background-size: 0% 0.3ex;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.36s ease-in-out;
}
.link--background-underline-from-left:hover {
  background-size: 100% 0.3ex;
}
.link--background-underline-from-strikethrough {
  padding-bottom: 0.2ex;
  background-image: linear-gradient(#072ac8, #072ac8);
  background-size: 100% 0.3ex;
  background-repeat: no-repeat;
  background-position: left 58%;
  transition: background-position 0.36s ease-in-out;
}
.link--background-underline-from-strikethrough:hover {
  background-position: left bottom;
}

.link--background-crossover {
  text-decoration: none;
  padding: 5px 0;
  background-image: linear-gradient(to right, rgba(252, 243, 0, 0.5) 0%, rgba(252, 243, 0, 0.5) 50%, transparent 50%, transparent 100%), linear-gradient(to left, rgba(252, 243, 0, 0.5) 0%, rgba(252, 243, 0, 0.5) 50%, transparent 50%, transparent 100%), linear-gradient(rgba(252, 201, 0, 0.5) 0%, rgba(252, 201, 0, 0.5) 50%, transparent 50%, transparent 100%), linear-gradient(transparent 0%, transparent 50%, rgba(252, 201, 0, 0.5) 50%, rgba(252, 201, 0, 0.5) 100%), linear-gradient(#fcf300, #fcf300);
  background-size: 200% 1ex, 200% 1ex, 1ex 200%, 1ex 200%, 100% 0.4ex;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 100% calc(50% + 0.5ex), 0% calc(50% - 0.5ex), left 100%, right 0%, left calc(50% + 1ex);
  background-blend-mode: hard-light;
  transition: background-position 0.6s, color 0.6s;
}
.link--background-crossover:hover {
  background-position: 0% calc(50% + 0.5ex), 100% calc(50% - 0.5ex), left 0%, right 100%, left calc(100% + 1.3ex);
  color: black;
}
.link--four-color-background {
  background-image: linear-gradient(to right, rgba(252, 201, 0, 0.5) 0%, rgba(252, 201, 0, 0.5) 50%, transparent 50%, transparent 100%), linear-gradient(to left, rgba(252, 159, 0, 0.5) 0%, rgba(252, 159, 0, 0.5) 50%, transparent 50%, transparent 100%), linear-gradient(rgba(252, 243, 0, 0.5) 50%, rgba(252, 243, 0, 0.5) 0%, transparent 50%, transparent 100%), linear-gradient(transparent 0%, transparent 50%, rgba(252, 117, 0, 0.5) 50%, rgba(252, 117, 0, 0.5) 100%);
  background-size: 200% 25%, 200% 25%, 100% 50%, 100% 50%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: right 33%, left 66%, left -50%, right 150%;
  transition: background-position 0.6s cubic-bezier(0.83, 0, 0.17, 1), color 0.6s;
}
.link--four-color-background:hover {
  background-position: 0% 33.33%, 100% 66.66%, left 0%, right 100%;
  color: black;
}
.link--multi-gradient-fill {
  padding: 2px 0;
  text-decoration: none;
  background-image: linear-gradient(45deg, rgba(252, 159, 0, 0.5) 0%, transparent 50%, transparent 100%), linear-gradient(45deg, transparent 0%, transparent 50%, rgba(252, 243, 0, 0.5) 100%), linear-gradient(#fcf300, #fcf300);
  background-size: 200% 200%, 200% 200%, 100% 0.4ex;
  background-repeat: no-repeat;
  background-position: 100% 0, 0% 100%, 0 calc(50% + 1ex);
  transition: background-position 0.6s, background-size 0.6s, color 0.6s;
}
.link--multi-gradient-fill:hover {
  background-position: 0 100%, 100% 0, 0 50%;
  background-size: 200% 200%, 200% 200%, 100% 66%;
  color: black;
}

.link--arrow-clip-path {
  display: inline-block;
  position: relative;
  transition: color 0.6s;
}
.link--arrow-clip-path::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background-color: #fcf300;
  /* Base rectangle clip path to animate from. */
  clip-path: polygon(0% 0%, 60% 0%, 60% 0%, 100% 0%, 100% 100%, 60% 100%, 60% 100%, 0% 100%);
  transition: clip-path 0.6s;
}
.link--arrow-clip-path:hover::before {
  /* Arrow clip path to transition into. */
  clip-path: polygon(10% 30%, 60% 30%, 60% 5%, 90% 50%, 90% 50%, 60% 95%, 60% 70%, 10% 70%);
}
.link--arrow-clip-path:hover {
  color: black;
}
.link--jagged-clip-path {
  display: inline-block;
  background-color: #fcf300;
  transition: color 0.6s;
  clip-path: polygon(0% 10%, 10% 0%, 20% 10%, 30% 0%, 40% 10%, 50% 0%, 60% 10%, 70% 0%, 80% 10%, 90% 0%, 100% 10%, 100% 95%, 90% 100%, 80% 95%, 70% 100%, 60% 95%, 50% 100%, 40% 95%, 30% 100%, 20% 95%, 10% 100%, 0% 95%);
  transition: clip-path 0.6s;
}
.link--jagged-clip-path:hover {
  color: black;
}
.link--jagged-clip-path:hover {
  clip-path: polygon(0% 0%, 10% 20%, 20% 0%, 30% 20%, 40% 0%, 50% 20%, 60% 0%, 70% 20%, 80% 0%, 90% 20%, 100% 0%, 100% 100%, 90% 80%, 80% 100%, 70% 80%, 60% 100%, 50% 80%, 40% 100%, 30% 80%, 20% 100%, 10% 80%, 0% 100%);
}
.link--fine-blinds-clip-path {
  display: inline-block;
  position: relative;
  transition: color 0.6s;
}
.link--fine-blinds-clip-path:hover {
  color: black;
}
.link--fine-blinds-clip-path::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -3px;
  top: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background-color: #fcf300;
  clip-path: polygon(0% 0%, 100% 0%, 100% 12%, 4% 12%, 4% 16%, 100% 16%, 100% 28%, 4% 28%, 4% 32%, 100% 32%, 100% 44%, 4% 44%, 4% 48%, 100% 48%, 100% 60%, 4% 60%, 4% 64%, 100% 64%, 100% 76%, 4% 76%, 4% 80%, 100% 80%, 100% 92%, 4% 92%, 4% 96%, 100% 96%, 100% 100%, 0% 100%, 0% 88%, 96% 88%, 96% 84%, 0% 84%, 0% 72%, 96% 72%, 96% 68%, 0% 68%, 0% 56%, 96% 56%, 96% 52%, 0% 52%, 0% 40%, 96% 40%, 96% 36%, 0% 36%, 0% 24%, 96% 24%, 96% 20%, 0% 20%, 0% 8%, 96% 8%, 96% 4%, 0% 4%);
  transition: clip-path 0.6s;
}
.link--fine-blinds-clip-path:hover::before {
  clip-path: polygon(0% 0%, 100% 0%, 100% 12%, 100% 12%, 100% 16%, 100% 16%, 100% 28%, 100% 28%, 100% 32%, 100% 32%, 100% 44%, 100% 44%, 100% 48%, 100% 48%, 100% 60%, 100% 60%, 100% 64%, 100% 64%, 100% 76%, 100% 76%, 100% 80%, 100% 80%, 100% 92%, 100% 92%, 100% 96%, 100% 96%, 100% 100%, 0% 100%, 0% 88%, 0% 88%, 0% 84%, 0% 84%, 0% 72%, 0% 72%, 0% 68%, 0% 68%, 0% 56%, 0% 56%, 0% 52%, 0% 52%, 0% 40%, 0% 40%, 0% 36%, 0% 36%, 0% 24%, 0% 24%, 0% 20%, 0% 20%, 0% 8%, 0% 8%, 0% 4%, 0% 4%);
}

.link--transform-underline-from-middle {
  padding-bottom: 0.2ex;
  display: inline-block;
  position: relative;
}
.link--transform-underline-from-middle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.3ex;
  background-color: #072ac8;
  transform: scaleX(0);
  transition: transform 0.6s;
}
.link--transform-underline-from-middle:hover::before {
  transform: scaleX(1);
}
.link--transform-underline-slide-over-left {
  /* Shout out to Sam Larsen-Disney
     This effect is derived from his website https://sld.codes/ */
  padding-bottom: 0.2ex;
  display: inline-block;
  position: relative;
}
.link--transform-underline-slide-over-left::before {
  content: "";
  position: absolute;
  transform-origin: center left;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.3ex;
  background-color: #072ac8;
  transform: scaleX(0);
  transition: transform 0.6s;
}
.link--transform-underline-slide-over-left:hover::before {
  transform-origin: center right;
  transform: scaleX(1);
}
.link--transform-underline-slide-over-right {
  padding-bottom: 0.2ex;
  display: inline-block;
  position: relative;
}
.link--transform-underline-slide-over-right::before {
  content: "";
  bottom: 0;
  transform-origin: center right;
  position: absolute;
  left: 0;
  right: 0;
  height: 0.3ex;
  background-color: #072ac8;
  transform: scaleX(0);
  transition: transform 0.6s;
}
.link--transform-underline-slide-over-right:hover::before {
  transform-origin: center left;
  transform: scaleX(1);
}
.link--transform-underline-pop-up {
  /* Shout out to Eli Fitch
     This effect is derived from his website http://eli.wtf/ */
  padding: 0.2ex 0;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: color 0.6s;
}
.link--transform-underline-pop-up:hover {
  color: #fafafa;
}
.link--transform-underline-pop-up::before {
  content: "";
  position: absolute;
  display: block;
  z-index: -1;
  bottom: 0;
  left: 0;
  height: 0.3ex;
  width: 100%;
  background-color: #072ac8;
  transition: height 0.6s, width 0.6s, transform 0.6s;
}
.link--transform-underline-pop-up:hover::before {
  height: 100%;
  width: calc(100% + 0.5em);
  transform: translateX(-0.25em) skew(-7deg);
}

.link--svg-sine-wave {
  padding-bottom: 0.2ex;
}
.link--svg-sine-wave:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift 0.6s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23072ac8' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 0.4ex;
  text-decoration: none;
  background-repeat: repeat-x;
}
.link--svg-large-sine-wave {
  padding-bottom: 0.2ex;
}
.link--svg-large-sine-wave:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift 0.6s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23fcf300' stroke-width='1' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.link--svg-square-wave {
  padding-bottom: 0.8ex;
}
.link--svg-square-wave:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 8 9'%3E%3Cstyle type='text/css'%3E.square{animation:shift 0.6s linear infinite;}@keyframes shift {0%25 {transform:translateY(0.5px);} 50%25 {transform:translateY(3.5px);} 100%25 {transform:translateY(0.5px);}}%3C/style%3E%3Cpath fill='none' stroke='%23072ac8' stroke-width='1' class='square' d='M 0 4 V 0 H 4 V 4 H 8 V 0 H 12 V 4 H 16'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 0.8ex;
  background-repeat: repeat-x;
  text-decoration: none;
}

.link--popup-text {
  position: relative;
}
.link--popup-text::before, .link--popup-text::after {
  font-size: 0.9em;
  background: #fcf300;
  color: black;
  line-height: 1em;
  padding: 0.2em 0.15em 0.2em;
  border-radius: 0.2em;
  position: absolute;
  top: -1em;
  left: 50%;
  opacity: 0;
  transition: 0.2s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.2s transform cubic-bezier(0.33, 1, 0.68, 1);
}
.link--popup-text::before {
  content: "Click";
  transform: translate(-65%, 20%) rotateZ(-1deg);
}
.link--popup-text::after {
  content: "me!";
  transform: translate(45%, 20%) rotateZ(1deg);
}
.link--popup-text:hover::before, .link--popup-text:hover::after {
  transition: 0.4s opacity cubic-bezier(0.33, 1, 0.68, 1), 0.4s transform cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 1;
}
.link--popup-text:hover::before {
  transform: translatex(-75%) rotateZ(-3deg);
}
.link--popup-text:hover::after {
  transform: translatex(45%) rotateZ(3deg);
}

.link--fire-gif-background {
  background-position-y: calc(1em + 16px);
  transition: background-position-y 0.6s ease-out, color 0.6s ease-out;
  background-repeat: repeat-x;
  background-image: url("../images/fire-gif-transparent.gif"), linear-gradient(rgba(0, 0, 0, 0.7), black);
  background-size: contain;
  padding: 4px;
}
.link--fire-gif-background:hover {
  background-position-y: 0;
  color: white;
}
.link--fire-gif-pseudoelement {
  position: relative;
  display: inline-block;
  color: #072ac8;
  text-shadow: 0px 0px 4px white, 0px 0px 4px white, 0px 0px 4px white;
  transition: color 0.6s ease;
}
.link--fire-gif-pseudoelement:hover {
  color: black;
}
.link--fire-gif-pseudoelement::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: -1;
  background-repeat: repeat-x;
  background-image: url("../images/fire-gif-transparent.gif");
  background-size: auto 100%;
  transform: scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.3s ease-out;
}
.link--fire-gif-pseudoelement:hover::before {
  transform: scaleY(1);
  opacity: 1;
  transition: transform 0.6s ease, opacity 0.3s ease;
}

.link--svg-filter-turbulence:hover {
  filter: url("#turbulenceFilter");
}
.link--svg-filter-outline:hover {
  filter: url("#outlineFilter");
}
.link--svg-filter-dust:hover {
  filter: url("#dustFilter");
}
.link--svg-filter-horizontal-blur:hover {
  filter: url("#horizontalBlurFilter");
}
.link--svg-filter-vertical-blur:hover {
  filter: url("#verticalBlurFilter");
}
.link--svg-filter-colourful-stripe:hover {
  filter: url("#stripeFilter");
}

.link--fill-up-transform {
  position: relative;
  color: transparent;
  z-index: 2;
  font-weight: bold;
  text-decoration: underline;
  font-size: 2em;
}
.link--fill-up-transform__outline {
  color: #072ac8;
  color: transparent;
  -webkit-text-stroke: 1px #072ac8;
  background-image: linear-gradient(transparent 0%, transparent calc(50% - 0.4ex), #fcf300 calc(50% - 0.4ex), #fcf300 100%);
  background-size: 100% 200%;
  background-position: 0 0;
}
.link--fill-up-transform__clip {
  display: block;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.link--fill-up-transform__filled {
  display: block;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
  color: #072ac8;
  transform: translateY(-100%);
}
.link--fill-up-transform:hover .link--fill-up-transform__clip, .link--fill-up-transform:hover .link--fill-up-transform__filled {
  transform: translateY(0);
}

.link--cube-rotation {
  position: relative;
  display: inline-block;
  line-height: 1em;
  font-size: 2em;
}
.link--cube-rotation__top {
  display: inline-block;
  position: absolute;
  top: 0;
  transform: translateY(-50%) rotateX(90deg);
  transition: transform 0.6s ease;
}
.link--cube-rotation__front {
  display: inline-block;
  transform: translateZ(0.5em);
  transition: transform 0.6s ease;
  text-decoration: underline;
}
.link--cube-rotation:hover .link--cube-rotation__top {
  transform: translateY(0) translateZ(0.5em);
  color: black;
}
.link--cube-rotation:hover .link--cube-rotation__front {
  transform: translateY(50%) rotateX(-90deg);
}

.link--split-in-half {
  position: relative;
  display: inline-block;
  line-height: 1em;
  font-size: 2em;
  /*Can't use this type of underscore for multiple lines of text :( 
  Good for menu buttons though, this would use a transform animation instead of a background position animation, better performance :)
  .link--bottom:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8%;
    background: red;
    transform-origin: left bottom;
    transition: transform 0.2s ease;
  }

  .link:hover .link--bottom:before {
    transform: scaleX(0%);
  }
  */
}
.link--split-in-half--top {
  position: absolute;
  color: #072ac8;
  top: 0;
  display: inline-block;
  clip-path: polygon(0% 66%, 0% 0%, 100% 0%, 100% 40%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.link--split-in-half--top:after {
  content: "";
  position: absolute;
  top: 36%;
  left: 0;
  width: 100%;
  height: 8%;
  background: #1e96fc;
  transform: rotateZ(-2.2deg) scaleX(0%);
  transform-origin: right top;
  transition: transform 0.2s ease 0.22s;
}
.link--split-in-half--bottom {
  display: inline-block;
  clip-path: polygon(0% 65%, 100% 40%, 100% 110%, 0% 110%);
  text-decoration: underline;
  color: #072ac8;
  transition: background-position 0.2s ease 0.22s;
  text-decoration: none;
  background-size: 200% 8%;
  background-position: left bottom;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, #1e96fc 50%, transparent 50%);
}
.link--split-in-half--bottom:after {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  height: 8%;
  background: #1e96fc;
  transform: rotateZ(-2deg) scaleX(0%);
  transform-origin: right top;
  transition: transform 0.2s ease 0.22s;
}
.link--split-in-half:hover .link--split-in-half--top {
  transform: translateY(-0.5em) rotateZ(-3deg);
  transition: transform 0.5s cubic-bezier(0.12, 0.8, 0.57, 1) 0.42s;
}
.link--split-in-half:hover .link--split-in-half--bottom {
  background-position: 100% bottom;
  transition: background-position 0.2s ease;
}
.link--split-in-half:hover .link--split-in-half--top:after {
  top: 56.5%;
  transform-origin: left top;
  transform: rotateZ(-2.4deg) scaleX(100%);
}
.link--split-in-half:hover .link--split-in-half--bottom:after {
  top: 65%;
  transform-origin: left top;
  transform: rotateZ(-2.4deg) scaleX(100%);
}

/*# sourceMappingURL=app.css.map */