:root {
  --farbe_1: #2259b7;
  --farbe_1-05: hsla(218, 69%, 43%, .5);
  --farbe_2: #dd2544;
  --farbe_2-05: hsla(350, 73%, 51%, .5);
  --farbe_akzent_1: linear-gradient(135deg, var(--farbe_1) 0%, var(--farbe_2) 100%);
  --farbe_akzent_3: linear-gradient(135deg, var(--farbe_1-05) 0%, var(--farbe_2-05) 100%);
  --farbe_akzent_2: linear-gradient(135deg, rgba(34,89,183,0.8) 0% , rgba(221,37,68,0.8) 100%);
  --stripes_farbe: repeating-linear-gradient(135deg, #333, #333 2px, hsla(0, 0%, 20%, .8) 2px, hsla(0, 0%, 20%, .8) 20px);
  --stripes_groesse: 26.87px 26.87px;
  --skill_height: 5px;
  --hl_color: #333;
  --easing: cubic-bezier(0.480, 0.030, 0.155, 0.990); }

/* Scss Document */
.underline h1, .underline h2, a.underline {
  position: relative;
  text-decoration: none;
  padding-bottom: 5px; }
  .underline h1:before, .underline h1:after, .underline h2:before, .underline h2:after, a.underline:before, a.underline:after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(127deg, #4c5ddd 0%, #e8476a 100%);
    background-image: -webkit- linear-gradient(127deg, #4c5ddd 0%, #e8476a 100%);
    background-image: -o- linear-gradient(127deg, #4c5ddd 0%, #e8476a 100%); }
  .underline h1:before, .underline h2:before, a.underline:before {
    opacity: 0;
    transform: translateY(-6px);
    transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s; }
  .underline h1:after, .underline h2:after, a.underline:after {
    opacity: 0;
    transform: translateY(3px);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; }
  .underline h1:hover:before, .underline h1:hover:after, .underline h1:focus:before, .underline h1:focus:after, .underline h2:hover:before, .underline h2:hover:after, .underline h2:focus:before, .underline h2:focus:after, a.underline:hover:before, a.underline:hover:after, a.underline:focus:before, a.underline:focus:after {
    opacity: 1;
    transform: translateY(0); }
  .underline h1:hover:before, .underline h1:focus:before, .underline h2:hover:before, .underline h2:focus:before, a.underline:hover:before, a.underline:focus:before {
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; }
  .underline h1:hover:after, .underline h1:focus:after, .underline h2:hover:after, .underline h2:focus:after, a.underline:hover:after, a.underline:focus:after {
    transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s; }

a.underline:before, a.underline:after {
  background-image: none;
  color: white; }

.active.underline h1:before, .active.underline h1:after, .active.underline h2:before, .active.underline h2:after, a.active.underline:before, a.active.underline:after {
  opacity: 1;
  transform: translateY(0); }
.active.underline h1:before, .active.underline h2:before, a.active.underline:before {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; }
.active.underline h1:after, .active.underline h2:after, a.active.underline:after {
  transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s; }

.underlined {
  color: black;
  flex: 1;
  text-decoration: none;
  background-image: linear-gradient(to right, yellow 0, yellow 100%);
  background-position: 0 1.2em;
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: background .5s; }
  .underlined:hover {
    background-size: 100% 100%; }
  .underlined--thin {
    background-image: linear-gradient(to right, black 0, black 100%); }
  .underlined--thick {
    background-position: 0 -0.1em; }
  .underlined--offset {
    background-position: 0 0.2em;
    box-shadow: inset 0 -.5em 0 0 white; }
  .underlined--gradient {
    background-position: 0 -0.1em;
    background-image: -webkit-var(--farbe_akzent_1);
    background-image: -o-var(--farbe_akzent_1);
    background-image: var(--farbe_akzent_1); }
  .underlined--reverse {
    background-position: 100% -0.1em; }