// Colors
$colors: (
  'green': #01FF89,
  'purple': #7A5FFF,
  'black': #141414,
);


a {	
  color: transparent;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-shadow: 
    0 0 map_get($colors, 'black'), 
    .08em 0 0 #fff,
    0 0, 
    -.08em 0 0 #fff;
  vertical-align: bottom;

  &:after {
    background: linear-gradient(
      to bottom,
      rgba( map_get($colors, 'black'), 0.8),
      rgba( map_get($colors, 'black'), 0.8)
    ) center 1.08em / 100% 2px no-repeat;

    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 400%;
    will-change: transform;
    z-index: -1;
  }

  &:hover:after {
    animation: underline-gradient 6s linear infinite;
    background-image: linear-gradient(
      90deg, 
      rgba( map_get($colors, 'purple'), 0.8) 15%, 
      rgba( map_get($colors, 'green'), 0.6) 35%,  
      rgba( map_get($colors, 'purple'), 0.8) 85%
    );
  }
}

@keyframes underline-gradient { 
  0%{
    transform: translate3d(0%, 0%, 0);
  }
  100%{
    transform: translate3d(-75%, 0%, 0);
  }
}


/* page layout */
html, 
body {
  height: 100%;
}

body {
  font-family: 'Lora', serif;
}

.page-example {
  font-size: 3vw;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.page-foot {
  background: #ededed;
  bottom: 0;
  position: fixed;
  width: 100%;
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  
  a:after {
    background-size: 100% 1px;
  }
}

.page-foot-column {
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
  padding: 1em;
  
  &:nth-child(2) {
    text-align: right;
  }
}