<h1>Cocktail</h1>

/*

Part of Title Sequences collection:
https://codepen.io/collection/nNmwgP

*/

@font-face {
  font-family: "Gillies Gothic Light";
  src: url("https://raw.githubusercontent.com/robole/title-sequences/main/cocktail/gillies-gothic-light.otf");
  font-display: block;
}

body {
  height: 100dvh;
  margin: 0;

  display: grid;
  background-color: black;
  place-items: center;
}

h1 {
  position: relative;
  color: white;

  font-family: "Gillies Gothic Light", cursive;
  font-size: 6rem;

  text-shadow: 0 0 5px blue, 0 0 10px blue, 0 0 15px blue, 0 0 20px blue,
    0 0 25px blue, 0 0 30px blue;
}

h1::before {
  position: absolute;
  top: -16%;
  left: 20%;

  display: inline-block;
  content: "";

  border-radius: 50%;
  width: 70%;
  aspect-ratio: 1/1;
  z-index: -1;

  border: 4px solid hsla(300, 97%, 95%);

  /* also can use filter: none; */
  filter: drop-shadow(0 0 0 hsla(300, 97%, 60%))
    drop-shadow(0 0 0 hsla(300, 97%, 60%))
    drop-shadow(0 0 0 hsla(300, 97%, 60%));

  animation: flicker-ring 2s infinite ease-in-out;
}

@keyframes flicker-ring {
  to {
    filter: drop-shadow(0 0 10px hsla(300, 97%, 60%))
      drop-shadow(0 0 20px hsla(300, 97%, 60%))
      drop-shadow(0 0 30px hsla(300, 97%, 60%));
  }
}