:root {
    --base-shadow: 0px 10px 34px 0px rgba(0, 0, 0, 0.15);
    color-scheme: light dark;
}

html {
    scroll-behavior: smooth
}

body {
    overflow-x: hidden;
    background-color: var(--body-bg-color);
}

h1 {
    font-size: 2rem;
    font-weight: bold;
}

h2 {
    font-size: 2rem;
    font-weight: 800;
}

h3 {
    font-size: 1.7rem;
    font-weight: 800;
}

h4 {
    font-size: 1.4rem;
    font-weight: 700;
}

h5 {
    font-size: 1.2rem;
    font-weight: 700;
}

h6 {
    font-size: 1rem;
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 20px 0;
}

body,
input,
button,
select,
textarea {
    font-family: Outfit, sans-serif;
    color: var(--text-color);
}

[disabled="true"] {
    opacity: .5;
    cursor: not-allowed !important;
}

.clickable {
    cursor: pointer;
}

.material-symbols-outlined {
    user-select: none;
    cursor: default;
    font-variation-settings:
      'FILL' 1,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24
}