/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General body styling */
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #fff;
    color: #333;
    line-height: 1.6;
    padding: 20px;
    text-align: center;
}

/* Container to center everything */
.container {
    max-width: 1200px;
    background-color: #fff;
    border: 1px solid #333;
    border-right: 0;
    border-bottom: 0;
    margin: 0 auto;
    padding: 0; /* Remove padding */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align to the left */
}

.header {
    background-color: #fff;
    /* border: 1px solid #333; */
    width: 100%;
    position: fixed;
    z-index: 1000;
    text-align: left;
    transition: height 0.3s ease; /* Smooth expand/collapse */
    overflow: hidden; /* Prevent content overflow when minimized */
}

.header .nav-button {
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    padding: 10px;
    text-align: left;
}

.nav-menu {
    background-color: #fff;
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    font-size: 1.2em;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #000;
}

/* Expanded state */
.header.expanded {
    height: auto; /* Allow content to determine height */
}

.header.expanded .nav-menu {
    display: flex; /* Show the menu */
}

/* Header and paragraph box styling */
.content-box {
    background-color: #fff;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
    width: calc(100%); /* Full width minus padding */
    margin: 0; /* No margin */
    padding: 10px; /* Reduced padding for a tighter fit */
    text-align: center; /* Center text */
}

.content-box video {
    width: 100%;
    height: auto;
    border: 20px;
}

.content-box iframe {
    width: 80%;
    height: 500px;
    border: 20px;
}

/* Additional style for grid items */
.grid-item {
    background-color: #fff;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    margin: 0;
    padding: 0;
    flex-basis: 33.33%; /* 3 items per row */
    text-align: center;
    position: relative;
    transition: transform 0.5s ease;
    box-sizing: border-box; /* Ensure padding and border are included in width calculation */
}

.grid-item > a {
    display: block; /* Make anchor fill the grid item */
    height: 0; /* Initialize height for square box */
    padding-bottom: 100%; /* Maintain square aspect ratio */
    position: relative; /* For absolute positioning of the image */
    overflow: hidden; /* Prevent overflow when zooming */
}

.grid-item img {
    position: absolute;
    height: calc(var(--vertical_elements) * 100%); /* Maintain aspect ratio based on vertical elements */
    width: auto;
    transition: 0.3s ease;
    filter: blur(0);
    left: calc(-1 * var(--x) * 100%); /* Correct use of var(--x) */
    top: calc(-1 * var(--y) * 100%); /* Transform the image vertically */
    transform-origin: calc((var(--x) + 0.5) / var(--horizontal_elements) * 100%) calc((var(--y) + 0.5) / var(--vertical_elements) * 100%); /* Get the center for the image trasform -> x, y; add 0.5 to center the transform to image center*/
}

.grid-item a:hover img {
    filter: blur(5px);
    transform: scale(1.2);
}


.grid-item a:hover .text-overlay {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%); /* Bring it to its final position */
}
    /* Text overlay */
.text-overlay {
    font-family: 'Montserrat', serif;
    font-weight: 300;
    font-size: 1em; /* Ensure it fits in one line */
    color: #333;
    background-color: #fff;
    padding: 0.5em 1em; /* Adjusted padding for single-line fit */
    text-transform: uppercase;
    /* border: 1px solid #000; */
    
    position: absolute;
    bottom: 30%; /* Positioned off-screen initially */
    left: 50%;
    transform: translateX(-50%) translateY(50%); /* Start below the grid item */
    text-align: center;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
}

.description {
    font-family: 'Montserrat', serif;
    font-weight: 300;
    margin: 0; /* Remove margin */
    color: #333;
    padding: 2%; /* Padding for description */
    border-top: 1px solid #333; /* Border above description */
    text-align: center; /* Center text in the description box */
    font-size: 1em;
}

.description normal {
    font-size: 0.75em;
    text-transform: uppercase;
}

.description a {
    color: #333; /* Match link color with text */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transition */
}

/* Main header styling */
h1 {
    text-transform: uppercase;
    font-weight: 150;
    font-size: 2em;
    color: #333;
}

/* Subheader styling */
h2 {
    text-transform: uppercase;
    font-weight: 200;
    color: #333;
    font-size: 1.5em;
}

h2 a {
    text-decoration: none;
    color: #333;
    display: inline-block; /* Ensures hover area is the text itself */
    transition: color 0.3s ease, transform 0.3s ease;
}

h2 a:hover {
    transform: scale(1.1);
    color: #000;
}

/* Description paragraph */
p {
    font-family: 'Old Standard TT', serif;
    font-weight: 100;
    font-size: 1em;
    color: #333;
    padding-inline: 5%;
    text-align: justify;
}

/* Footer box styling */
footer {
    font-weight: 400;
    font-size: 0.8em;
    color: #333;
    padding: 10px;
}

/* Footer content styling */
.footer-content {
    display: flex;
    justify-content: space-between; /* Space between text and icons */
    align-items: center; /* Vertically center content */
}

/* Social icons container */
.social-icons {
    display: flex; /* Align icons horizontally */
    gap: 15px; /* Space between icons */
}

/* Default styling for all social links */
.social-link {
    color: #333;
    font-size: 1.5em;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

/* Hover effect with unique colors for each social icon */
.social-link:hover {
    transform: scale(1.2);
}

/* Specific hover colors */
.social-link[href*="linkedin.com"]:hover {
    color: #0077b5; /* LinkedIn blue */
}

.social-link[href*="github.com"]:hover {
    color: #3d75c2; /* GitHub blue */
}

.social-link[href*="instagram.com"]:hover {
    color: #E1306C; /* Instagram pink */
}

footer a {
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease;
}

footer a:hover {
    transform: scale(1.15); /* Zoom in on hover */
}

/* Remove the right border for the last item in each row */
.grid-item:nth-child(3n) {
    border-right: none;
}

@media (max-width: 1100px) {
    .grid-item {
        flex-basis: 50%; /* 2 items per row */
    }
}

@media (max-width: 700px) {
    .grid-item {
        flex-basis: 100%; /* 1 item per row */
    }
}

/* Remove the right border for the last item in each row */
.grid-item:nth-child(3n) {
    border-right: 1px solid #333;
}
@media (max-width: 900px) {
    .grid-item:nth-child(2n) {
        border-right: 1px solid #333;
    }
}
/* Ensure content wraps well on smaller screens */
@media (max-width: 300px) {
    .footer-content {
        flex-direction: column; /* Stack text and icons vertically on small screens */
        align-items: center; /* Center items */
        text-align: center; /* Center text for smaller screens */
    }
    .social-icons {
        margin-top: 5px; /* Add some space between text and icons */
    }
}

@media (max-width: 10000px) {
    .social-icons {
        gap: 15px;
    }
}

@media (max-width: 800px) {
    .social-icons {
        gap: 10px;
    }

    .social-link {
        font-size: 1.5em;
    }
}

@media (max-width: 600px) {
    .social-icons {
        gap: 8px;
    }

    .social-link {
        font-size: 1.3em;
    }
}

html {
    scroll-behavior: smooth;
}