@import url("https://fonts.googleapis.com/css2?family=Francois+One&family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Francois+One&family=Pragati+Narrow:wght@400;700&family=Press+Start+2P&display=swap");

html {
  background-color: #000;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background-color: #000;
}

.hero {
  background-image: url("./images/hero-image.webp");
  opacity: 0.9;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0px 80px;
}
.hero-title {
  padding-top: 100px;
  h1 {
    color: #fff;
    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-size: 42px;
    text-align: center;
    font-style: normal;
  }
  h2 {
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42px;
    text-align: center;
    color: #fff;
  }
}
.hero-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  h3 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    background: linear-gradient(
      to right,
      #0000001f,
      #0000001f,
      #ffffff,
      #0000001f,
      #ffffff
    );
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
  }
  a {
    padding-top: 80px;
    text-align: center;
  }
  img {
    width: 31px;
    margin: 0 auto;
  }
  img:hover {
    scale: 1.2;
  }
}
.hero-reality {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 230px;
  padding: 10px 30px;
  background: #2a7c9d;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(93, 196, 236, 1) 49%,
    rgba(0, 0, 0, 1) 100%
  );
  span {
    font-size: 42px;
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
  }
}

.content {
  padding: 80px 80px;
  max-width: 1576px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  justify-content: center;
}
.contentBox {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  border-bottom: 1px solid rgb(128 128 128 / 6%);
}
.content-left {
  display: flex;
  justify-content: right;
  align-items: center;

  h3 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-size: 32px;
    color: #ffffffa2;
    line-height: 100%;
    font-style: normal;
  }
  h4 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    color: #ffffffa2;
    font-size: 24px;
  }
}
.content-right {
  display: flex;
  justify-content: left;
  align-items: center;

  h3 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-size: 32px;
    color: #ffffffa2;
    line-height: 100%;
    font-style: normal;
  }
  h4 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #ffffffa2;
    font-size: 24px;
    line-height: 100%;
  }
}
.content-center {
  display: flex;
  justify-content: center;
  align-items: center;

  h3 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-size: 32px;
    color: #ffffffa2;
    line-height: 100%;
    font-style: normal;
  }
  h4 {
    text-align: center;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 100%;
    color: #ffffffa2;
    font-size: 24px;
  }
}
.cta {
  padding: 0px 80px 160px 80px;
  max-width: 1576px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  h2 {
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 62px;
    text-align: center;
    color: #fff;
    line-height: 100%;
  }
  a {
    margin: 0 auto;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 42px;
    text-align: center;
    color: #fff;
    line-height: 100%;
  }
  a:hover {
    scale: 1.1;
    color: #5dc4ec;
  }
}
.teaser {
  display: flex;
  justify-content: center;

  a {
    margin: 0 auto;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    text-decoration: none;
    text-align: center;
    color: #fff;
    line-height: 100%;
    border: 1px solid #ffffff;
    padding: 5px 10px;
  }
  a:hover {
    scale: 1.1;
    color: #5dc4ec;
  }
}

.footer {
  max-width: 1576px;
  padding: 80px 80px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  span {
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #ffffff;
  }
  a {
    text-decoration: none;
    font-family: "Pragati Narrow", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    color: #ffffff;
  }
  a:hover {
    color: #5dc4ec;
  }
}
@media only screen and (min-width: 800px) and (max-width: 1000px) {
  .hero {
    padding: 0px 60px;
  }
  .hero-title {
    h1 {
      font-size: 32px;
    }
    h2 {
      font-size: 32px;
    }
  }
  .content {
    padding: 60px 60px;
    gap: 60px;
  }
  .contentBox {
    gap: 60px;
  }
  .content-left {
    max-height: 20px;
  }
  .content-right {
    max-height: 20px;
  }
  .content-center {
    max-height: 20px;
  }
}
@media only screen and (min-width: 550px) and (max-width: 800px) {
  .hero {
    padding: 0px 20px;
  }
  .hero-title {
    h1 {
      font-size: 24px;
    }
    h2 {
      font-size: 24px;
    }
  }
  .hero-actions {
    h3 {
      font-size: 22px;
    }
  }
  .hero-reality {
    max-width: 230px;
    padding: 5px 30px;
    span {
      font-size: 22px;
    }
  }
  .content {
    padding: 60px 40px;
    gap: 60px;
  }
  .contentBox {
    gap: 60px;
  }
  .content-left {
    max-height: 20px;
    h3 {
      font-size: 24px;
    }
    h4 {
      font-size: 22px;
    }
  }
  .content-right {
    max-height: 20px;
    h3 {
      font-size: 24px;
    }
    h4 {
      font-size: 22px;
    }
  }
  .content-center {
    max-height: 20px;
    h3 {
      font-size: 24px;
    }
    h4 {
      font-size: 22px;
    }
  }
  .cta {
    padding: 0px 40px 100px 40px;
    max-width: 1576px;

    h2 {
      font-size: 48px;
    }
    a {
      font-size: 32px;
    }
  }
  .footer {
    padding: 40px 40px;

    span {
      font-size: 18px;
    }
    a {
      font-size: 18px;
    }
    a:hover {
      color: #5dc4ec;
    }
  }
}
@media only screen and (min-width: 150px) and (max-width: 550px) {
  .hero {
    padding: 0px 16px;
  }
  .hero-title {
    h1 {
      font-size: 16px;
    }
    h2 {
      font-size: 16px;
    }
  }
  .hero-actions {
    h3 {
      font-size: 14px;
    }
    img {
      width: 26px;
    }
  }
  .hero-reality {
    max-width: 230px;
    padding: 5px 30px;
    span {
      font-size: 22px;
    }
  }
  .content {
    padding: 60px 16px;
    gap: 20px;
  }
  .contentBox {
    flex-direction: row;
    gap: 20px;
    justify-content: flex-start;
    padding-bottom: 3px;
  }
  .content-left {
    gap: 10px;

    flex-direction: column;
    align-items: flex-start;
    h3 {
      margin: 0;
      font-size: 20px;
    }
    h4 {
      text-align: left;

      margin: 0;
      font-size: 18px;
    }
  }
  .content-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    h3 {
      margin: 0;
      font-size: 20px;
    }
    h4 {
      margin: 0;
      text-align: left;
      font-size: 18px;
    }
  }
  .content-center {
    gap: 10px;

    flex-direction: column;
    align-items: flex-start;
    h3 {
      margin: 0;
      font-size: 20px;
    }
    h4 {
      text-align: left;

      margin: 0;
      font-size: 18px;
    }
  }
  .cta {
    padding: 0px 16px 40px 16px;

    h2 {
      font-size: 32px;
    }
    a {
      font-size: 24px;
    }
  }
  .footer {
    flex-direction: column;
    padding: 40px 40px;
    margin: 0 auto;
    span {
      text-align: center;
      font-size: 18px;
    }
    a {
      font-size: 18px;
      text-align: center;
    }
    a:hover {
      color: #5dc4ec;
    }
  }
}