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

/* Full-page container with an equal-width responsive border */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee; /* outer border */
    color:#111; /* text color */
    
    /* variable font */
    font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings:
		"wdth" 100,
		"YTLC" 500;
}

/* 
.nunito-sans-<customise>: Use a unique and descriptive class name
font-weight: Use a value from 200 to 1000
 */

.nunito-sans-bold {
	font-family: "Nunito Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	font-variation-settings:
		"wdth" 100,
		"YTLC" 500;
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 10px;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 10px;
}

.container {
    background-color: white;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    max-width: calc(100vw - 6vh);
    max-height: calc(100vh - 6vh);
    padding: 48px;
    display: grid;
   	grid-template-columns: 38.2% auto; /* Left column 38.2%, right column auto */
    grid-template-rows: auto 1fr auto; /* Header, content, footer */
    gap: 30px; /* Space between items */
    align-items: start; /* Align items to the start of each row */
}

/* Header styling */
header {
    grid-column: 1 / 2;
    grid-row: 1;
    text-transform: uppercase;
}

header h1 {
    font-size: 4em;
    font-weight: 800;
    margin-bottom: 0;
    margin-left: -.05em;
    line-height: .8em;
    letter-spacing: -.05em;
}

header h2 {
    font-size: 1em;
    font-weight: 800;
    line-height: 2em;
    letter-spacing: .05em;
}

/* Main content styling */
a,a:link {
	color:inherit;
}
a:hover {
	color:#bbb;
}

.content {
    display: contents; /* Allow the children to directly participate in the grid */
}
.content p {
	font-size: 1em;
	line-height: 1.25em;
	margin-bottom: 1em;
}

.bio {
    grid-column: 1 / 2;
    grid-row: 2;
    align-self: stretch;
    padding-top:2em;
}

.gallery {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* Span the right column over the header and content rows */
    align-self: stretch;
}

/* Slideshow styles */
.slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    padding:0;
    /* max-height: 70vh; */
    display: flex;
    /* justify-content: flex-end; */
    align-content: flex-start;
}

.slideshow img {
    width: 100%; /* Ensure the image takes up the full width of the container */
    height: 100%; /* Ensure the image takes up the full height of the container */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
    object-fit: contain;
    object-position: top right;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
}

.slideshow img:first-child {
    opacity: 1;
    position: relative;
}

/* Footer styling */
footer {
    grid-column: 1 / 3;
    grid-row: 3;
}

footer p {
	font-size: 80%;
}

/* Bottom-left menu styling */
.bottom-menu {
    margin-bottom: .9em;
}

.bottom-menu ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

.bottom-menu li a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    font-size: 1em;
    text-transform: uppercase;
    cursor: pointer;
}

.bottom-menu li a:hover {
    text-decoration: underline;
}

/* Responsive media queries */
@media (max-width: 1200px) {
    header {
        grid-column: 1 / span 2; /* Header spans the entire width */
    }

    .bio {
    	grid-column: 1;
    }

    .gallery {
    	grid-column: 2;
        grid-row: 2; /* Position the gallery right after the header */
    }
}

@media (max-width: 960px) {
	body {
		height: auto;
	}

    .container {
    	height: 100%; /* Reset height to 100% so content doesn't get cut off at the bottom */
		margin-top: 3vh;
		margin-bottom: 3vh;
		max-height: 100%; /* ensure the container wraps around the content completely */
        grid-template-columns: 1fr; /* Single column layout on smaller screens */
        grid-template-rows: auto auto auto auto; /* Header, right column, left column, footer */
        column-gap: 0;
    }

    .bio {
        grid-column: 1;
        grid-row: 3; /* Move below the right column */
    }

    .gallery {
        grid-column: 1;
        grid-row: 2; /* Move below the header */
       /*  max-height:50%; */
    }
    
    .slideshow img {
    	object-position: unset;
    }

    footer {
        grid-column: 1;
        grid-row: 4; /* Footer at the bottom */
    }
}

@media (max-width: 480px) {
	.container {
		width: calc(100% - 15px);
		height: calc(100% - 15px);
		padding: 24px;	
	}
	
	header h2 {
		font-size: .625em;
		line-height: 2em;
		letter-spacing: .05em;
	}
	
	.bio {
		padding-top:0;
	}

    .slideshow {
        max-height: 50vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slideshow img {
        transition: none;
    }
}


/* bug fixing */
/* 
body {background-color: black;}
.container {background-color: yellow;}
header {background-color: blue;}
.bio {background-color: red;}
.gallery {background-color: green;}
.bottom-menu {background-color: purple;}
 */