:root {
    --primary: #001b5e;
    --on-primary: #ffffff;
    --primary-container: #002d8e;
    --on-primary-container: #7f9bff;
    --secondary: #3b5ba8;
    --secondary-container: #8dabfe;
    --on-secondary-container: #183d89;
    --on-secondary-fixed-box: #001848;
    --tertiary: #04204f;
    --background: #fcf9f8;
    --surface: #fcf9f8;
    --surface-container: #f0edec;
    --surface-container-low: #f6f3f2;
    --surface-gray: #f1f1f1;
    --on-surface: #1c1b1b;
    --on-surface-variant: #444652;
    --link-active: #0046E2;
    --border-subtle: #e2e8f0;
    --outline-variant: #c4c5d4;
    --primary-fixed: #dce1ff;
    --secondary-fixed-dim: #b2c5ff;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;

    --container-max: 1280px;
    --gutter: 24px;
    --margin-desktop: 40px;
    --margin-mobile: 16px;

    --radius-default: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background);
    color: var(--on-surface);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}

main {
    padding-top: 80px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--margin-mobile);
    padding-right: var(--margin-mobile);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--margin-desktop);
        padding-right: var(--margin-desktop);
    }
}

.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-animate.animated {
    opacity: 1;
    transform: translateY(0);
}

/* tooltip */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}