@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
  /* colors */
  --white: #fff;
  --green: #c4f82a;
  --gray-700: #333;
  --gray-800: #1f1f1f;
  --gray-900: #141414;

  /* font weights */
  --regular: 400;
  --bold: 700;

  /* spacing */
  --spacing-50: 4px;
  --spacing-100: 8px;
  --spacing-150: 12px;
  --spacing-200: 16px;
  --spacing-300: 24px;
  --spacing-500: 40px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

h1, h2, h3, p, a, quote{
  line-height: 1.5;
  color: var(--white);
  text-align: center;
}

quote{
  display: flex;
  justify-self: center;
  padding-block: var(--spacing-300);
}

.text-preset-1{
  font-size: clamp(20px, 2.7vw, 24px);
  font-weight: var(--bold);
}

.text-preset-2{
  font-size: clamp(12px, 2vw, 14px);
  font-weight: var(--regular);
}

.text-preset-2-bold{
  font-size: clamp(12px, 2vw, 14px);
  font-weight: var(--bold);
}

body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--gray-900);

  main{
    background: var(--gray-800);
    padding: var(--spacing-500);
    width: 327px;
    margin:  auto;
    border-radius: 12px;

    @media only screen and (min-width: 768px){
      width: 456px;
    }
    @media only screen and (min-width: 1440px){
      width: 385px;
    }
    img{
      width: 88px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      display: flex;
      justify-self: center;
    }

    h1{
      padding-top: var(--spacing-300);
    }

    &>p{
      color: var(--green);
    }

    ul{
      li{
        list-style: none;
        &:not(:last-child){
          margin-bottom: var(--spacing-200);
        }
        a{
          width: 100%;
          background: var(--gray-700);
          display: grid;
          padding-block: var(--spacing-150);
          border-radius: 8px;
          text-decoration: none;
          transition: .2s ease-in-out;

          &:hover,
          &:focus{
            background: var(--green);
            color: var(--gray-900);  
            outline: none; 
          }
        }
      }
    }
  }
}