@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,900,200);

body {
  background-color: black;
  color: white;
  font-family: "Source Sans Pro", sans-serif;
}
.center {
  display: flex;
}

.container {
  max-width: 40rem;
  margin: 0 auto;
  padding: 20px;
}

.center-text {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: white;
}

.glitch {
  position: relative;
  color: white;
  mix-blend-mode: lighten;

  &:before,
  &:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    width: 100%;
    background: black;
    clip: rect(0, 0, 0, 0);
  }

  &:before {
    left: -1px;
    text-shadow: 1px 0 rgba(red, 0.7);
  }

  &:after {
    left: 1px;
    text-shadow: -1px 0 rgba(blue, 0.7);
  }

  &:hover {
    &:before {
      text-shadow: 4px 0 rgba(red, 0.7);
      animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
    }
    &:after {
      text-shadow: -5px 0 rgba(blue, 0.7);
      animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
    }
  }
}

@keyframes glitch-loop-1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }
}

@keyframes glitch-loop-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
  }
  50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
  }
  75% {
    top: 0px;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
  }
  100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}

#status {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 900;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background-color: rgba(221, 0, 255, 0.9);
  color: white;
  display: none;
  justify-content: left;
  align-items: center;
  font-size: 1.5rem;
  z-index: 1000;
  padding: 0 1rem;
}

#qrCodeDisplay {
  display: none;
}
.qrCodeDisplay {
  flex-direction: column;
}

.form {
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px solid #333;
  border-radius: 5px;
}

.form label {
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.form input,
.form select {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #222;
  color: white;
  border: 1px solid #444;
  border-radius: 3px;
  font-family: "Source Sans Pro", sans-serif;
}

.form button {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: "Source Sans Pro", sans-serif;
}

.form button:hover {
  background-color: #45a049;
}

#qrCodeDisplay button {
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
  background-color: #555;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-family: "Source Sans Pro", sans-serif;
}

#qrCodeDisplay button:hover {
  background-color: #666;
}