:root {
    /* Colors */
    --color-primary-bg: hsl(233, 47%, 7%);       /* Main background */
    --color-card-bg: hsl(244, 38%, 16%);         /* Card background */
    --color-accent: hsl(277, 64%, 61%);          /* Accent color */
    --color-overlay: hsla(277, 64%, 61%, 0.9);   /* Overlay color */
    --color-white: hsl(0, 0%, 100%);             /* White for headings, stats */
    --color-white-75: hsla(0, 0%, 100%, 0.45);   /* Slightly transparent white */
    --color-white-60: hsla(0, 0%, 100%, 0.3);    /* Transparent white for headings */
    --color-link: hsl(228, 45%, 44%);            /* Blue link color */
  
    /* Font sizes */
    --font-size-body: 14px;
    --font-size-heading: 28px;
    --font-size-stats: 20px;                     
    --font-size-footer: 12px;
     
    /* Breakpoints */
    --desktop-breakpoint: 1440px;
  }


/* Mobile-first approach */
body {
    max-width: 100%;
    margin: 4%;
    padding: 0px;
    font-size: var(--font-size-body);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: var(--color-white);
    background-color: var(--color-primary-bg);
  }

/* Flex Box */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.item {
    flex: 1;
    padding: 0px;
    margin: 0px;
}  

.card {
    background-color: var(--color-card-bg);
    border-radius: 8px;
    margin: 4%;
}

/* Text */
.text {
    margin: 12%;
    text-align: center;
}

h2 {
    font-weight: 700;
    font-size: var(--font-size-heading);
    margin-bottom: 30px; 
    color: var(--color-white);
}

p {
    font-weight: 400;
    color: var(--color-white-75);
    line-height: 1.6;
}

.stats {
    font-weight: 700;
    font-size: var(--font-size-stats);
    padding-top: 20px;
}

.stathd {
    text-transform: uppercase;
    color: var(--color-white-60);
    font-weight: 400;
    font-size: var(--font-size-body);
    margin-bottom: 20px;
}

.accent {
   color: var(--color-accent); 
}


/* Image Style */
.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px 8px 0px 0px;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay);
    z-index: 1;
    mix-blend-mode: hard-light;
    border-radius: 8px 8px 0px 0px;
}

/* Animation keyframes */
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Applying the animation to the text */
  .hero-fade {
    opacity: 0;
    animation: fadeIn 3s ease-in-out forwards;
  }

  .hero-text-slide {
    opacity: 0; /* Start hidden */
    animation: slideInLeft 1.5s ease-out forwards;
  }

/* Styles for screens wider than 1440px (Desktop) */
  @media screen and (min-width: 1440px) {
    body {
      max-width: 1440px;
      margin-left: 10%;
    }
    .container {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center; 
    }
    .image-container img {
        border-radius: 0px 8px 8px 0px;
    }
    .overlay {
      border-radius: 0px 8px 8px 0px;
  }
    .text {
        padding: 10% 20% 0% 0%;
        text-align: left;
    }
    .stats {
        padding: 25% 20% 0% 0%;
        display: flex;
        gap: 25%;
    }
    .stathd {
        margin-bottom: 0px;
    }
  }


/* Attribution footer styles */
.attribution {
    font-size: var(--font-size-footer);
    text-align: center;
    color: var(--color-white);
    margin: 8%;
  }
  
.attribution a {
    color: var(--color-link);
}

.attribution p {
    margin: 0%;
}