/* =========================================
   GAMESO - RACING GAMES BLOG ARTICLE
========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* =========================================
   ROOT
========================================= */

:root {
  --bg: #070b16;
  --bg-light: #0d1422;
  --card: #101827;
  --border: #252f45;

  --primary: #7657ff;

  --text: #ffffff;
  --text-light: #dce2ef;
  --muted: #9ba5ba;
  --muted-dark: #66728c;
}


/* =========================================
   HTML
========================================= */

html {
  scroll-behavior: smooth;
}


/* =========================================
   BODY
========================================= */

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(118, 87, 255, 0.17),
      transparent 38%
    ),
    var(--bg);

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.7;
}


/* =========================================
   HEADER
========================================= */

.site-header {
  position: sticky;

  top: 0;

  z-index: 1000;

  border-bottom: 1px solid #20293c;

  background: rgba(7, 11, 22, 0.95);

  backdrop-filter: blur(12px);
}


.header-inner {
  width: min(1100px, 92%);

  min-height: 70px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.logo {
  display: flex;

  align-items: center;

  gap: 9px;

  color: #fff;

  text-decoration: none;

  font-size: 21px;

  font-weight: 900;
}


.logo span {
  font-size: 25px;
}


.navigation {
  display: flex;

  gap: 8px;
}


.navigation a {
  padding: 8px 12px;

  color: #8f99b0;

  text-decoration: none;

  border-radius: 8px;

  font-size: 12px;

  font-weight: 700;

  transition: 0.2s;
}


.navigation a:hover {
  color: #fff;

  background: rgba(118, 87, 255, 0.12);
}


/* =========================================
   ARTICLE
========================================= */

.article-page {
  width: min(900px, 92%);

  margin: auto;

  padding: 70px 0 90px;
}


.article-category {
  margin-bottom: 14px;

  color: #9282ff;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1.5px;
}


.article h1 {
  margin-bottom: 15px;

  color: #fff;

  font-size: clamp(38px, 6vw, 60px);

  line-height: 1.08;

  letter-spacing: -2px;

  font-weight: 900;
}


.article-meta {
  margin-bottom: 38px;

  color: var(--muted-dark);

  font-size: 11px;
}


/* =========================================
   HERO IMAGE
========================================= */

.article-hero-image {
  width: 100%;

  margin-bottom: 42px;

  overflow: hidden;

  border: 1px solid var(--border);

  border-radius: 17px;

  background: var(--card);

  line-height: 0;
}


.article-hero-image img {
  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  aspect-ratio: 16 / 9;

  object-fit: cover;

  margin: 0;

  padding: 0;
}


/* =========================================
   ARTICLE TEXT
========================================= */

.article p {
  margin-bottom: 22px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.9;
}


.article strong {
  color: #dfe5f1;
}


.article h2 {
  margin-top: 50px;

  margin-bottom: 17px;

  color: #fff;

  font-size: 29px;

  line-height: 1.3;
}


.article h3 {
  margin-top: 32px;

  margin-bottom: 11px;

  color: var(--text-light);

  font-size: 21px;

  line-height: 1.4;
}


.article a {
  color: #a094ff;

  font-weight: 700;

  text-decoration: none;
}


.article a:hover {
  color: #fff;

  text-decoration: underline;
}


/* =========================================
   CTA
========================================= */

.article-cta {
  margin-top: 45px;

  padding: 25px;

  border: 1px solid #332c5c;

  border-radius: 14px;

  background: #101729;
}


.article-cta strong {
  display: block;

  margin-bottom: 7px;

  color: #fff;

  font-size: 17px;
}


.article-cta a {
  color: #a094ff;

  text-decoration: none;
}


/* =========================================
   FOOTER
========================================= */

.footer {
  padding: 30px;

  border-top: 1px solid #20293c;

  background: #060a14;

  text-align: center;
}


.footer p {
  color: #58647c;

  font-size: 11px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 700px) {

  .header-inner {
    min-height: 64px;
  }


  .navigation {
    gap: 3px;
  }


  .navigation a {
    padding: 6px 7px;

    font-size: 10px;
  }


  .article-page {
    width: 92%;

    padding-top: 48px;
  }


  .article h1 {
    font-size: 40px;

    letter-spacing: -1px;
  }


  .article h2 {
    font-size: 25px;
  }


  .article h3 {
    font-size: 19px;
  }


  .article p {
    font-size: 14px;

    line-height: 1.8;
  }


  .article-hero-image {
    width: 100%;

    border-radius: 14px;
  }


  .article-hero-image img {
    width: 100%;

    max-width: 100%;

    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 450px) {

  .header-inner {
    width: 94%;
  }


  .logo {
    font-size: 18px;
  }


  .logo span {
    font-size: 21px;
  }


  .navigation a {
    padding: 5px;

    font-size: 9px;
  }


  .article-page {
    width: 94%;

    padding-top: 40px;
  }


  .article h1 {
    font-size: 34px;
  }


  .article-hero-image {
    width: 100%;

    border-radius: 12px;
  }


  .article-hero-image img {
    width: 100%;

    max-width: 100%;

    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
  }

}