/* Global Styles */
/* Playfair Display Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* CSS Colors */
:root {
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-orange: #FF9505;
    --color-orange-light: #CE8964;
    --color-green: #4F9D69;
    --color-text: #F6F3F1;
    --color-text-med: #8F8F8E;
    --color-text-dark: #323231;

    --color-background-base: #F6F6F6;
    --color-background-glass-med: rgba(251, 251, 251, .80);
    --color-background-glass-light: rgba(251, 251, 251, .10);
    --color-background-glass-white: rgba(251, 251, 251, 0.90);
}

/* Body */
body {
    /* Disable overscroll */
    overscroll-behavior: none;

    /* Font */
    color: var(--color-text-dark);

    font-family: -apple-system, BlinkMacSystemFont,
    'helvetica neue', helvetica,
    'avenir next', avenir,
    arial,
    ubuntu,
    roboto, noto,
    'segoe ui',
    sans-serif;

    /* Background */
    background-color: var(--color-background-base);
    position: relative;
    z-index: 1;
    /* background-color: var(--color-background-base);
    background-image: url("../assets/navbar.jpg");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-attachment: fixed; */
}

/* Background Image */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-image: url("../assets/navbar.jpg");
    background-position: center right;
    background-repeat: no-repeat;
    /* For iOS compatibility */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

h1 {
    color: var(--color-orange)
}

footer {
    background-color: var(--color-background-glass-med);
    /* blur effect */
    backdrop-filter: blur(20px);
    /* top inset shadow */
    box-shadow: inset 0 -10px 20px rgba(0, 0, 0, 0.3);
}

.nav-link, .footer-link {
    color: var(--color-green);
    text-decoration: none;
    transition: color 0.5s ease-in-out;
    transition: font-weight 0.5s ease-in-out;
}

.nav-active, .footer-active {
    color: var(--color-text-dark);
    /* 2px solid underline */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.nav-link:hover, .footer-link:hover {
    color: var(--color-text-dark);
    font-weight: bold;
}

/* Navigation */
.navbar {
    min-height: 75vh;
    /* inner shadow */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
}

/* Adjustments for larger screens can also use viewport units or remain specific */

/*
@media (min-width: 768px) {
    .navbar {
        min-height: 75vh;
    }
}
*/

/* Animation */
.--scale-up:hover {
    transform: scale(1.15);
    transition: transform 0.2s ease-in-out;
}

.--scale-down:hover {
    transform: scale(0.95);
    transition: transform 0.2s ease-in-out;
}

/* Page Theming */
.container-body {
    background-color: var(--color-background-glass-light);
    /* blur effect */
    backdrop-filter: blur(20px);    /* blur effect */
    backdrop-filter: blur(20px);
    /* upper shadow */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.section-card {
    background-color: var(--color-background-glass-white);
    border-radius: 5px;
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.05);
}