body {
  padding: 0rem;
  margin-left: 0;
  /* transform: rotateZ(360deg); */
}




/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}

::-moz-selection {
  background: #000000;
}

::selection {
  background: #000000;
}

.glitch {
  background: #000000;
  color: #fff;
  font-family: 'Kode', monospace;
  /* -webkit-animation: crt 5ms infinite; */
  /* animation: crt 5ms infinite; */
}

/* .glitch::after {
  background: repeating-linear-gradient(top, transparent 0px, transparent 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 4px);
  content: "";
} */

.glitch a {
  color: #ffffff;
  /* background: rgba(100, 225, 0, 0.1); */
}

.container {
  position: relative;
  height: 100vh;
  width: 100%;
}

/* .container * {
  -webkit-animation: 5s distort 6s infinite alternate, flick 50ms infinite, jump 50ms infinite;
  animation: 5s distort 6s infinite alternate, flick 50ms infinite, jump 50ms infinite; */

/* } */

a {
  letter-spacing: 0.1em;
}




body {
  overflow-y: auto;
  overflow-x: hidden;
}


.phone {
  width: 100%;
  /* margin-top: 2rem; */
}

.mdl-cell {
  display: flex;
  justify-content: center;
}

.display_name_input {
  display: none;
  flex-direction: column;
  align-content: stretch;
  align-items: stretch;
  /* padding: 1em; */
  width: 100%;
  margin-bottom: 2rem;
}


.key_slots {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  align-items: stretch;
  /* padding: 1em; */
  width: 100%;
  margin-bottom: 4rem;
}

.email-field {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  width: 100%;
}


h3 {

  color: #ffffff;
  font-size: 3.2em;
  font-family: 'Kode', monospace;
  width: 100%;
  transition: all 0.5s ease-out;

}

input {
  background-color: transparent;
  color: #ffffff;
  padding: 0.5em;
  border: #ffffff;
  border-style: solid;
  border-width: 0.5px;
  font-size: 1.2em;
  font-family: 'Kode', monospace;
  /* width: 100%; */
  transition: all 0.5s ease-out;

}

.mdl-textfield {
  width: 100%;
}

.iti {
  width: 100%;
  margin-top: 2rem;
}



button {
  background-color: #ffffff;
  color: black;
  padding: 0.5em;
  font-size: 1.2em;
  border: solid;
  border-color: #ffffff;
  border-width: 2px;
  /* width: 100%; */
  font-family: 'Kode', monospace;
  width: 100%;
  cursor: pointer;
  /* margin-bottom: 1em; */

  clip-path: polygon(0px 10px,
      2px 10px,
      2px 6px,
      4px 6px,
      4px 4px,
      6px 4px,
      6px 2px,
      8px 2px,
      10px 2px,
      10px 0px,
      calc(100% - 10px) 0px,
      calc(100% - 10px) 2px,
      calc(100% - 6px) 2px,
      calc(100% - 6px) 4px,
      calc(100% - 4px) 4px,
      calc(100% - 4px) 6px,
      calc(100% - 2px) 6px,
      calc(100% - 2px) 8px,
      calc(100% - 2px) 10px,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 2px) calc(100% - 10px),
      calc(100% - 2px) calc(100% - 6px),
      calc(100% - 4px) calc(100% - 6px),
      calc(100% - 4px) calc(100% - 4px),
      calc(100% - 6px) calc(100% - 4px),
      calc(100% - 6px) calc(100% - 2px),
      calc(100% - 8px) calc(100% - 2px),
      calc(100% - 10px) calc(100% - 2px),
      calc(100% - 10px) 100%,
      10px 100%,
      10px calc(100% - 2px),
      6px calc(100% - 2px),
      6px calc(100% - 4px),
      4px calc(100% - 4px),
      4px calc(100% - 6px),
      2px calc(100% - 6px),
      2px calc(100% - 8px),
      2px calc(100% - 10px),
      0px calc(100% - 10px));
}

.key {
  width: auto;
}

.unlocked_key {
  padding-top: 2em;
}

.submit_button {
  margin-top: 1em;
}

.unlocked_key {
  font-size: 1.2em;
  font-weight: bold;
  padding-bottom: 1em;
}

audio {
  width: 100%;
}



.unlock_content {
  padding: 1em;
  font-size: 1.2em;
  /* width: 100%; */
  margin-top: 2em;
  background-color: rgba(256, 256, 256, 0.07);
  font-family: 'Kode', monospace;
  /* color: #000000; */
}

.unlocked_key {
  background-color: rgb(74, 190, 65);
color: black;
}

.key_container {
  display: none;
  flex-direction: column;
}

.key_slots input {
  margin-top: 2em;

}

.alt {
  padding-left: 2em;
  padding-right: 2em;
}

.mdl-layout__content {
  max-width: 800px;
  width: 100%;
}

.mdl-layout {
  align-items: center;
}

.iti__flag {
  background-image: url("assets/img/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("assets/img/flags@2x.png");
  }
}

.sign_in_form {
  display: none;
  justify-content: center;
}

.main-container {
  max-width: 800px;
  width: 85%;
  padding-top: 3em;

}

.show {
  display: flex;
}

.auto_size {
  width: max-content;
}

.glitch {
  display: flex;
  justify-content: center;
}

.iti--allow-dropdown {
  margin-bottom: 1em;
}

.logo {
  width: 8em;
  height: 100%;
}

.iti__country-list {
  background-color: #131513;
}

@keyframes green-pulse {
  from {
    box-shadow: 0rem 0rem 0.01rem 0.05rem #ffffff00;
  }

  to {
    box-shadow: 0rem 0rem 0.36rem 0.36rem #ffffff30;
  }
}

@keyframes red-pulse {
  from {
    box-shadow: 0rem 0rem 0.01rem 0.05rem #ff000000;
  }

  to {
    box-shadow: 0rem 0rem 0.36rem 0.36rem #ff000030;
  }
}

@keyframes success-pulse {
  from {
    box-shadow: 0rem 0rem 0.01rem 0.05rem #0bb43e00;
  }

  to {
    box-shadow: 0rem 0rem 0.36rem 0.36rem #0bb43e30;
  }
}



@keyframes blue-pulse {
  from {
    box-shadow: 0rem 0rem 0.01rem 0.05rem #5dcaff00;
  }

  to {
    box-shadow: 0rem 0rem 0.36rem 0.36rem #5dcaff40;
  }
}


.neon {
  position: relative;
  /* background: linear-gradient(#008080, #55d5d5, #008080); */
  box-shadow: 0 0 0 0 #222222;
  /*   border-radius:.5rem; */
  animation-name: green-pulse;
  animation-duration: 1.4s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing: cubic-bezier(0, 0, 0, 1);

}