:root{
        --clr-Primary-700: hsl(233, 47%, 7%);
        --clr-Primary-500: hsl(244, 38%, 16%);
        --clr-Primary-400:  hsl(277, 64%, 61%);

        --clr-Neutral-100:hsl(0, 0%, 100%);
        --clr-Neutral-200:hsla(0, 0%, 100%, 0.75);
        --clr-Neutral-300:hsla(0, 0%, 100%, 0.6);

        --fw-bold:700;
        --fw-regular:400;

        --ff-primary:'Inter', sans-serif;
        --ff-secondary:'Lexend Deca', sans-serif;
}



/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    3. Allow percentage-based heights in the application
  */
  html, body {
    height: 100%;
  }
  /*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    6. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    7. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    8. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    9. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }


  

  body{
    background-color: var(--clr-Primary-700);
  }

  .wrapper{
    background-color: var(--clr-Primary-500);
    max-width: 1000px;
    margin: 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 10px; 
   }
 
  .container{
    display: flex;
    justify-content: center;
    justify-items: center;
    padding-top: 5%;
  }

 img{
    width: 100%;
    border-radius: 10px 10px 0 0; 

  }

  .info{
    display: grid;
    gap: 1.5rem;
    text-align: center;
    margin: 0 1.5rem 2rem;
  }
  .info__title{
    color: var(--clr-Neutral-100);
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
  }
  .title__span{
    color: var(--clr-Primary-400);
  }

  .info__details{
    color: var(--clr-Neutral-300);
    font-family: var(--ff-secondary);
    font-weight: var(--fw-regular);
    font-size: 0.9rem;
    line-height: 1.5rem;
  }

  .stats{
    display: grid;
    gap: 1.4rem;
  }

  .number {
    display: grid;
    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    color: var(--clr-Neutral-100);
    text-transform: uppercase;
    font-size:  1.5rem ;
  }

  .number__span{
    font-weight: var(--fw-regular);
    font-family: var(--ff-secondary);
    color: var(--clr-Neutral-300);
    font-size: 0.729rem;
  }

  .attribution{
    color: var(--clr-Neutral-100);
  }
@media (min-width:900px) {
    .wrapper{
      display: flex;
        gap: 1rem;
        flex-direction: row-reverse;
      }
      img{
        height: 100%;
        width: auto;
        max-width: 500px;
        border-radius: 0 10px 10px 0 ;
        min-height: 100%;
      }
      .info{
        gap: 1.5rem;
        text-align: start;
        padding: 3rem 2rem;
      }
      .stats{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1.4rem;
        margin-top: 2rem;
      }
}