/* GLOBAL STYLES */

/* Reset and universal box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Settings:
   - Uses the 'Centaur' font for Latin alphabets globally.
   - Applies a tiled background image that scales with the viewport.
   - Sets a custom global cursor and prevents horizontal scrolling. */
body {
    font-family: 'Centaur', serif;
    color: #fff;
    background: url('../assets/images/misc/background.jpg') repeat center center;
    cursor: url('../assets/cursors/cursor-global.cur'), auto;
    overflow-x: hidden; /* Prevents horizontal scrolling */
    height: 100%; /* Ensures full viewport coverage */
}

/* Interactive Elements:
   Links, buttons, and language flags show a hover cursor */
a, button, .language-selector img {
    cursor: url('../assets/cursors/cursor-link-hover.cur'), pointer;
}

/* Headings:
   Normal font-weight for a cleaner look. */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* Images and Videos:
   - Scale responsively.
   - Displayed as block elements to remove extra space below. */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Ensures media fills its container proportionally */
}

/* Layout Container */
.layout {
    display: flex; /* Changed to flex for vertical stacking */
    flex-direction: column; /* Stacks elements vertically */
    align-items: center; /* Centers content horizontally */
    justify-content: flex-start; /* Aligns content to the top */
    width: 100%; /* Full width */
    height: 100vh; /* Full viewport height */
    overflow-y: auto; /* Allows vertical scrolling */
    scroll-behavior: smooth; /* Adds smooth scrolling */
}

/* Scrollbars */
.scrollbar {
    position: fixed;
    width: 20px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
}

.scrollbar-left {
    left: 0;
}

.scrollbar-right {
    right: 0;
}

/* Columns in Layout */
.column {
    height: auto;
}

.column.side {
    display: none; /* Removed side columns */
}

.column.center {
    background-color: transparent;
    width: 100%;
}

/* Center Column */
.center-column {
    width: 100%; /* Full width alignment */
    margin: 0 auto;
    overflow-y: auto;
    position: relative;
    height: 100%;
}

/* Main Container:
   Adjusted for new layout */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%; /* Full viewport height */
    overflow-y: auto; /* Enables vertical scrolling */
}

/* Section:
   Adjusted to fit within central column */
.section {
    width: 100%;
    margin: 0; /* Remove vertical spacing */
    position: relative; /* Ensures stacking alignment */
}

.section img, .section video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto; /* Maintain aspect ratio dynamically */
    object-fit: cover; /* Maintains proportions */
}

/* Adjustments for interactive elements inside sections */
.section a, 
.section button {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Adds smooth transitions */
}

.section a:hover, 
.section button:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    opacity: 0.9; /* Dim effect for hover */
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
    .layout {
        flex-direction: column; /* Ensures stacking remains vertical */
    }

    .main-container {
        padding: 0 10px; /* Adds horizontal padding on smaller screens */
    }

    .scrollbar {
        width: 10px; /* Narrower scrollbars for small screens */
    }

    .center-column {
        width: 100%;
    }
}