* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1d1e22;
  background-image: radial-gradient(rgba(66, 195, 200, 0.2), #1d1e22 120%);
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg, rgba(29, 30, 34, 0.5), rgba(29, 30, 34, 0.5) 1px, transparent 1px, transparent 2px);
  pointer-events: none;
}

*::selection {
  background: #a5e5d4;
  color: #1d1e22;
  text-shadow: none;
}

.input {
  width: 100%;
  height: 45px;
  padding: 0 8px;
  background: transparent;
  outline: none;
  border: 1px solid #a5e5d4;
  border-radius: 0px;
  caret-color: #42c3c8;
  color: #a5e5d4;
  font-weight: 900;
  font-family: "M PLUS 1p", "Open Sans", sans-serif;
  animation: an 0.9s infinite alternate;
  transition: border-color 0.1s, color 0.1s, text-shadow 0.1s, transform 0.3s 1.2s;
}
@keyframes an {
  0%, 50% {
    ph: visible;
  }
  51%, 100% {
    ph: hidden;
  }
}
.input::placeholder {
  color: #a5e5d4;
  transition: opacity 0.1s, color 0.1s;
  visibility: var(ph);
}
.input:focus, .input:hover {
  border-color: #42c3c8;
  color: #42c3c8;
}
.input:focus::placeholder, .input:hover::placeholder {
  color: #42c3c8;
}
.input:focus::selection, .input:hover::selection {
  background: #42c3c8;
}
.input:focus ~ .input--shadow, .input:hover ~ .input--shadow {
  border-color: #42c3c8;
}
.input:focus::placeholder {
  opacity: 0;
}

.text {
  position: relative;
  padding: 30px;
  font-size: 36px;
  color: #a5e5d4;
  will-change: contents, width;
  font-family: "M PLUS 1p", "Open Sans", sans-serif;
  text-shadow: 2px 4px 10px rgba(165, 229, 212, 0.5);
}
.text .gw-char:not(.gw-finished) .gw-ghosts {
  opacity: 0.5;
}
.text .gw-glitched {
  opacity: 0.5;
}
.text::after, .text::before {
  content: attr(data-gw-string);
  position: absolute;
  will-change: contents, width;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 30px;
  overflow: hidden;
  color: #42c3c8;
}
.text::before {
  z-index: -1;
  color: #d93da5;
}
.text.gw-writing {
  animation: glitch-skew 1s steps(10, end) infinite alternate-reverse;
}
.text.gw-writing::after, .text.gw-writing::before {
  opacity: 1;
}
.text.gw-writing::after {
  animation: glitch-animation-1 1.5s steps(20, end) infinite alternate-reverse;
}
.text.gw-writing::before {
  animation: glitch-animation-2 2s steps(20, end) infinite alternate-reverse;
}
@keyframes glitch-skew {
  0% {
    transform: skew(-4deg);
  }
  10% {
    transform: skew(4deg);
  }
  20% {
    transform: skew(4deg);
  }
  30% {
    transform: skew(-3deg);
  }
  40% {
    transform: skew(1deg);
  }
  50% {
    transform: skew(1deg);
  }
  60% {
    transform: skew(1deg);
  }
  70% {
    transform: skew(-2deg);
  }
  80% {
    transform: skew(3deg);
  }
  90% {
    transform: skew(3deg);
  }
  100% {
    transform: skew(-2deg);
  }
}
@keyframes glitch-animation-1 {
  0% {
    clip: rect(100px, 1000px, 29px, 0);
    transform: skew(-1deg) translatex(14px);
  }
  5% {
    clip: rect(92px, 1000px, 40px, 0);
    transform: skew(-6deg) translatex(5px);
  }
  10% {
    clip: rect(53px, 1000px, 38px, 0);
    transform: skew(2deg) translatex(5px);
  }
  15% {
    clip: rect(83px, 1000px, 25px, 0);
    transform: skew(6deg) translatex(-14px);
  }
  20% {
    clip: rect(45px, 1000px, 35px, 0);
    transform: skew(-5deg) translatex(-8px);
  }
  25% {
    clip: rect(74px, 1000px, 62px, 0);
    transform: skew(0deg) translatex(9px);
  }
  30% {
    clip: rect(61px, 1000px, 60px, 0);
    transform: skew(8deg) translatex(14px);
  }
  35% {
    clip: rect(73px, 1000px, 100px, 0);
    transform: skew(8deg) translatex(-5px);
  }
  40% {
    clip: rect(26px, 1000px, 37px, 0);
    transform: skew(7deg) translatex(3px);
  }
  45% {
    clip: rect(59px, 1000px, 15px, 0);
    transform: skew(1deg) translatex(6px);
  }
  50% {
    clip: rect(7px, 1000px, 91px, 0);
    transform: skew(-7deg) translatex(14px);
  }
  55% {
    clip: rect(93px, 1000px, 9px, 0);
    transform: skew(-5deg) translatex(8px);
  }
  60% {
    clip: rect(86px, 1000px, 36px, 0);
    transform: skew(7deg) translatex(-14px);
  }
  65% {
    clip: rect(72px, 1000px, 45px, 0);
    transform: skew(3deg) translatex(10px);
  }
  70% {
    clip: rect(98px, 1000px, 50px, 0);
    transform: skew(8deg) translatex(14px);
  }
  75% {
    clip: rect(76px, 1000px, 43px, 0);
    transform: skew(4deg) translatex(1px);
  }
  80% {
    clip: rect(22px, 1000px, 37px, 0);
    transform: skew(4deg) translatex(13px);
  }
  85% {
    clip: rect(37px, 1000px, 24px, 0);
    transform: skew(-1deg) translatex(-7px);
  }
  90% {
    clip: rect(76px, 1000px, 79px, 0);
    transform: skew(-7deg) translatex(-11px);
  }
  95% {
    clip: rect(97px, 1000px, 10px, 0);
    transform: skew(5deg) translatex(2px);
  }
  100% {
    clip: rect(45px, 1000px, 56px, 0);
    transform: skew(7deg) translatex(6px);
  }
}
@keyframes glitch-animation-2 {
  0% {
    clip: rect(60px, 1000px, 74px, 0);
    transform: skew(-1deg) translatex(-8px);
  }
  5% {
    clip: rect(19px, 1000px, 66px, 0);
    transform: skew(5deg) translatex(1px);
  }
  10% {
    clip: rect(96px, 1000px, 39px, 0);
    transform: skew(-3deg) translatex(3px);
  }
  15% {
    clip: rect(94px, 1000px, 35px, 0);
    transform: skew(-4deg) translatex(4px);
  }
  20% {
    clip: rect(68px, 1000px, 52px, 0);
    transform: skew(5deg) translatex(6px);
  }
  25% {
    clip: rect(80px, 1000px, 11px, 0);
    transform: skew(2deg) translatex(8px);
  }
  30% {
    clip: rect(66px, 1000px, 88px, 0);
    transform: skew(5deg) translatex(-8px);
  }
  35% {
    clip: rect(11px, 1000px, 96px, 0);
    transform: skew(2deg) translatex(-3px);
  }
  40% {
    clip: rect(41px, 1000px, 98px, 0);
    transform: skew(4deg) translatex(6px);
  }
  45% {
    clip: rect(17px, 1000px, 54px, 0);
    transform: skew(0deg) translatex(-7px);
  }
  50% {
    clip: rect(40px, 1000px, 43px, 0);
    transform: skew(0deg) translatex(9px);
  }
  55% {
    clip: rect(87px, 1000px, 54px, 0);
    transform: skew(-4deg) translatex(-4px);
  }
  60% {
    clip: rect(70px, 1000px, 75px, 0);
    transform: skew(-4deg) translatex(7px);
  }
  65% {
    clip: rect(83px, 1000px, 27px, 0);
    transform: skew(-2deg) translatex(-5px);
  }
  70% {
    clip: rect(25px, 1000px, 76px, 0);
    transform: skew(1deg) translatex(3px);
  }
  75% {
    clip: rect(46px, 1000px, 26px, 0);
    transform: skew(5deg) translatex(5px);
  }
  80% {
    clip: rect(29px, 1000px, 55px, 0);
    transform: skew(0deg) translatex(4px);
  }
  85% {
    clip: rect(80px, 1000px, 73px, 0);
    transform: skew(-1deg) translatex(-6px);
  }
  90% {
    clip: rect(57px, 1000px, 79px, 0);
    transform: skew(-3deg) translatex(6px);
  }
  95% {
    clip: rect(24px, 1000px, 48px, 0);
    transform: skew(0deg) translatex(-9px);
  }
  100% {
    clip: rect(80px, 1000px, 17px, 0);
    transform: skew(-4deg) translatex(6px);
  }
}

.log {
  position: absolute;
  top: 4vh;
  left: 30px;
  color: #a5e5d4;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  display: flex;
  flex-direction: column-reverse;
  font-family: "M PLUS 1p", "Open Sans", sans-serif;
  text-shadow: 1px 3px 6px rgba(165, 229, 212, 0.5);
}
.log::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -7px;
  width: 1px;
  height: 100%;
  background: #a5e5d4;
}

.links {
  position: absolute;
  bottom: 4vh;
  right: 30px;
  display: flex;
}
.links svg {
  height: 16px;
}
.links svg path {
  fill: #a5e5d4;
  stroke: none;
  transition: fill 0.1s;
}
.links svg:hover path {
  fill: #42c3c8;
}

.top-right {
  position: absolute;
  top: 20px;
  right: 20px;
}

.top {
  z-index: 50;
  position: absolute;
  top: 30px;
  left: 30px;
}

.center-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  z-index: 10;
  position: absolute;
  bottom: 30px;
  left: 0px;
}

.logo {
  height: 30px;
  opacity: 0.8;
}

.form-row {
  display: flex;
  flex-direction: column;
  animation: an 0.9s infinite alternate;
  transition: border-color 0.1s, color 0.1s, text-shadow 0.1s, transform 1s 1.2s;
}

.disabled {
  transform: translatey(100vh);
}

.submit {
  padding: 0 8px;
  border-radius: 0px;
  background: transparent;
  outline: none;
  border: 1px solid #a5e5d4;
  width: 100%;
  height: 45px;
  margin-top: 10px;
  color: #a5e5d4;
  font-weight: 900;
  cursor: pointer;
  font-family: "M PLUS 1p", "Open Sans", sans-serif;
  animation: an 0.9s infinite alternate;
  transition: border-color 0.1s, color 0.1s, text-shadow 0.1s, transform 0.3s 1.2s;
}
@keyframes an {
  0%, 50% {
    ph: visible;
  }
  51%, 100% {
    ph: hidden;
  }
}
.submit:focus, .submit:hover {
  border-color: #42c3c8;
  color: #42c3c8;
}
.submit:focus::placeholder, .submit:hover::placeholder {
  color: #42c3c8;
}
.submit:focus::selection, .submit:hover::selection {
  background: #42c3c8;
}
.submit:focus ~ .input--shadow, .submit:hover ~ .input--shadow {
  border-color: #42c3c8;
}

#mc_embed_signup input.mce_inline_error {
  border-color: unset !important;
}

#mc_embed_signup div.mce_inline_error {
  background-color: unset !important;
  padding: unset !important;
  margin: 0px !important;
  margin-top: 10px !important;
  font-size: 12px !important;
  color: white;
  font-weight: 500 !important;
  z-index: 50 !important;
  font-family: "M PLUS 1p", "Open Sans", sans-serif;
}

#mce-success-response {
  background-color: unset !important;
  padding: unset !important;
  margin: 0px !important;
  margin-top: 10px !important;
  font-size: 12px !important;
  color: white;
  font-weight: 500 !important;
  z-index: 50 !important;
  font-family: "M PLUS 1p", "Open Sans", sans-serif;
}

#mc_embed_signup {
  width: 100%;
  padding: 30px;
  padding-top: 0px;
}

.idx-logo {
  width: 150px;
}

@media (min-width: 768px) {
  .text {
    /* Apply some styles */
    font-size: 35px;
  }

  #mc_embed_signup {
    width: initial;
    padding: unset;
  }

  .logo-row {
    z-index: 10;
    position: absolute;
    bottom: 30px;
    right: 30px;
    left: unset;
  }

  .form-row {
    flex-direction: row;
  }

  .idx-logo {
    width: 150px;
  }

  .input {
    height: 35px;
    width: 240px;
  }

  .submit {
    width: 150px;
    height: 35px;
    margin-left: 5px;
    margin-top: 0px;
  }

  .logo-row {
    display: flex;
    justify-content: unset;
    width: unset;
    padding: unset;
  }

  .logo {
    margin-left: 30px;
    height: 30px;
    margin-bottom: 0px;
    opacity: 0.6;
    transition: all 0.1s ease-in;
  }

  .logo:hover {
    opacity: 1;
  }

  .disabled {
    transform: translatey(50vh);
  }
}
/*# sourceMappingURL=index.b90e8fb1.css.map */