@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap');

:root{
    --clr-main-background:hsl(233, 47%, 7%);
    --clr-card-background:hsl(244, 38%, 16%);
    --clr-soft-violet:hsl(277, 64%, 61%);
    --clr-white-main-heading-stats:hsl(0, 0%, 100%);
    --clr-main-paragraph-white:hsla(0, 0%, 100%, 0.75);
    --clr-stat-headings-white:hsla(0, 0%, 100%, 0.6);

    --ff-body:"Inter", sans-serif;
    --ff-stats-sub-headings: "Lexend Deca", sans-serif;

    --fs-body:0.9375rem;
    --fs-title:2rem;

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

/*Css Presets*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
  padding: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

body{
    font-family: var(--ff-body);
    font-weight: var(--fw-regular);
}

.parent-container{
  background-color: var(--clr-main-background);
  padding: 1.5em 1.5em;
  
}

.right-container{
  border-radius: 8px 8px 0px 0px;
}

.right-container > img{
  max-width: 350px;
  width: 100%;
  border-radius: 8px 8px 0px 0px;
}

.content-holder{
  background-color: var(--clr-card-background);
  margin: 0 auto;
  max-width: 350px;
  border-radius: 8px;
}

.left-container{
  padding: 1.5em 1.5em;
  max-width: 350px;

}

.left-container > h1{
  padding-bottom: 0.5em;
  line-height: 1.1;
  text-align: center;
  color: var(--clr-white-main-heading-stats);
}

.left-container > p{
  color: var(--clr-main-paragraph-white);
  text-align: center;
  padding-bottom: 3em;
}

.highlighted-text{
  color: var(--clr-soft-violet);
}

.flex-stats-container{
   text-align: center;  
}

.stat-one{
  padding-bottom: 1em;
}

.stat-one > h2{
  color: var(--clr-white-main-heading-stats);
}

.stat-one > p{
  text-transform: uppercase;
  font-family: var(--ff-stats-sub-headings);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  color: var(--clr-stat-headings-white);
}

.stat-two {
  padding-bottom: 1em;
}

.stat-two > h2{
  color: var(--clr-white-main-heading-stats);
}

.stat-two > p{
  text-transform: uppercase;
  font-family: var(--ff-stats-sub-headings);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  color: var(--clr-stat-headings-white);
}



.stat-three > h2{
  color: var(--clr-white-main-heading-stats);
}

.stat-three > p{
  text-transform: uppercase;
  font-family: var(--ff-stats-sub-headings);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  color: var(--clr-stat-headings-white);
}



/*Media queries */

@media (min-width: 800px) and (max-width: 1440px){
  .parent-container{
    height: 100vh; 
    display: grid;
    place-content: center;
   }

  .content-holder{
    display: grid;
    grid-auto-flow: column;
    max-width: 1200px;
    place-content: center;
    overflow: hidden;
  }

  .header{
    padding: 1em 1em;
  }

  .paragraph{
    padding: 1em 2em;
    width: 80%;
  }

.stat-one, .stat-two, .stat-three{
  padding: 2em 2em;
}

  .left-container > h1{
    text-align:left ;
  }

  .left-container > p{
    text-align:left ;
  }

  .flex-stats-container{
    display: flex;
  }

  .right-container{
    grid-column: 2;
    width: 600px;
    background-image: url(./image-header-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0px 8px 8px 0px;
    overflow: hidden;
  }

  .right-container > img{
    display: none;
  }

  .left-container{
    max-width: 600px;
  }
}