/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
  }
  
  html, body {
    min-height: 100%;
  }
  
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  
  /*
    CSS Reset ends
  */
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  :root {
  
    /*primary colors*/
    --red: hsl(0, 78%, 62%);
    --cyan: hsl(180, 62%, 55%);
    --orange: hsl(34, 97%, 64%);
    --blue: hsl(212, 86%, 64%);
    --white: hsl(0, 0%, 100%);
  
    /*neutral colors*/
    --dblue: hsl(234, 12%, 34%);
    --gblue: hsl(229, 6%, 66%);
    --bg-gray: hsl(0, 0%, 98%);
  
    /*font-weights*/
    --normal: 200;
    --medium: 400;
    --bold: 600;
  
  }

  body {
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9375rem;
    background-color: var(--bg-gray);
  }

  main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5rem 2rem;
  }

  .header-text {
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
    text-align: center;
    font-weight: var(--bold);
    color: var(--dblue);
    margin-bottom: 1.25rem;
    animation: entrance-text 3s ease;
  }

  .header-text-abstract {
    display: block;
    font-weight: var(--normal);
  }

  .header-paragraph {
    font-weight: var(medium);
    color: var(--gblue);
    text-align: center;
    max-width: 500px;
    margin-bottom: 5.25rem;
    animation: entrance-text 3s ease;
  }

  .card-grid {
    display: grid;
    width: content;
    gap: 1.5rem;
  }

  .card {
    display: flex;
    flex-direction: column;
    max-width: 21.875rem;
    border-radius: 0.3rem;
    border-top-width: 0.25rem;
    border-top-style: solid;
    padding: 1.5rem;
    background-color: var(--bg-gray);
    box-shadow:
    0px 2.8px 2.2px rgba(0, 0, 0, 0.008),
    0px 6.7px 5.3px rgba(0, 0, 0, 0.012),
    0px 12.5px 10px rgba(0, 0, 0, 0.015),
    0px 22.3px 17.9px rgba(0, 0, 0, 0.018),
    0px 41.8px 33.4px rgba(0, 0, 0, 0.022),
    0px 100px 80px rgba(0, 0, 0, 0.03);
  }

  .card-1 {
    border-top-color: var(--cyan);
    animation: entrance 1s ease;
  }

  .card-2 {
    border-top-color: var(--red);
    animation: entrance 1s ease;
  }

  .card-3 {
    border-top-color: var(--orange);
    animation: entrance 1s ease;
  }

  .card-4 {
    border-top-color: var(--blue);
    animation: entrance 1s ease;
  }

  .card__header {
    font-size: 1.5rem;
    font-weight: var(--bold);
    color: var(--dblue);
  }

  .card__paragraph {
    font-size: 0.85rem;
    font-weight: var(--medium);
    color: var(--gblue);
    margin-bottom: 2.5rem;
  }

  .card__image {
    width: 64px;
    align-self: flex-end;
  }

  @media screen and (min-width: 600px) {

    .card-grid {
        grid-template-columns: 1fr 1fr;
    }
    
  }

  @media screen and (min-width: 900px) {

    .card-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .card-1 {
        grid-column: 1/2;
        grid-row: 1/3;
        place-self: center;
    }

    .card-4 {
        grid-column: 3/4;
        grid-row: 1/3;
        place-self: center;
    }
    
  }

  @keyframes entrance {

    0% {
        opacity: 0;
        transform: scale(0);
    }
    
  }

  @keyframes entrance-text {

    0% {
        opacity: 0;
    }
    
  }