@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 {
    font-size: 16px;
    /* 1rem = 16px */

    /* Optional: typographic scale using CSS variables */
    --font-xs: 0.75rem;
    /* 12px */
    --font-sm: 0.875rem;
    /* 14px */
    --font-base: 1rem;
    /* 16px */
    --font-md: 1.125rem;
    /* 18px */
    --font-lg: 1.25rem;
    /* 24px */
    --font-xl: 1.875rem;
    /* 30px */
    --font-2xl: 2.25rem;
    /* 36px */
    --font-3xl: 3rem;
    /* 48px */
}

html {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

body {
    font-size: var(--font-base);
    background: linear-gradient(0deg,
            rgba(1, 4, 59, 0.75) 0%,
            rgba(1, 4, 59, 0.72) 10%,
            rgba(1, 4, 59, 0.71) 20%,
            rgba(1, 4, 59, 0.68) 30%,
            rgba(1, 4, 59, 0.66) 40%,
            rgba(1, 4, 59, 0.64) 50%,
            rgba(1, 4, 59, 0.62) 60%,
            rgba(1, 4, 59, 0.60) 70%,
            rgba(1, 4, 59, 0.58) 80%,
            rgba(1, 4, 59, 0.56) 90%,
            rgba(1, 4, 59, 0.54) 100%);
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    background: linear-gradient(0deg,
            rgba(1, 4, 59, 0.75) 0%,
            rgba(1, 4, 59, 0.72) 10%,
            rgba(1, 4, 59, 0.71) 20%,
            rgba(1, 4, 59, 0.68) 30%,
            rgba(1, 4, 59, 0.66) 40%,
            rgba(1, 4, 59, 0.64) 50%,
            rgba(1, 4, 59, 0.62) 60%,
            rgba(1, 4, 59, 0.60) 70%,
            rgba(1, 4, 59, 0.58) 80%,
            rgba(1, 4, 59, 0.56) 90%,
            rgba(1, 4, 59, 0.54) 100%);
    /* filter: blur(1px); */
    z-index: -1;
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/static/images/bedge-grunge.png");
    /* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
    /* background-size: cover; */
    /* background-repeat: repeat; */
    opacity: 0.8;
    /* adjust for strength */
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}

/* Typography Defaults */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
th,
td,
button {
    font-weight: 400;
    margin: 0;
    font-style: normal;
    font-optical-sizing: auto;
}

h1 {
    font-size: var(--font-2xl);
    /* 2.25rem = 36px */
    font-weight: 600;
    line-height: 1.2;
    color: #01043B;
}

h2 {
    font-size: var(--font-xl);
    /* 1.875rem = 30px */
    font-weight: 600;
    line-height: 1.3;
    color: #494949;
}

h3 {
    font-size: var(--font-lg);
    /* 1.5rem = 24px */
    line-height: 1.4;
    color: #696969;
}

h4 {
    font-size: var(--font-md);
    /* 1.125rem = 18px */
    line-height: 1.4;
    color: #696969;
}

p {
    font-size: var(--font-base);
    line-height: 1.6;
    color: #696969;
}

small,
.caption,
th {
    font-size: var(--font-xs);
    line-height: 1.4;
    color: #000;
}

span,
a,
table,
button {
    font-size: var(--font-sm);
    color: #696969;
    letter-spacing: 0.02em;
    text-decoration: none;
}

/* Pointer events disabled only if needed for specific elements */
h1,
h2,
h3,
h4,
p {
    pointer-events: none;
}

/* Scrollbar Styles */
div::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

div::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

div::-webkit-scrollbar-track-piece {
    background: transparent;
}

div::-webkit-scrollbar-corner {
    background: transparent;
}

div::-webkit-scrollbar-thumb {
    background: #01043b75;
    border-radius: 10px;
}

div::-webkit-scrollbar-thumb:hover {
    background: #01043bab;
}

/* Scrollbar Styles */
ul::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

ul::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

ul::-webkit-scrollbar-track-piece {
    background: transparent;
}

ul::-webkit-scrollbar-corner {
    background: transparent;
}

ul::-webkit-scrollbar-thumb {
    background: #01043b75;
    border-radius: 10px;
}

ul::-webkit-scrollbar-thumb:hover {
    background: #01043bab;
}

textarea::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

textarea::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-track-piece {
    background: transparent;
}

textarea::-webkit-scrollbar-corner {
    background: transparent;
}

textarea::-webkit-scrollbar-thumb {
    background: #01043b75;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: #01043bab;
}

.shadow {
    box-shadow: 0px 5px 10px 0px rgba(90, 90, 90, 0.28);
}