/* ==========================================================================
   1. FONTS
   ========================================================================== */
@font-face {
    font-family: 'saturno';
    src: url('../assets/fonts/saturno.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: '712serif';
    src: url('../assets/fonts/712serif.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. GLOBAL & BASE STYLES
   ========================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: red;
    font-family: '712serif', serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(154, 154, 154, 0.6); border-radius: 10px; }

/* Video Background */
.video-bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   3. TYPOGRAPHY & LINKS
   ========================================================================== */
h1 {
    width: 100%;             /* Allow it to use the full width */
    text-align: center;      /* Keep it centered */
    overflow-wrap: break-word; /* Force it to wrap if the screen is too narrow */
    padding: 0 20px;         /* Give it some breathing room on the edges */
}
/* Saturno for ALL Headings and Title IDs */
h1, h2, h3, h4, #header, #title {
    font-family: 'saturno', sans-serif !important;
    font-weight: normal;
    text-transform: lowercase;
    color: red;
}

/* Ensure links inside headings inherit the Saturno font */
h1 a, h2 a, h3 a, h4 a {
    font-family: inherit !important;
    color: inherit;
    text-decoration: none;
}
a:visited{
    font-family: inherit !important;
    color: inherit;
    text-decoration: none;
}

/* Specific fix for your intro text */
p, .intro p, .box p {
    font-family: '712serif', serif !important;
    font-size: 1.1rem;
    line-height: 1.4;
    color: red;
}

/* Link Behaviors */
a:link { text-decoration: none; }
a:hover { font-weight: bold; }

h1:hover { transform: scale(1.1); transition: transform 0.3s ease; }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.box {
    background-color: rgba(50, 50, 50, 0.4); /* subtle background to help text pop */
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
}