/* Root Variables */
/* Root Variables */
:root {
    --width: 720px; /* Default max-width for the body */
    --font-main: Verdana, sans-serif; /* Primary font family */
    --font-secondary: Verdana, sans-serif; /* Secondary font family */
    --font-scale: 1em; /* Font scale factor */
    --background-color: #01242e; /* Dark mode background color */
    --text-color: #ddd; /* Dark mode text color */
    --main-color: #00ffee; /* Main color */
    --bg-color: #01242e; /* Background color for dark mode */
    --link-color: #00ffee; /* Link color */
}

/* Global Styles */
body {
    font-family: var(--font-secondary); /* Apply secondary font family */
    font-size: var(--font-scale); /* Base font size */
    margin: auto; /* Center align content horizontally */
    padding: 20px; /* Padding around content */
    max-width: var(--width); /* Maximum width of content */
    text-align: left; /* Left-align text */
    background-color: var(--background-color); /* Background color */
    color: var(--text-color); /* Text color */
    line-height: 1.5; /* Line height */
}

a {
    color: var(--link-color); /* Link color */
    text-decoration: none; /* Remove underline */
}

a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #01242e; /* Dark mode background color */
        --text-color: #ddd; /* Dark mode text color */
        --link-color: #00ffee; /* Dark mode link color */
    }
}

/* Global Styles */
body {
    font-family: var(--font-secondary); /* Apply secondary font family */
    font-size: var(--font-scale); /* Base font size */
    margin: auto; /* Center align content horizontally */
    padding: 20px; /* Padding around content */
    max-width: var(--width); /* Maximum width of content */
    text-align: left; /* Left-align text */
    background-color: var(--background-color); /* Background color */
    color: var(--text-color); /* Text color */
    line-height: 1.5; /* Line height */
}

/* Navbar */
nav {
    background-color: #333; /* Navbar background color */
    color: white; /* Navbar text color */
    text-align: center; /* Center align text */
    padding: 10px 0; /* Padding top and bottom */
}

nav a {
    color: white; /* Navbar link color */
    text-decoration: none; /* Remove underline */
    margin: 0 15px; /* Margin between navbar links */
    font-weight: bold; /* Bold font weight */
}

nav a:hover {
    text-decoration: underline; /* Underline on hover */
}


/* Paragraph Styling */
p {
    font-family: 'Courier New', Courier, monospace; /* Fixed-width font */
    font-size: 1em; /* Font size */
    padding: 10px; /* Padding around paragraphs */
    border-radius: 5px; /* Rounded corners */
    line-height: 1.5; /* Line height */
    white-space: pre-wrap; /* Preserve line breaks */
    margin-bottom: 20px; /* Space below paragraphs */
}

/* Windows 90s Style Popup */
.window {
    font-family: 'Tahoma', sans-serif; /* Popup font family */
    border: 2px solid #000; /* Border style */
    background-color: #c0c0c0; /* Popup background color */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* Box shadow */
    padding: 0; /* No padding */
    width: 300px; /* Popup width */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Centering */
    animation: fadeIn 0.5s ease-in-out, scaleUp 0.5s ease-in-out; /* Animation */
    z-index: 1000; /* Ensure it's above other content */
    display: none; /* Initially hide it */
}

@keyframes fadeIn {
    from {
        opacity: 0; /* Start with opacity 0 */
    }
    to {
        opacity: 1; /* Fade in to full opacity */
    }
}

@keyframes scaleUp {
    from {
        transform: translate(-50%, -50%) scale(0.8); /* Scale down initially */
    }
    to {
        transform: translate(-50%, -50%) scale(1); /* Scale up to 100% */
    }
}

/* Title Bar */
.title-bar {
    background: linear-gradient(to right, #000080, #0000cd); /* Gradient background */
    color: #fff; /* Text color */
    display: flex; /* Flex container */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center align items */
    padding: 2px 5px; /* Padding */
    font-size: 0.9em; /* Font size */
    font-weight: bold; /* Bold font weight */
}

.title-bar-text {
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Ellipsis for overflow text */
    white-space: nowrap; /* No wrapping */
}

.title-bar-controls {
    display: flex; /* Flex container for controls */
    gap: 2px; /* Gap between controls */
}

.title-bar-controls button {
    width: 16px; /* Button width */
    height: 16px; /* Button height */
    background-color: #c0c0c0; /* Button background color */
    border: 1px solid #000; /* Border style */
    padding: 0; /* No padding */
    cursor: pointer; /* Pointer cursor */
}

.title-bar-controls button[aria-label="Minimize"]::before {
    content: '_'; /* Minimize icon */
    display: block; /* Block element */
    text-align: center; /* Center text */
    font-size: 12px; /* Font size */
    line-height: 14px; /* Line height */
}

.title-bar-controls button[aria-label="Maximize"]::before {
    content: '▢'; /* Maximize icon */
    display: block; /* Block element */
    text-align: center; /* Center text */
    font-size: 12px; /* Font size */
    line-height: 14px; /* Line height */
}

.title-bar-controls button[aria-label="Close"]::before {
    content: 'X'; /* Close icon */
    display: block; /* Block element */
    text-align: center; /* Center text */
    font-size: 12px; /* Font size */
    line-height: 14px; /* Line height */
}

/* Window Body */
.window-body {
    padding: 10px; /* Padding */
    background-color: #fff; /* Background color */
}

/* Field Row */
.field-row {
    display: flex; /* Flex container */
    justify-content: flex-end; /* Right align */
    gap: 5px; /* Gap between items */
}

.field-row button {
    background-color: #c0c0c0; /* Button background color */
    border: 1px solid #000; /* Border style */
    padding: 2px 10px; /* Padding */
    font-size: 0.9em; /* Font size */
    cursor: pointer; /* Pointer cursor */
}

.field-row button:hover {
    background-color: #a0a0a0; /* Button hover background color */
}

/* Projects Section */
.projects {
    background-color: var(--bg-color); /* Background color */
    padding: 100px 15px; /* Padding */
    color: var(--text-color); /* Text color */
}

.projects-box {
    display: grid; /* Grid layout */
    grid-template-columns: 1fr; /* One column per row */
    gap: 3rem; /* Gap between rows */
    justify-content: center; /* Center content */
    align-items: stretch; /* Stretch items */
    padding: 0; /* No padding */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .projects-box {
        gap: 1rem; /* Reduce gap between rows */
        justify-content: center; /* Center content */
    }

    .projects-card {
        padding: 1rem; /* Adjusted padding for smaller screens */
        margin-bottom: 1.5rem; /* Reduce gap between cards */
    }
}

.projects-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--bg-color);
    border: 2px solid var(--main-color);
    border-radius: 10px;
    padding: 1.5rem; /* Adjust padding as needed */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 238, 0.5);
    cursor: pointer;
    width: 100%; /* Full width */
    max-width: 100%; /* Ensure it fits within the viewport */
    margin: auto;
    margin-bottom: 3rem; /* Adjusted gap between rows */
    box-sizing: border-box; /* Include padding in total width */
}

.projects-card:hover {
    box-shadow: 0 0 25px rgba(0, 255, 238, 0.8); /* Hover box shadow */
    transform: translateY(-10px); /* Move up on hover */
}

.project-video {
    width: 100%; /* Full width */
    height: auto; /* Auto height */
    max-width: 100%; /* Ensure the video doesn't exceed its container */
    max-height: 100%; /* Ensure the video doesn't exceed its container */
    border-radius: 10px; /* Rounded corners */
    object-fit: cover; /* Ensure video covers the specified dimensions */
    margin-bottom: 1.5rem; /* Space between video and button */
}

.project-video-large {
    width: 100%; /* Full width */
    height: auto; /* Auto height */
    max-width: 100%; /* Ensure the video doesn't exceed its container */
    max-height: 100%; /* Ensure the video doesn't exceed its container */
    border-radius: 10px; /* Rounded corners */
    object-fit: cover; /* Ensure video covers the specified dimensions */
    margin-bottom: 1.5rem; /* Space between video and button */
}

.back-btn {
    color: #fff;
}

.btn {
    color: white;
}