@font-face {
  font-family: 'Open Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

body {
    font-family: 'Open Sans Variable', Arial, sans-serif;
    background: rgb(248, 248, 248);
}

h2 {
    border-bottom: 2px solid rgb(255, 130, 45);
}

nav {
    font-size: 0.8rem;
}

#footer {
    border-top: 2px solid rgb(255, 130, 45);
    font-size: 0.8rem;
}

#main {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.card {
    font-size: 0.9rem;
	border: 1px solid rgb(35, 50, 100);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, font-weight 0.2s ease;
    color: rgb(35, 50, 100) !important;
    font-weight: 400;
}

.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	background-color: rgba(255, 130, 45, 0.05);
	border-color: rgb(255, 130, 45);
    font-weight: 600;
}

.bg-lisa {
    background-color: rgb(35, 50, 100);
}

#scrollToTopBtn {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

#scrollToTopBtn.show {
    opacity: 1;
    pointer-events: auto;
}