*, *::before, *::after  {
  /* margin: 0%;
  padding: 0%; */
  box-sizing: border-box;
}

:root {
  /* --font-sans: var(--font-noto-sans); */
  --color-text: #08120D; /* Dark Gray */
  --color-text-light: #111928;
  --color-text-secondary: #656A77;
  --color-primary: #2563EB; /* Blue */
  --color-secondary: #E8F1FC; /* Light Gray */
  --color-tertiary: #CEDEF5; /* Gray */
  --color-border-tertiary: #E5E7EB;
  --color-cta-primary: #3A7DFF; /* Green */
  --color-cta-primary-hover: var(--color-primary);
  --color-cta-secondary: var(--color-tertiary); /* Yellow */
  --color-cta-secondary-hover: #D4E2FB;
  --color-cta-tertiary: transparent; /* Red */
  --color-cta-tertiary-hover: #FDE6E4;
  --color-text-dark-blue: #4E5A78;
  --color-text-light-blue: #8C95A9;
  --color-green: #16A34A;
  --offset: 16px;
}

body {
  @apply bg-[var(--color-secondary)] text-[var(--color-text)];
}

a {
  color: var(--color-primary);
  @apply font-semibold;
}

a:hover,
a:active {
  @apply underline;
}

button:not(:disabled) {
  @apply cursor-pointer;
}

button:disabled {
  @apply cursor-not-allowed;
}

h2 {
  @apply text-center text-[20px] md:text-[28px] font-bold leading-[36px] text-[var(--color-text)];
  font-family: var(--font-manrope);
}

input[type="checkbox"],
input[type="radio"] {
  @apply sr-only;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  @apply w-full inline-flex items-center justify-between;
}

input[type="radio"] + label::after {
  content: '';
  background-image: url('/radio.svg');
  width: 22px;
  height: 22px;
  display: block;
  cursor: pointer;
}

input[type="radio"]:checked + label::after {
  content: '';
  background-image: url('/radio-checked.svg');
  cursor: pointer;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  @apply cursor-pointer;
}

input[type="checkbox"] + label::before,
input[type="checkbox"] + label.reverse::after {
  content: '';
  background-image: url('/checkbox.svg');
  width: 22px;
  height: 22px;
  display: block;
  cursor: pointer;
}

input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked + label.reverse::after {
  content: '';
  background-image: url('/checkbox-checked.svg');
  cursor: pointer;
}

input[type="checkbox"] + label.reverse::before {
  content: none;
}

input.floating::placeholder {
  color: transparent;
}

input:focus + label.floating,
input:not(:placeholder-shown) + label.floating {
  @apply top-1 text-[12px];
}

.page p,
.page li {
  @apply mb-3;
}

.page h1 {
  @apply text-[28px] md:text-[36px] font-bold leading-[44px] text-[var(--color-text)] text-start mb-5;
  font-family: var(--font-manrope);
}

.page h2 {
  @apply mb-4  inline;
}

.page ol li::marker {
  @apply text-[20px] md:text-[28px] font-bold leading-[36px] text-[var(--color-text)];
}

.page ol ol li::marker {
  @apply text-[16px] font-normal;
}

@media (min-width: 1024px) {
  :root {
    --offset: 64px;
  }
}

@import "tailwindcss";