html, body {
    font-size: 1em;
}

body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    overflow-x: hidden;
}

/* General styling */
.bold {
    font-weight: bold;
}

.section-title {
    font-family: "Lora", serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 1s ease-in-out;
}

/* Navbar */
#navbar-logo {
    font-family: "DM Mono", "serif";
    font-size: 1.2em;
}

#navbar-1,
#navbar-2,
#navbar-3 {
    font-variant: all-small-caps;
    font-size: 1.5em;
    letter-spacing: 0.75px;
}

#navbar-1:hover,
#navbar-2:hover,
#navbar-3:hover {
    font-weight: bold;
    font-style: italic;
}

#subnavbar-1a,
#subnavbar-1b,
#subnavbar-2a,
#subnavbar-2b,
#subnavbar-2c {
    letter-spacing: 0.75px;
}

#subnavbar-1a:hover,
#subnavbar-1b:hover,
#subnavbar-2a:hover,
#subnavbar-2b:hover,
#subnavbar-2c:hover {
    font-weight: bold
}

.translation-btn {
    border: 1px solid white;
}

/* Mobile Navbar */
#mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

#mobile-subnavbar-1:hover,
#mobile-subnavbar-2:hover,
#mobile-subnavbar-3:hover,
#mobile-subnavbar-4:hover {
    transition: background-color 0.3s ease-in;
    background-color: rgba(72, 72, 72, 0.25);
    border-radius: 10px;
    width: fit-content;
    max-width: 80%;
}

/* Header */
#page-title {
    font-family:'Lora', serif;
    font-style: italic;
    font-weight: bold;
}

.page-subtitle {
    font-variant: all-small-caps;
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradientShift 10s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}