* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.login-section {
}

html {
  font-size: 62.5%;
  position: relative;
}

.login-contiainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
}

.first-light-color {
  color: #ffffff;
}
.second-light-color {
  color: #e8f0f7;
}

.third-light-color {
  color: #d1e0ee;
}

.first-dark-color {
  color: #020a11;
}
.second-dark-color {
  color: #051422;
}

h1,
p,
h2,
h3 {
  font-family: sans-serif;
  display: inline-block;
}
.login-section {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  gap: 3rem;
  background-color: #051422;
  height: 100vh;
}

a,
a:link {
  text-decoration: none;
  font-family: sans-serif;
  color: white;
  cursor: pointer;
}

.steam-login-button {
  display: flex;
  justify-content: center;
  gap: 1rem;
  background-color: #020a11;
  padding: 1rem 2rem;
  border-radius: 1rem;
  width: 30rem;
}

.login-text {
  color: #d1e0ee;
  font-size: 1.8rem;
  width: max-content;
}
.steam-icon {
  width: 2.4rem;
  display: inline-block;
}

.glitch-wrapper {
  display: flex;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #051422;
}
.move-thread-confirm-cancel-container {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

.glitch-text {
  position: relative;
  color: white;
  font-size: 5rem;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0 0 2px white;
  z-index: 1; /* 👈 important */
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  color: white;
}

.glitch-text::before {
  color: #d1e0ee;
  z-index: -1;
  animation: glitchTop 1s infinite linear;
}

.glitch-text::after {
  color: #020a11;
  z-index: -2;
  animation: glitchBottom 1s infinite linear;
}

@keyframes glitchTop {
  0% {
    transform: translate(0);
    clip-path: inset(0 0 90% 0);
  }
  20% {
    transform: translate(-2px, -2px);
    clip-path: inset(0 0 70% 0);
  }
  40% {
    transform: translate(2px, 2px);
    clip-path: inset(10% 0 80% 0);
  }
  60% {
    transform: translate(-1px, 1px);
    clip-path: inset(20% 0 60% 0);
  }
  80% {
    transform: translate(1px, -1px);
    clip-path: inset(0 0 90% 0);
  }
  100% {
    transform: translate(0);
    clip-path: inset(0 0 90% 0);
  }
}

@keyframes glitchBottom {
  0% {
    transform: translate(0);
    clip-path: inset(90% 0 0 0);
  }
  20% {
    transform: translate(2px, 2px);
    clip-path: inset(70% 0 0 0);
  }
  40% {
    transform: translate(-2px, -2px);
    clip-path: inset(60% 0 0 0);
  }
  60% {
    transform: translate(1px, -1px);
    clip-path: inset(80% 0 0 0);
  }
  80% {
    transform: translate(-1px, 1px);
    clip-path: inset(90% 0 0 0);
  }
  100% {
    transform: translate(0);
    clip-path: inset(90% 0 0 0);
  }
}
.glitch-text {
  text-shadow: 0 0 2px white;
}

.dashboard-img {
  border-radius: 50%;
  height: 18.4rem;
  width: 18.4rem;
}

.button-generate {
  background-color: #114678;
  border-radius: 1rem;
  padding: 1rem 2rem;
  border: none;
}

.licence-input {
  width: 30rem;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}
.transparent-button {
  border: none;
  background: none;
}

.icon {
  font-size: 3rem;
  color: #e8f0f7;
}

.input-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: #071e33;
  border-radius: 1rem;
  padding: 0.5rem 0.5rem;
  border: #bad1e6 solid 0.1rem;
}