@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/montserrat-v26-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap; /* Improves font loading performance */
}

body {
    font-family: 'Montserrat', sans-serif; /* Added fallback font */
    background: #c6c6c6 url('/media/img/png/cream-paper.png') repeat; /* Combined properties, added repeat for clarity */
    
}

#myTitle {
    font-size: 3rem; /* Changed to rem for consistency */
    font-weight: bold;
}

#myNav {
    font-size: 1.5rem; /* Changed to rem for consistency */
}

.nav-link:hover {
    color: #fff; /* Fixed syntax error (:hover, not : hover), used hex for consistency */
}

#reels a {
    display: block; /* Ensures d-block behavior is preserved */
    text-decoration: none;
    color: #000; /* Used hex for consistency */
    font-size: 1.75rem; /* Changed to rem */
    margin-bottom: 0.625rem; /* Standardized spacing (10px at 16px base) */
    transition: color 0.3s ease; /* Smooth hover transition */
}

#reels a:hover {
    color: #fff; /* Used hex for consistency */
}

.carousel, hr {
    margin: 0 auto; /* Simplified mx-auto */
    width: 100%;
    max-width: 75%; /* Matches w-75 */
}

@media (max-width: 767.98px) { /* Bootstrap's md breakpoint */
    #reels {
        margin-top: 3.125rem; /* 50px converted to rem */
    }
    .carousel {
        max-width: 100%; /* Full width on smaller screens */
    }
}