/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul {
  margin: 0;
}
html {
    scroll-behavior: smooth;
  }
  /* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* General STYLE */
:root {

    --bg: hsl(233, 47%, 7%);
    --bg2: hsl(244, 38%, 16%);

    --colorparagraph: white;
    --colorparagraph2: #afacc9;
    --accent:hsl(277, 64%, 61%);
    --ffparagraph: 'Lexend Deca', sans-serif;
    --ffheading: 'Inter', sans-serif;;
    --fsparagraph: 0.938rem;
}
body {
    padding:0em;
    font-family: var(--ffparagraph);
    text-rendering: optimizeSpeed;
    text-align:left; 
    background: var(--bg);
    /* to stick the footer to the bottom */
    min-height: 100vh; 
    display:flex; flex-direction:column; 
}
h1, h2, h3, ul {
    padding:0;
}
main {
    overflow:hidden;
    display:grid;
    gap: 0rem;
    max-width: 20.438rem;
    margin:auto;
    background:var(--bg2);
    border-radius: 0.5rem;
    text-align: center;
}
  
section.summary {
  padding:2.25rem;
}
h1 {
  font-size:2.3rem;
  line-height:2.6rem;
  font-family: var(--ffheading);
  color: var(--colorparagraph);
  font-weight:600;
}
h1 span{
  color: var(--accent);
}
p {
  color: var(--colorparagraph2);
  font-size: var(--fsparagraph);
  font-weight:300;
}
.stats {
  display:grid;
  gap:1.5rem;
  align-items: center;
}
.stats h2 {
  color: var(--colorparagraph);
  font-family: var(--ffheading);
  font-size:1.4rem;
  font-weight:600;
  text-align: center;
  margin-bottom:0.4rem;
}
.stats div p {
  text-transform:uppercase ;
  font-size:0.8rem;
  text-align: center;
}
p.description {
  line-height:1.7rem;
  margin: 2.1rem 0 3.5rem 0;
}
.image {
  filter: contrast(1.1);
  background: #7100ab;
}
.image picture, .image img {
  max-width:100%;
  height:auto;
  vertical-align: top; /*removes white space below the picture */
  opacity: 0.7;
}
footer { font-size: 11px; text-align: center; }
footer a { color: hsl(228, 45%, 44%); }

@media screen and (min-width:50rem) {
  body {
    padding:0 1rem;
  }
  main {
    grid-template-columns: 1.1fr 1fr; 
    max-width:69.375rem;
    text-align: left !important;
  }
  section.summary {
    grid-row: 1; /* Make the second container switch places with the first one */
    padding:4.75rem 6.3rem 3.5rem 4.75rem;
  }
  .stats {
    grid-template-columns: 1fr 1fr 1fr; 
  }
.stats div p,   .stats div h2 {
    text-align: left;
  }
  /* make the img scale according to the container */
  .image{
    overflow: hidden;
  }
  .image picture, .image img {
    height:100%;
    object-fit: cover;
  }

}