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

.login-section {
}

body{
  background-color: black;
}
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;
}

.main-featured-section {
  position: relative;
  background-color: black;
  height: 100vh;
  background-image: url("images/mountains.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  padding: 1rem;
  font-size: 1.8rem;
}

.main-featured-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* adjust 0.4 to control dimness */
  z-index: 1;
}

/* Any content inside needs to be above the overlay */
.main-featured-section > * {
  position: relative;
  z-index: 2;
}

.main-featured-section-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.main-featured-section-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 45%;
  right: 15%;
  transform: translateY(-50%);
  gap: 3rem;
}
.primary-header {
  font-weight: 600;
  font-size: 3.4rem;
}
.buy-now-button {
  background-color: #e03131;
  padding: 1rem 2rem;
  border: none;
  border-radius: 1rem;
}

.learn-more-button {
  /* background-color: #f08c00;
   */
  background-color: #0c8599;
  padding: 1rem 2rem;
  border: none;
  border-radius: 1rem;
}
.orange-text {
  color: #f59f00;
}
.button-text {
  color: white;
  font-weight: 550;
}
.down-arrow-icon {
  font-size: 6rem;
  position: absolute;
  top: 93vh;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer; /* optional: shows it's interactive */
  opacity: 0.8;
  transition: opacity 0.3s ease;
}
.selected-nav {
  border-bottom: white solid 0.2rem;
}

.features-section {
  min-height: max-content;
  background-color: black;
  padding: 2rem 0rem 4rem 0rem;
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.features-list-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.features-img-list-container {
  display: flex;
  justify-content: space-between;
  gap: 6rem;
  max-width: 130rem;
  margin: 0rem auto;
}

p {
  font-size: 1.6rem;
  color: white;
  font-family: sans-serif;
}

.icon {
  /* color: lightgray; */
  font-size: 1.6rem;
}
.up-icon {
  width: 2.4rem;
  color: #0e3c67;
  display: inline-block;
}
.feature-list-element {
  display: flex;
  gap: 1rem;
}

.img-feature {
  width: 100%;
  height: 100%;
}
.img-container {
  width: 35rem;
  height: 35rem;
}

.blue-icon {
  /* color: rgb(29, 78, 214);
   */
  color: #1971c2;
}
.red-icon {
  /* color: rgb(197, 18, 18); */
  color: #e03131;
}
.grey-icon {
  color: lightgray;
}

h1 {
  color: white;
}

.section-title {
  text-align: center;
  color: white;
  font-size: 2.4rem;
  display: block;
  padding: 2rem 2rem 4rem 2rem;
}

.review-section {
  background-color: #fafafa;
  min-height: max-content;
  padding: 2rem 2rem 4rem 2rem;
}

.reviews-flex-container {
  max-width: 140rem;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
}

.review-element-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 30rem;
  background-color: #eeeeee;
  border: solid #e6e6e6 0.2rem;
  padding: 1rem;
  border-radius: 0.4rem;
}
.rating-container {
  display: flex;
  gap: 0.2rem;
  margin-top: 1rem;
}

.active-star {
  color: #fab005;
  font-size: 1.5rem;
}

/* FOOTER SECTION */
.footer {
  background-color: black;
  padding-top: 2rem;
}
.footer-flex-container {
  display: flex;

  color: #ffffff;
  gap: 10rem;
  margin: 0 auto;
  max-width: 130rem;
  padding: 3rem 0rem;
  justify-content: space-evenly;
  border-top: 0.2rem solid #b1b1b1;
  flex-wrap: wrap;
}
.footer-first-column {
  max-width: 50rem;
}

.footer-second-column {
  display: flex;
  gap: 5rem;
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 1rem;
}

.tos-privacy-container {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: center; */
  justify-content: space-between;
  align-items: center;
  gap: 6rem;
  padding: 1.5rem 0rem;
  background-color: #050505;
  /* position: relative; */
}

.tos-privacy-middle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
}

.return-to-top-link {
  /* position: absolute;
  right: 5rem; */
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  font-size: 1.8rem;
}

* {
  font-size: 1.8rem;
  font-family: sans-serif;
}
.tos-text {
  font-size: 1.5rem;
}

.brand-text {
  font-size: 1.3rem;
  /* color: #114678; */
  color: #2f74b3;
}
.brand-text:hover {
  font-size: 1.3rem;
  color: #6d9eca;
}