:root {
  --color-accent: #D93240;
}

html, body {
  background-color: var(--bg-primary);
  line-height: 1.6;
}

a {
  color: var(--text-inverse);
}

.btn {
  font-family: "Roboto", serif;
  color: var(--text-inverse);
  background-color: transparent;
  border: none;
  padding: 15px 30px 15px 30px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.def-btn {
  font-family: "Roboto", serif;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  padding: 20px 40px 20px 40px;
  color: var(--text-inverse);
  background-color: var(--color-accent);
  transition: background-color 0.3s ease, transform 0.2s ease;
  display: none;
}
.def-btn:hover {
  color: var(--text-primary);
  background-color: var(--bg-inverse);
}

.titles {
  font-family: "Oswald", sans-serif;
  font-size: 6rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.subtitles {
  font-size: 1.5rem;
}

.header {
  position: absolute;
  display: flex;
  justify-content: center;
  gap: 30px;
  z-index: 2;
  width: 100%;
  padding: 30px 60px 30px 60px;
}
.header .header__logo {
  display: flex;
  align-self: center;
  gap: 4px;
}
.header .header__logo .logo-icon {
  width: 12px;
  height: 12px;
  align-self: flex-start;
}
.header .header__logo .logo-text {
  width: 120px;
  height: auto;
}
.header .header__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.header .header__nav .header__brutal-logo-icon {
  display: flex;
  align-self: center;
}
.header .header__nav .header__brutal-logo-icon .header__brutal-logo-image {
  width: 32px;
}
.header .header__nav .header__download-btn {
  background-color: rgba(230, 229, 225, 0.1);
}
.header .header__nav .header__download-btn:hover {
  background-color: rgba(230, 229, 225, 0.2);
}
.header .header__nav .header__download-btn::after {
  content: url(../assets/icons/brutal/download.svg);
}

.hero {
  position: relative;
  height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero .hero__bg .hero__bg-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.hero .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.hero .hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 280px;
  color: #fff;
}
.hero .hero__content .hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.hero .hero__content .hero__text .hero__description {
  font-family: "Oswald", serif;
  font-size: 24px;
  text-transform: uppercase;
}
.hero .hero__content .hero__play-btn {
  display: block;
}

/*.server-features {
  display: flex;
  justify-content: center;
  padding-top: 100px;
  padding-bottom: 100px;
  background: radial-gradient(rgba(217, 50, 64, 0.3) -30%, transparent 70%);

  .server-features__container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    //visibility: hidden;

    .server-features__title {
      font-family: "Oswald",serif;
      font-size: 48px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .server-features__wrapper {
      display: flex;
      gap: 30px;

      .server-features__hero {
        max-width: 1024px;
        display: flex;
        flex-direction: column;
        gap: 30px;
        text-decoration: none;

        .server-features__hero-media {

          aspect-ratio: 16 / 9;
          overflow: hidden;
          border-radius: 10px;

          img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        }

        .server-features__hero-content {
          display: flex;
          flex-direction: column;
          gap: 20px;

          .server-features__hero-title {
            font-size: 32px;
          }
          .server-features__hero-description {
            font-size: 20px;
          }
        }
      }
    }
  }

  .server-features__articles {
    display: flex;
    flex-direction: column;
    gap: 30px;
    list-style: none;

    .server-features__article {
      border-radius: 10px;

      .server-features__article-card {
        width: 686px;
        display: flex;
        justify-content: space-between;
        text-decoration: none;
        border-radius: 10px;
        overflow: hidden;
        background-color: rgba($color: #E6E5E1, $alpha: 0.2);

        .server-features__article-content {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
          padding: 30px;

          .server-features__article-title {
            font-size: 24px;
          }
          .server-features__article-description {
            font-weight: 400;
            font-size: 16px;
            line-height: 1.2;
          }
        }

        .server-features__article-image {
          width: 276px;
          height: auto;
        }
      }
    }
  }
}*/
.brutal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  padding: 100px;
}
.brutal .brutal__content {
  max-width: 800px;
}
.brutal .brutal__content .brutal__learn-btn {
  margin-top: 3rem;
}

.server-ranking {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 200px;
  background-image: url(../assets/images/brutal/Layer.svg);
  background-color: #1f1f1f;
  background-position: top;
  background-repeat: no-repeat;
  padding-top: 100px;
  padding-bottom: 100px;
}
.server-ranking .server-ranking-content {
  max-width: 800px;
  z-index: 1;
}
.server-ranking .server-ranking-content .server-ranking-title {
  margin-bottom: 1.5rem;
}
.server-ranking .server-ranking-content .brutal__characters-btn {
  margin-top: 3rem;
}

.world {
  height: 680px;
  display: flex;
  color: var(--text-primary);
  background-color: var(--bg-inverse);
}
.world .world__image {
  width: 50%;
  overflow: hidden;
  clip-path: polygon(180px 0, 100% 0, 100% 100%, 0 100%);
}
.world .world__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: bottom;
     object-position: bottom;
}
.world .world__content {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.world .world__content .world__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.world .world__content .world__content-wrapper .world__title {
  margin-bottom: 1.5rem;
}
.world .world__content .world__content-wrapper .world__description {
  text-align: center;
  max-width: 680px;
}
.world .world__content .world__content-wrapper .world__stats {
  display: flex;
  gap: 3rem;
  margin-top: 3rem;
}
.world .world__content .world__content-wrapper .world__stats .world__stat {
  width: 268px;
  aspect-ratio: 16/9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.5rem;
  border-radius: 10px;
  background-color: rgba(18, 18, 18, 0.1);
}
.world .world__content .world__content-wrapper .world__stats .world__stat .world__stat-number {
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
}
.world .world__content .world__content-wrapper .world__stats .world__stat .world__stat-label {
  color: rgba(18, 18, 18, 0.5);
}
.world .world__content .world__content-wrapper .world__btn {
  margin-top: 3rem;
  background-color: var(--bg-primary);
}
.world .world__content .world__content-wrapper .world__btn:hover {
  color: var(--text-inverse);
  background-color: var(--color-accent);
}

.launcher {
  text-align: center;
  padding: 30px;
  background-color: #1E1E1E;
}
.launcher .launcher__download {
  text-transform: uppercase;
  padding: 10px 20px;
}
.launcher .launcher__download:hover {
  background-color: rgba(230, 229, 225, 0.1);
}

.footer {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.footer .footer__logo {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.3s ease, transform 0.2s ease;
}
.footer .footer__logo:hover {
  color: var(--color-accent);
}
.footer .footer__logo .logo-icon {
  width: 24px;
  height: 24px;
}
.footer .footer__logo .logo-text {
  width: 120px;
  height: auto;
}
.footer .social {
  display: flex;
  gap: 20px;
}
.footer .social .social__link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.2s ease;
}
.footer .social .social__link:hover {
  color: var(--color-accent);
}
.footer .social .social__link .social__link-icon {
  height: 24px;
  color: inherit;
}/*# sourceMappingURL=brutal.css.map */