* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  
  :root {
  /* === FONT FAMILY === */
  --font-family-base: 'Inter', sans-serif;
  --font-family-alt: 'Poppins', sans-serif;

  /* === RESPONSIVE FONT SIZES === */
  --font-size-xs: clamp(12px, 1.2vw, 14px);
  --font-size-sm: clamp(14px, 1.5vw, 16px);
  --font-size-base: clamp(16px, 2vw, 18px);
  --font-size-lg: clamp(20px, 3vw, 24px);
  --font-size-xl: clamp(24px, 4vw, 32px);

  /* === COLORS === */
  --color-primary:  #f4fdf5;     /* green */
  --color-secondary: #137c3d;  /* orange */
  --color-text: #333;
  --color-background: #f9f9f9;
}

  
  html{
    font-size: 12px;
  }

  body {
      font-family: var(--font-family-alt);
      line-height: 1.6;
      background-color: #f4f4f4;
      color: #333;
  }

  main{
      width: 100%;
      height:100vh;
    }

    .img-container{
      width:100%;
      height: auto;
    }

    .img-container img{
      width: 100%;
      height: auto;
      border-bottom-left-radius: 35%;
      border-bottom-right-radius: 35%;
    }

    .desc-container{
      width:100%;
      height: auto;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      padding: 20% 5%;
    }

    .desc-container h1 {
      font-size: 1.3rem;
      flex-grow: 1;
    }

    .desc-container p {
      font-size: 1rem;
      flex-grow: 1;
    }

    .action-container{
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20% 0;
    }

    .action-container a{
      text-decoration: none;
      border: solid green;
      border-radius: 8px;
      padding: 1% 15%;
      background-color: green;
      color: white;
      font-size: 1rem;
    }

    .action-container:active{
      opacity:0.8;
    }