:root {
    --clr--Violet: hsl(257, 40%, 49%);
    --clr--SoftMagenta: hsl(300, 69%, 71%);
    --clr--White: hsl(0, 0%, 100%);

    --ff--Poppins: "Poppins", sans-serif;
    --ff--OpenSans: "Open Sans", sans-serif;
}
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
  }
  
  /* 2. Remove default margin */
  * {
    margin: 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;
  }
  
  /*
    10. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }
  body {
    display: flex;
    min-height: 100vh;

    background-color: var(--clr--Violet);
    background-image: url(images/bg-desktop.svg);
  }

  .container {
    max-width: 100%;
    min-height: 100%;
    margin: 4rem;
    position: relative;
  }
  .logo {
    max-width: 13rem;
  }
  .flex-group {
    display: flex;
    margin-top: 4.5rem;
  }
  .illustration {
    max-width: 50rem;
  }
  .heading {
    color: var(--clr--White);
    font-family: var(--ff--Poppins);
    font-size: 2.2rem;
    letter-spacing: 0.02rem;
  } 
  .description {
    color: var(--clr--White);
    font-family: var(--ff--OpenSans);
    font-weight: 400;
    margin: 2rem 0rem;
    line-height: 1.5rem;
  }
  .right-description {
    margin: 3rem 0rem 0rem 3rem;
  }
  .register-btn {
    background-color: var(--clr--White);
    color: var(--clr--Violet);
    font-family: var(--ff--Poppins);
    font-weight: 400;
    width: 11rem;
    height: 3rem;
    border-radius: 3rem;
    border: none;
    cursor: pointer;
    box-shadow: 0px 4px 10px hsla(260, 30%, 20%, 0.3);
  }
  .social-media-links {
    display: flex;
    gap: 1rem;
    position: absolute;
    bottom: -3rem;
    right: 0;
  }
  .icon {
    width: 2rem;
    height: 2rem;
    text-align: center;
    align-content: center;
    border: 1px solid var(--clr--White);
    color: var(--clr--White);
    border-radius: 50%;
  }
  /* active states. */
  .icon:hover {
    color: var(--clr--SoftMagenta);
    border-color: var(--clr--SoftMagenta);
    transition: all 0.3s ease;
  }
  .register-btn:hover {
    background-color: var(--clr--SoftMagenta);
    color: var(--clr--White);
    transition: all 0.3s ease;
  }

  @media(max-width: 390px){
    body {
      background-image: url(images/bg-mobile.svg);
      background-repeat: no-repeat;
    }
    .container {
      margin: 2rem 2.5rem;
    }

    .logo {
      max-width: 8rem;
    }
    .flex-group {
      display: block;
      margin-top: 3.8rem;
    }
    .illustration {
      max-width: 19rem;
    }
    .heading {
      font-size: 1.5rem;
      letter-spacing: 0rem;
    } 
    .right-description {
      margin: 3.5rem 0rem;
      text-align: center;
    }
    .social-media-links {
      display: flex;
      justify-self: center;
      position: inherit;
      margin-bottom: 2rem;
      margin-top: -2rem;
    }
    .register-btn {
      width: 14rem;
    }
  }