*Animation */

/* HTML */
/* <!-- <div class="neon"><h1 contenteditable spellcheck="false">hotel</h1></div> --> */

:root {
  --neon-text-color: #f40;
  --neon-border-color: #08f;
}

@font-face {
  font-family: beon;
  src: url(fonts/Beon.otf);
}

h1 {
  font-size: 13rem;
  font-weight: 200;
  font-style: italic;
  color: #fff;
  padding: 4rem 6rem 5.5rem;
  border: 0.4rem solid #fff;
  border-radius: 2rem;
  text-transform: uppercase;
  animation: flicker 1.5s infinite alternate;
}

h1::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1:focus {
  outline: none;
}

:root {
  --neon-text-color: #f40;
  --neon-border-color: #f40;
}

h1 {
  font-size: 8rem;
  font-style: italic;
  color: rgb(255, 226, 226);
  padding: 4rem 6rem 5.5rem;
  border: 0.4rem solid rgb(255, 226, 226);
  border-radius: 2rem;
  animation: flicker 1s infinite alternate;
}

h1::-moz-selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1::selection {
  background-color: var(--neon-border-color);
  color: var(--neon-text-color);
}

h1:focus {
  outline: none;
}

@keyframes flicker {
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: -0.2rem -0.2rem 1rem #fff, 0.2rem 0.2rem 1rem #fff,
      0 0 2rem var(--neon-text-color), 0 0 4rem var(--neon-text-color),
      0 0 6rem var(--neon-text-color), 0 0 8rem var(--neon-text-color),
      0 0 10rem var(--neon-text-color);

    box-shadow: 0 0 0.5rem #fff, inset 0 0 0.5rem #fff,
      0 0 2rem var(--neon-border-color), inset 0 0 2rem var(--neon-border-color),
      0 0 4rem var(--neon-border-color), inset 0 0 4rem var(--neon-border-color);
  }

  20%,
  24%,
  55% {
    text-shadow: none;
    box-shadow: none;
  }
}

.neon {
  font-family: beon;
  margin-top: 3%;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  padding: 5%;
}