/* =========================================================
   CYBERPUNK 2080
   Global Styles
   ========================================================= */

   @import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap");

   :root {
       /* Colors */
       --color-background: #3c3c3c;
       --color-header: #660000;
   
       --color-text: #ffffff;
       --color-link: #6d9eeb;
       --color-link: var(--color-accent);
       --color-link-hover: #8bb5f5;
   
       /* Typography */
       --font-display: "Orbitron", sans-serif;
       --font-body: Cambria, Georgia, serif;
   
       /* Layout */
       --content-width: 1700px;
       --page-padding: 2rem;
   
       /* Transitions */
       --transition-fast: 150ms ease;
   }
   
   
   /* =========================================================
      BASE
      ========================================================= */
   
   * {
       box-sizing: border-box;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   body {
       margin: 0;
       background-color: var(--color-background);
       color: var(--color-text);
   
       font-family: var(--font-body);
       font-size: 1.25rem;
       line-height: 1.45;
   }
   
   img {
       display: block;
       max-width: 100%;
   }
   
   a {
       color: var(--color-link);
       text-decoration: underline;
       text-underline-offset: 0.08em;
   
       transition: color var(--transition-fast);
   }
   
   a:hover {
       color: var(--color-link-hover);
   }
   
   a:focus-visible,
       button:focus-visible {
       outline: 3px solid var(--color-accent);
       outline-offset: 4px;
}
   
   /* =========================================================
      HEADER / PAGE BANNER
      ========================================================= */
   
   .page-header {
       min-height: 126px;
   
       display: flex;
       align-items: center;
       justify-content: center;

       width: 100%;
       padding: 1.5rem var(--page-padding);
       margin-bottom: 2rem;
   
       background-color: var(--color-header);
       color: var(--color-text);
   
       text-align: center;
   }
   
   .page-header h1 {
       margin: 0;
   
       font-family: var(--font-display);
       font-size: 2.5rem;
       font-weight: 700;
       line-height: 1.38;
   }
   
   
   /* =========================================================
      CONTENT
      ========================================================= */
   
   .site-logo {
       display: block;
       width: min(100%, 950px);
       height: auto;

       margin: 1rem auto 2.5rem;
}

   .introduction h2 {
       margin: 0 0 1.25rem;

       font-family: var(--font-display);
       font-size: 2rem;
       font-weight: 700;
}
    
   .page-content {
       width: min(
           calc(100% - (var(--page-padding) * 2)),
           var(--content-width)
       );
   
       margin-inline: auto;
       padding-block: 1.5rem 3rem;
   }
   
   .introduction {
       text-align: center;
   
       font-family: var(--font-body);
       font-size: 2.25rem;
       font-weight: 400;
       line-height: 1.25;
   }
   
   .introduction p {
       margin: 0 0 1rem;
   }
   
   
   /* =========================================================
      NAVIGATION CARDS
      ========================================================= */
   
   .navigation-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
   
       gap: 4rem 2rem;
   
       margin-top: 4rem;
   }
   
   .navigation-card {
       display: flex;
       flex-direction: column;
       align-items: center;
   
       text-align: center;
   }
   
   .navigation-card img {
       width: 285px;
       aspect-ratio: 1 / 1;
   
       object-fit: cover;
   }
   
   .navigation-card a {
       margin-top: 1rem;
   
       font-family: var(--font-display);
       font-size: 2.25rem;
       font-weight: 400;
       line-height: 1.25;
   }
   
   
   /* =========================================================
      RESPONSIVE
      ========================================================= */
   
   @media (max-width: 1200px) {
       .navigation-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }  
   
   @media (max-width: 600px) {
       .navigation-grid {
           grid-template-columns: 1fr;
       }
   }