body,
html {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  height: 100%;
  background: #000;
}

body {
  background: url("./images/kai-pilger-Ef6iL87-vOA-unsplash.webp") no-repeat
    center center fixed;
  background-size: cover;
}

#container {
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  margin-top: 3em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header > img {
  width: 6em;
  height: 6em;
  border-radius: 100%;
  border: 1px solid #000;
  box-shadow: rgb(28 32 93 / 24%) 0px 2px 8px 0px;
}

header > h1 {
  display: inline-block;
  font-size: 1em;
  font-weight: bold;
  border-radius: 1em;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 0.3em 0.6em;
  border: 1px solid #fffa;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul {
  box-sizing: border-box;
  list-style: none;
  margin: 0 auto;
  padding: 2em;
}

ul > li {
  margin: 1.4em 0;
}

.glitch-btn,
.glitch-btn::after {
  padding: 10px 50px;
  font-size: 20px;
  border: none;
  border-radius: 5px;
  color: white;
  background-color: transparent;
  position: relative;
  text-decoration: none;
}

.glitch-btn {
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgb(218, 41, 28);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.glitch-btn::after {
  --move1: inset(50% 50% 50% 50%);
  --move2: inset(31% 0 40% 0);
  --move3: inset(39% 0 15% 0);
  --move4: inset(45% 0 40% 0);
  --move5: inset(45% 0 6% 0);
  --move6: inset(14% 0 61% 0);
  clip-path: var(--move1);
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.glitch-btn--threads::after {
  left: 1em;
  content: "Threads";
}
.glitch-btn--bluesky::after {
  left: 1em;
  content: "Bluesky";
}
.glitch-btn--twitter::after {
  left: 1em;
  content: "Twitter / X";
}
.glitch-btn--instagram::after {
  left: 1em;
  content: "Instagram";
}
.glitch-btn--blog::after {
  left: 1.5em;
  content: "Blog";
}
.glitch-btn--blog-pro::after {
  left: 1.5em;
  content: "Blog (Pro)";
}

.blog-pro-logo {
  height: 20px;
  margin-right: 0.5em;
}

.glitch-btn:hover::after, .glitch-btn-activated::after {
  animation: glitch_4011 1s;
  text-shadow: 10 10px 10px black;
  animation-timing-function: steps(2, end);
  text-shadow: -3px -3px 0px #ff3c3c, 3px 3px 0px #e94be8;
  background-color: transparent;
  border: 3px solid rgb(255, 37, 37);
}

.glitch-btn:hover, .glitch-btn-activated {
  text-shadow: -1px -1px 0px #ff3c3c, 1px 1px 0px #e94be8;
  box-shadow: 0px 10px 10px -10px rgb(255, 37, 37);
}
@keyframes glitch_4011 {
  0% {
    clip-path: var(--move1);
    transform: translate(0px, -10px);
  }

  10% {
    clip-path: var(--move2);
    transform: translate(-10px, 10px);
  }

  20% {
    clip-path: var(--move3);
    transform: translate(10px, 0px);
  }

  30% {
    clip-path: var(--move4);
    transform: translate(-10px, 10px);
  }

  40% {
    clip-path: var(--move5);
    transform: translate(10px, -10px);
  }

  50% {
    clip-path: var(--move6);
    transform: translate(-10px, 10px);
  }

  60% {
    clip-path: var(--move1);
    transform: translate(10px, -10px);
  }

  70% {
    clip-path: var(--move3);
    transform: translate(-10px, 10px);
  }

  80% {
    clip-path: var(--move2);
    transform: translate(10px, -10px);
  }

  90% {
    clip-path: var(--move4);
    transform: translate(-10px, 10px);
  }

  100% {
    clip-path: var(--move1);
    transform: translate(0);
  }
}

.glitch-btn > span {
  margin-right: 0.3em;
}

#particles-js {
  height: 100%;
  overflow: hidden;
}