h1, h2, header, p, a {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

a {
  color: black;
  text-decoration: none; }

#survey{
  display: block;
}

body {
  margin: 0;
  overflow-x: hidden; }

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

.title {
  font-family: "Fugue";
  font-weight: bold; }

.austin {
  font-family: "Austin Cyr";
  font-weight: normal; }

.calibre {
  font-family: "Calibre";
  font-weight: bold; }

.bodyText {
  font-family: "Brandon Text";
  font-weight: normal; }

#container {
  z-index: 1;
  height: 100vh;
  width: 100vw;
  background: url(../assets/img/render.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.white {
  color: #F8FBFC; }

.black {
  color: #2e3035; }

.lightGray {
  color: #C2C9CE; }

.gray {
  color: #979EA4; }

/* UI */
.ui {
  transition: all .25s ease;
  z-index: 2000; }

/* TITLE */
#mainTitle {
  --base-color: #e7a9ff;
  --shadow-one: #5b00af;
  --shadow-two: #3c0074;
  z-index: 1002;
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; 
  text-shadow: 0 0 5px var(--shadow-one), 0 0 15px var(--shadow-one), 0 0 20px var(--shadow-one), 0 0 40px var(--shadow-one), 0 0 60px var(--shadow-two), 0 0 10px var(--shadow-two), 0 0 98px var(--shadow-two);
  color: var(--base-color);
}
  #mainTitle .labs {
    animation-delay: .21s;
    animation-duration: 5s;
  }
  #mainTitle span {
    font-size: 100px;
    margin: 0; 
    animation: blink 6s infinite;
  }
  #mainTitle h1 {
    font-size: 100px;
    margin: 0; 
    animation: blink 6s infinite;
  }
  #mainTitle div {
    text-align: center;
    width: 100%;
    left: 50%;
    height: 5px;
    border-radius: 20px;
    background-color: var(--base-color);
    box-shadow: 0 0 10px var(--shadow-one), 0px 0px 15px var(--shadow-one), 0px 0px 18px var(--shadow-one), 0px 0px 20px var(--shadow-one), 0px 0px 25px var(--shadow-two), 0px 0px 2px var(--shadow-two);
    margin: 0;
    animation: open 5.5s cubic-bezier(.32,.05,0,.47) forwards;  
  }
  @keyframes open {
    0%   { 
        left: 50%;
        width: 0%;
    }
    100% {
        left: 0%;
        width: 100%;
    }
}
  #mainTitle h2 {
    font-size: 30px;
    font-weight: bold; 
    animation: blink 4s .37s infinite;
  }
  @keyframes blink {
    10%,15%,24%,27%,29%,65% {
      opacity: 0;
    }
    0%,8%,12%,14%,18%,22%,25%,26%,28%,31%,64%,66%,100% {
      opacity: 1;
    }
  }

/* loader */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: #000000;
}

/* After Load */
.loaded #loader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all .25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #mainTitle>h1, .loaded #mainTitle>h2 {
  animation: none;
}

.loaded #mainTitle>h2{
  animation: glitch 4s linear infinite !important;
}

@keyframes glitch{
  10%,15%,24%,27%,29%,65%,92%,96%{
    opacity: 0;
  }
  0%,8%,12%,14%,18%,22%,25%,26%,28%,31%,64%,66%,90%,94%{
    opacity: 1;
  }
  2%,6%,58%,62%,66%,90%,98%{
    transform: translate(0px,0) skew(0deg);
  }
  4%,60%,94%{
    transform: translate(4px,0) skew(20deg);
  }
  64%,92%,96%{
    transform: translate(-6px,0) skew(-50deg); 
  }
}

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