body {
  margin: 0;
  line-height: normal;
}

html {
  scroll-behavior: smooth;
}

:root {
  /* Color */
  --color-darkslategray: #303030;
  --color-royalblue: #5987ff;
  --color-black: #000;
  --yellow: #f0bc00;
  --blue: #3360fd;
  --white: #fff;
  --gray1: #f3f3f3;

  /* Gap */
  --gap-40: 40px;
  --gap-80: 80px;
  --gap-11: 11px;
  --gap-4: 4px;
  --gap-24: 24px;
  --gap-22: 22px;
  --gap-30: 30px;
  --gap-10: 10px;
  --gap-20: 20px;
  --gap-14: 14px;
  --gap-8: 8px;
  --gap-16: 16px;
  --gap-12: 12px;

  /* Padding */
  --padding-24: 24px;
  --padding-14: 14px;
  --padding-16: 16px;
  --padding-30: 30px;
  --padding-32: 32px;
  --padding-100: 100px;
  --padding-10: 10px;
  --padding-20: 20px;
  --padding-26: 26px;

  /* BorderRadius */
  --br-24: 24px;
  --br-8: 8px;
  --br-10: 10px;
  --br-6: 6px;

  /* Font */
  --font-inter: Inter;

  /* FontSize */
  --font-size-30: 30px;
  --font-size-16: 16px;
  --font-size-40: 40px;
  --font-size-64: 64px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-22: 22px;
  --font-size-19: 19px;
  --font-size-24: 24px;

  --style1: 2px 2px 15px rgba(51, 96, 253, 0.12);
}

a {
  transition: color 0.2s ease, opacity 0.2s ease,
    text-decoration-color 0.2s ease;
}

a:is(:hover, :focus-visible) {
  opacity: 0.8;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

button {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease, color 0.2s ease;
}

button:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(51, 96, 253, 0.18);
}