.body-gradient {
    background: linear-gradient(270deg, #fec691, #efd7f1, #d2eff1);
    background-size: 600% 600%;
    -webkit-animation: gradient 30s ease infinite;
    -moz-animation: gradient 30s ease infinite;
    animation: gradient 30s ease infinite;
    height: 100%;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes gradient {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}

.nav-gradient {
  background: linear-gradient(270deg, #fec691, #efd7f1, #d2eff1);
  background-size: : 100%;
}

.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited {
  transition: none;
}

.vertical-center {
  width: 100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.container {
  max-width: 88vw;
}

.lh2 {
  line-height: 2;
}

svg {
  z-index: 10;
}

.smol {
  height: 1px;
  width: 1px;
}

@media screen and (max-device-width: 768px) {
  .mobile-gradient {

    /* background: linear-gradient(90deg, #fec691, #feb978, #d2eff1, #efd7f1); */

    /* background: linear-gradient(-45deg, #fec691, #efd7f1, #d2eff1, #fec691);

    background: linear-gradient(-45deg, #fec691, #efd7f1, #d2eff1);

    background-size: 400% 400%;
  	animation: gradient 15s ease infinite;
  	height: 100vh; */

    /*
    background: -webkit-gradient(linear, left top, left bottom, from(#f6e9f3), color-stop(#f6ece9), color-stop(#e9f3f6), to(#e9f3f6));
    background: -o-linear-gradient(#f6e9f3, #f6ece9, #e9f3f6, #e9f3f6);
    background: linear-gradient(#f6e9f3, #f6ece9, #e9f3f6, #e9f3f6);
 	  height: 100%; */
  }

  @keyframes gradient {
  	0% {
  		background-position: 0% 50%;
  	}
  	50% {
  		background-position: 100% 50%;
  	}
  	100% {
  		background-position: 0% 50%;
  	}
  }
}

nav, .lh-copy {  text-underline-offset: 0.25em;}
.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited {
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

@media screen and (max-device-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}

/**** MENU ****/

@media screen and (min-device-width: 768px) {
  .f0-ns { font-size: 4rem; }
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  /* background: -webkit-gradient(linear, left top, left bottom, from(#f6e9f3), color-stop(#f6ece9), color-stop(#e9f3f6), to(#e9f3f6));
  background: -o-linear-gradient(#f6e9f3, #f6ece9, #e9f3f6, #e9f3f6);
  background: linear-gradient(#f6e9f3, #f6ece9, #e9f3f6, #e9f3f6); */


  /* background: linear-gradient(90deg, #efd7f1, #d2eff1, #feb978, #fec691);   */
  /* background: linear-gradient(90deg, #fec691, #feb978, #d2eff1, #efd7f1); */
  /* background: linear-gradient(-45deg, #fec691, #efd7f1, #d2eff1); */
  /* background: linear-gradient(270deg, #fec691, #efd7f1, #d2eff1);
 */

  background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;

  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav a {
  color: #000;
}

/**** AURAS ****/

.aura-one::before,
.aura-one::after {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  -webkit-mask:radial-gradient(at 70%, red , transparent 90%);
  mix-blend-mode: color;
  content: '';

  -webkit-animation: linear infinite;
  -webkit-animation-name: aura-one;
  -webkit-animation-duration: 10s;

  box-shadow: 0 0 5px 10px snow;

  border-radius: 70%;
  width: 20rem;
}

.aura-one::before {
  background: #000;
  filter: url("#f");
}

.aura-one::after {
  background: linear-gradient(#F8F0ED, #e55d87, #5fc3e4, #F8F0ED);
}

@-webkit-keyframes aura-one {
  0% {
    top: 0;
    bottom: 0;
    left: 0;
  }
  48% {
    rotate: 90deg;
    -webkit-transform: rotateY(0deg);
  }
  50% {
    left: 80%;
    bottom: 60%;
  }
}

.aura-two::before,
.aura-two::after {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
  -webkit-mask:radial-gradient(at 75%, red , transparent 90%);
  mix-blend-mode: color;
  content: '';

  -webkit-animation: linear infinite;
  -webkit-animation-name: aura-two;
  -webkit-animation-duration: 8s;

  border-radius: 50%;
  width: 20rem;
}

.aura-two::before {
  background: #000;
  filter: url("#g");
}

.aura-two::after {
  background: linear-gradient(#F8F0ED, #e55d87, #5fc3e4, #F8F0ED);
  /* background: linear-gradient(#e55d87, #5fc3e4); */
}

@-webkit-keyframes aura-two {
  0% {
    left: 80%;
    bottom: 60%;
  }
  48% {
    rotate: 90deg;
    -webkit-transform: rotateY(0deg);
  }
  50% {
    top: 0;
    bottom: 0;
    left: 0;
  }
}

.aura-three::before,
.aura-three::after {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  -webkit-mask:radial-gradient(at 75%, red , transparent 90%);
  mix-blend-mode: color;
  content: '';

  -webkit-animation: linear infinite;
  -webkit-animation-name: aura-three;
  -webkit-animation-duration: 6s;

  border-radius: 50%;
  width: 30rem;
}

.aura-three::before {
  background: #000;
  filter: url("#h");
}

.aura-three::after {
  background: linear-gradient(#F8F0ED, #e55d87, #5fc3e4, #F8F0ED);
}

@-webkit-keyframes aura-three {
  0% {
    top: 0;
    bottom: 0;
    left: 0;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    left: 100%;
    top: 100%;
    bottom: 100%;
  }
}

.aura-four::before,
.aura-four::after {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  -webkit-mask:radial-gradient(at 75%, red , transparent 90%);
  mix-blend-mode: color;
  content: '';

  -webkit-animation: linear infinite;
  -webkit-animation-name: aura-four;
  -webkit-animation-duration: 6s;

  border-radius: 50%;
  width: 20rem;
}

.aura-four::before {
  background: #000;
  filter: url("#i");
}

.aura-four::after {
  background: linear-gradient(#F8F0ED, #e55d87, #5fc3e4, #F8F0ED);
}

@-webkit-keyframes aura-four {
  0% {
    top: 60%;
    bottom: 0;
    left: 100%;
  }
  48% {
    -webkit-transform: rotateY(0deg);
  }
  50% {
    bottom: 20%;
    left: 20%;
  }

  100% {
    bottom: 0;
    left: 100%;
  }
}