/* --------------------PROJECT--------------------- */
::-moz-selection {
	/* Code for Firefox */
	color: white;
	background: black;
}
::selection {
	color: white;
	background: black;
}
/* Fix the navbar */
.nav {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	padding-top: 5px;
	padding-left: 5px;
	width: 50%;
	background: #ffffff;
	position: fixed;
	/* Make navbar fixed */
	top: 0;
	/* Stick it to the top */
	left: 0;
	/* Ensure it's aligned with the left side */
	z-index: 9999;
	/* Ensure it stays on top of other content */
	display: flex;
	/* Use flexbox for layout */
	justify-content: space-between;
	/* Space out nav-left, nav-about, nav-contact */
}
/* Create an invisible filler to avoid content overlap */
.filler {
	visibility: hidden;
}
/* Ensure nav-about and nav-contact are independent of each other */
.nav-left {
	display: block;
	/* Allows the text to flow naturally */
}
/* Right section (About) */
.nav-about {
	position: absolute;
	/* Absolute positioning ensures it's independent */
	right: 10vw;
	/* Adjust based on the space you need */
	top: 5px;
	/* Ensure it's vertically aligned */
	font-size: 7.5pt;
	color: black;
	transition: letter-spacing 0.3s ease;
}
.nav-about:hover{
	letter-spacing: 1px;
	cursor: crosshair;
	/* Change cursor on hover */
}
/* Right section (Contact) */
.nav-contact {
	position: absolute;
	/* Absolute positioning ensures it's independent */
	right: 10px;
	/* Adjust based on your design */
	top: 5px;
	/* Ensure it's vertically aligned */
	font-size: 7.5pt;
	color: black;
	transition: letter-spacing 0.3s ease;
}
.nav-contact:hover{
	letter-spacing: 1px;
	cursor: crosshair !important;
	/* Change cursor on hover */
}
.nav-contact a {
	cursor: auto;
	/* Default cursor */
}
.nav-contact a:hover {
	cursor: crosshair;
	/* Crosshair cursor on hover */
}
/* Columns container */
.columns-div {
	padding-bottom: 10px;
	position: relative;
}
/* Flexbox layout for the row */
.row {
	display: flex;
	flex-wrap: wrap;
}
/* Columns */
.column {
	width: 50%;
	order: 2;
}
.column2 {
	width: 50%;
	order: 1;
}
.column img,.column2 img {
	width: 100%;
	/* Ensure images take full width of the container */
	max-height: 90vh;
	/* Changed from 80vh to 100vh */
	object-fit: cover;
}
/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}
a{
	color:black;
	text-decoration: none;
}
#project-txt{
	padding-right:5px;
}
.nav-info{
	display:none;
}
.nav-info-on{
	display:block;
}

/* ------------ IMG SLIDESHOW ------------ */
/* Slideshow container */
.slideshow-container {
	position: relative;
	margin: auto;
}

/* Next & previous buttons */
.next {
	position: absolute;
	right: 0;
	height: 50vw;
	width: 50%;
	user-select: none;
	top: 0%;
	text-align: center;
	z-index: 100;
	/* Ensure navigation buttons are in front */
}
.prev {
	position: absolute;
	height: 50vw;
	width: 50%;
	user-select: none;
	top: 0%;
	text-align: center;
	z-index: 100;
	/* Ensure navigation buttons are in front */
}
.next:hover {
	cursor: crosshair;
}
.prev:hover {
	cursor: crosshair;
}
.numbertext {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	display: block;
	/* Ensure numbertext is visible */
	position: absolute;
	/* Absolute positioning */
	bottom: 0px;
	/* 10px from the bottom */
	left: 0px;
	/* 10px from the left */
	color: white;
	/* White text */
	background-color: #000000;
	z-index: 2;
	/* Ensure the text is above the images */
	padding: 0px;
	/* Optional: Add padding for spacing */
	padding-left:2px;
	padding-right:2px;
}
/* Hide slides by default */
.mySlides, .mySlides2 {
	display: none;
	object-fit: cover;
}
.mySlides.active, .mySlides2.active {
	display: block;
	/* Show the active slide */
}
/* Info text for slides */
.Slide_info {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	color: #000000;
	font-size: 7.5pt;
	padding-top: 5px;
	padding-left: 2px;
	padding-right: 20px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
/* Info text for slides */
.Slide_info_on {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	color: #000000;
	font-size: 7.5pt;
	padding-top: 5px;
	padding-left: 2px;
	padding-right: 20px;
}
.info-container {
	display: flex;
	flex-direction: row;
}
.main-info {
	padding-right: 50px;
	/* Adjust as necessary for spacing */
	white-space: nowrap;
	/* Prevent text wrapping */
}
.additional-info {
	display: flex;
	flex-direction: column;
}
.additional-info-mobile {
	display: none;
}
.Slide_info_over {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	color: #000000;
	font-size: 7.5pt;
}
.mobile-text-block{
	padding-left: 50vw;
}
.spacer{
	padding-bottom: 50px;
}
#credits-display{
	padding-left: 5px;
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	position: fixed;
	top: 30%;
	max-width: 50%;
	/* Limit the width to 35% of the viewport width */
	z-index: 999;
	/* Ensure it appears above other content */
	overflow: hidden;
	/* Hide overflow text */
	white-space: normal;
	/* Allow text to wrap naturally */
	word-wrap: break-word;
	/* Ensure long words break onto the next line */
	overflow-wrap: break-word;
	/* Ensure long words break onto the next line */
	line-height: 1.4;
	/* Control line spacing for readability */
	color: #ffffff;
	background-color: #000000;
}
#typed-output span {
	display: block;
}
/* --------------------LANDING PAGE--------------------- */
.nav-lp {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	padding-top: 5px;
	padding-left: 5px;
	width: 50%;
	height: 35px;
	position: fixed;
	/* Make navbar fixed */
	top: 0;
	/* Stick it to the top */
	left: 0;
	/* Ensure it's aligned with the left side */
	z-index: 9999;
	/* Ensure it stays on top of other content */
}
/* Fullscreen Image Slideshow */
.image-slider {
	position: relative;
	width: 100vw;
	/* Full screen width */
	min-height: 100vh;
	/* Ensure full screen height */
	overflow: hidden;
	display: flex;
	justify-content: center;
	/* Center images horizontally */
	align-items: center;
	/* Center images vertically */
}
.slide {
	display: none;
	position: absolute;
	/* Absolutely position the slides */
	width: 100%;
	/* Ensure the width is always 100% */
	height: 100%;
	/* Ensure the height is always 100% */
	background-size: cover;
	/* Ensure the background image covers the full area */
	background-position: center center;
	/* Center the image to avoid excessive cropping */
}
.slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Ensures images cover the full area without stretching */
	object-position: center;
	/* Keeps the image centered */
}
/* Text overlay styles */
.lp-text-overlay {
	padding-left: 10px;
	color: #ffffff;
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	position: fixed;
	top: 47%;
	/* Adjust this to center vertically or tweak as necessary */
	transition: opacity 0.3s ease;
	/* Smooth transition for opacity change */
}
/* -------------------- OVERVIEW --------------------- */
.column2-static {
	width: 50%;
}
/* Basic styling for the overview text */
.overview-text {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	position: fixed;
	/* Fixes the element in place */
	top: 47%;
	/* You can adjust this value to set its distance from the top of the viewport */
	z-index: 100;
	padding-left: 5px;
	opacity: 0;
	visibility: hidden;
	/* Ensure element is not visible or interactable when hidden */
	transition: opacity 0.3s ease, visibility 0.3s ease;
	/* 0.3s fade-in/fade-out transition */
}
.overview-text.visible {
	opacity: 1;
	visibility: visible;
	/* When visible, make the element interactable */
}
/* Left column Image preview on hover */
.new-image {
	width: 120px !important;
	/* Ensure fixed width */
	height: 120px !important;
	/* Ensure fixed height */
	object-fit: cover;
	/* Maintain aspect ratio */
	position: fixed;
	/* Keeps the element fixed in place */
	margin-left: 20vw;
	top: 40%;
	/* You can adjust this value to set its distance from the top of the viewport */
	z-index: 100;
	opacity: 0;
	/* Start as invisible */
	transition: opacity 0.3s ease;
	/* Smooth transition for opacity change */
}
/* Once the image is added, we make it fully visible */
.new-image.visible {
	opacity: 1;
}
/* Add some basic styles for images */
.column img {
	margin: 0;
	padding: 0;
	display: block;
}
/* On hover, remove the grayscale and restore to color */
.bw-image:hover {
	cursor:crosshair;
	filter: grayscale(0%);
	/* Remove grayscale on hover */
}
/* Apply the grayscale effect only to images with the class 'bw-image' */
.bw-image {
	width: 100%;
	/* Ensure images take up full width of the container */
	height: 30vw;
	/* Set a fixed height for images (adjust as needed) */
	object-fit: cover;
	/* Ensure images cover the area while maintaining aspect ratio */
	/*transition: filter 0.5s ease;
	/* Add transition for smooth effect */
	filter: grayscale(100%);
	/* Set images to black and white */
}
/* On hover, remove the grayscale and restore to color */
.bw-image-neg:hover {
	filter: grayscale(0%);
	/* Remove grayscale on hover */
	filter: invert(100%);
	/* Inverts the colors to make the image negative */
}
.bw-image-neg {
	width: 100%;
	/* Ensure images take up full width of the container */
	height: 30vw;
	/* Set a fixed height for images (adjust as needed) */
	object-fit: cover;
	/* Ensure images cover the area while maintaining aspect ratio */
	/*transition: filter 0.5s ease;
	/* Add transition for smooth effect */
	transition: filter 0.3s ease;
	/* Smooth transition */
}
.nav.fixed {
	display: flex;
	/* Flexbox for horizontal alignment */
	justify-content: space-between;
	/* Space between Michele Brianza and the X */
	align-items: baseline;
	/* Align both elements on the same baseline */
	padding: 5px;
	/* Optional padding for better visual alignment */
	background-color: #fff;
	/* Background color if needed */
}
.close-btn {
	text-decoration: none;
	/* Remove underline */
	color: black;
	/* Color of the X */
	transition: letter-spacing 0.3s ease;
}
.close-btn:hover {
	letter-spacing: 3px;
	cursor: crosshair;
	/* Change cursor on hover */
}
/* Container for the columns */
.project-row {
	display: flex;
	/* Set up a flex container */
	justify-content: flex-start;
	/* Align items to the left (or you can use 'space-between' if needed) */
}
/* First column: Fixed width */
.project-column {
	width: 120px;
	/* Fixed width */
	flex-shrink: 0;
	/* Prevent shrinking */
}
/* Second column: Takes the remaining space */
.project-column2 {
	flex-grow: 1;
	/* Takes remaining space */
	width: auto;
	/* Allow the width to grow */
}
/* Clear floats (not needed with flexbox, so can be omitted) */
.project-row:after {
	content: "";
	display: table;
	clear: both;
}
/* Position the paragraph on the left side of the screen */
#about-text {
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7.5pt;
	position: fixed;
	top: 45%;
	left: 0;
	padding-left: 5px;
	max-width: 40vw;
	/* Limit the width to 35% of the viewport width */
	z-index: 999;
	/* Ensure it appears above other content */
	overflow: hidden;
	/* Hide overflow text */
	white-space: normal;
	/* Allow text to wrap naturally */
	word-wrap: break-word;
	/* Ensure long words break onto the next line */
	overflow-wrap: break-word;
	/* Ensure long words break onto the next line */
	line-height: 1.4;
	/* Control line spacing for readability */
}
/* Optional: Styling for the typing effect container */
#about-text p {
	margin: 0;
	white-space: normal;
	/* Allow text to wrap naturally */
	word-wrap: break-word;
	/* Ensure long words break onto the next line */
	overflow-wrap: break-word;
	/* Ensure long words break onto the next line */
}
.hidden {
	display: none;
}
/* Hide the mobile text by default and show the desktop text */
.mobile-only {
	display: none;
}
.desktop-only {
	display: inline;
}
.on-credits-1{
	padding-left:36vw;
	position: absolute;
	/* Absolute positioning ensures it's independent */
	transition: letter-spacing 0.3s ease;
}
.on-credits-1:hover{
	letter-spacing: 1px;
	cursor: crosshair;
	/* Change cursor on hover */
	text-align: right;
}
/* Base styling for the fixed info box */
.fixed-info {
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #000000;
	color: white;
	font-family: 'rt_dromo_monolight', Courier, monospace;
	font-size: 7pt;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	padding-left: 5px;
	padding-bottom:2px;
	padding-right:2px;
}
/* When the #about-info section is targeted, make .fixed-info visible */
#about-info:target + .fixed-info {
	opacity: 1;
	visibility: visible;
}
/* Ensure the "about" section returns to normal state when unselected */
.hidden {
	display: none;
}


/* Mobile layout adjustments */
@media screen and (max-width: 1025px) {
	/* Mobile adjustments to other layout elements */
	.row {
		display: flex;
		/* Ensure the row is a flex container */
		flex-direction: column;
		/* Stack elements vertically */
	}
	/* Columns take full width */
	.column, .column2 {
		width: 100%;
		position: relative;
	}
	.nav-studio-info{
		display:none;
	}
	/* Adjust the order to ensure proper placement */
	.mobile-text-block {
		margin-top: 20px;
		/* Add spacing above */
	}
	.slideshow-container {
		height: 50vh;
		/* Ensure the images take up half the screen height */
		overflow: hidden;
		/* Hide any content that overflows */
	}
	/* Ensure images inside the slideshow containers fill the container */
	.slideshow-container img {
		width: 100%;
		/* Ensure images take up full width */
		height: 100%;
		/* Ensure images take up full height */
		object-fit: cover;
		/* Maintain aspect ratio and cover the container */
		display: block;
	}
	/* Ensure the slideshow container is positioned correctly */
	.slideshow-container {
		position: relative;
		/* Make this container the reference for absolute positioning */
		height: 50vh;
		/* Ensure images take up half the screen height */
		overflow: hidden;
		/* Hide overflowing content */
	}
	/* Position the numbertext in the lower left corner of each image */
	.numbertext {
		font-family: 'rt_dromo_monolight', Courier, monospace;
		font-size: 7.5pt;
		display: block;
		/* Ensure numbertext is visible */
		position: absolute;
		/* Absolute positioning */
		bottom: 0px;
		/* 10px from the bottom */
		left: 0px;
		/* 10px from the left */
		color: white;
		/* White text */
		background-color: #000000;
		z-index: 2;
		/* Ensure the text is above the images */
		padding: 0px;
		/* Optional: Add padding for spacing */
		padding-left:5px;
	}
	.Slide_info {
		width: 100%;
		/* Make it take full width */
		order: 3;
		/* Ensure it appears after the columns */
		padding-left: 5px;
		/* Optional padding for better spacing */
	}
	.Slide_info_over {
		width: 100%;
		/* Make it take full width */
		order: 3;
		/* Ensure it appears after the columns */
		padding-left: 5px;
		/* Optional padding for better spacing */
		padding-top:1px;
	}
	.next, .prev{
		height: 50vh;
	}
	.next:hover {
		cursor: auto;
	}
	.prev:hover {
		cursor: auto;
	}
	/* Ensure the images are correctly positioned */
	.slide {
		position: relative;
		/* Make it relative for positioning the numbertext */
		width: 100%;
		/* Ensure the slide takes up the full width */
		height: 100%;
		/* Ensure the slide takes up the full height */
		object-fit: cover;
		/* Make sure the image covers the container */
	}
	/* Ensure the image inside slideshow containers fill the container */
	.slide-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* Ensure the images fill the container without stretching */
		object-position: center;
		/* Keep images centered */
	}
	.mobile-text-block{
		padding-left: 0vw;
	}
	.column img {
		margin: 0;
		padding: 0;
		display: block;
	}
	.nav-info{
		display:block;
		padding-left: 40vw;
		/* Adjust based on the space you need */
	}
	.nav-info-on{
		display:none;
	}
	/* Disable scrolling on mobile */
	.no-scroll {
		overflow: hidden;
		/* Prevents scrolling */
		height: 100vh;
		/* Ensures the body takes full viewport height */
	}
	.Slide_info{
		display:none;
	}
	/* Fix nav layout for mobile */
	.nav {
		font-family: 'rt_dromo_monolight', Courier, monospace;
		font-size: 7.5pt;
		padding-top: 10px;
		padding-left: 10px;
		width: 100%;
		position: fixed;
		/* Make navbar fixed */
		top: 0;
		/* Stick it to the top */
		left: 0;
		/* Ensure it's aligned with the left side */
		z-index: 9999;
		/* Ensure it stays on top of other content */
	}
	.nav-about{
		right: 25vw;
		/* Adjust based on the space you need */
	}
	/* Create an invisible filler to avoid content overlap */
	.filler {
		visibility: hidden;
	}
	/* Enable scrolling on mobile */
	html, body {
		overflow-y: scroll;
		/* Enable vertical scrolling on mobile */
		height: auto;
		/* Allow scrolling when content overflows */
	}
	.desktop-only {
		display: none;
	}
	.mobile-only {
		display: inline;
	}
	.new-image{
		display:none;
	}
	.overview-text{
		display:none;
	}
	.image-slider {
		width: 100vw;
		height: 100vh;
	}
	.slide-image {
		width: 100vw;
		/* Full width */
		height: 100vh;
		/* Full height */
		object-fit: cover;
		/* Ensure image covers the area without stretching */
	}
	.slide {
		display: flex;
		/* Ensure flex layout for better centering */
		justify-content: center;
		/* Center content */
		align-items: center;
		/* Center content */
	}
	.mySlides {
		display: block;
		/* Ensure images in the slideshow are displayed */
	}
	.slide, .mySlides, .mySlides2 {
		position: relative;
		width: 100%;
		height: 100%;
	}
	/* Fix nav layout for mobile */
	.nav-lp {
		font-family: 'rt_dromo_monolight', Courier, monospace;
		font-size: 7.5pt;
		padding-top: 10px;
		padding-left: 10px;
		width: 100% !important;
		height: 35px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}
	.bw-image{
		height:60vw !important;
		filter: none;
		/* Disable the grayscale filter on mobile */
	}
	.bw-image-neg{
		height:60vw !important;
		filter: none;
		/* Disable the grayscale filter on mobile */
	}
	.bw-image-neg:hover{
		filter: none;
		/* Disable the grayscale filter on mobile */
	}
	.bw-image:hover {
		filter: none;
		/* Disable hover effects on mobile */
	}
	.project-row {
		display: block;
		/* Set up a flex container */
	}
	#about-text {
		font-family: 'rt_dromo_monolight', Courier, monospace;
		font-size: 7.5pt;
		position: fixed;
		top: 40%;
		left: 0;
		padding-left: 5px;
		padding-right: 5px;
		max-width: 100%;
		/* Limit the width to 35% of the viewport width */
		z-index: 999;
		/* Ensure it appears above other content */
		overflow: hidden;
		/* Hide overflow text */
		white-space: normal;
		/* Allow text to wrap naturally */
		word-wrap: break-word;
		/* Ensure long words break onto the next line */
		overflow-wrap: break-word;
		/* Ensure long words break onto the next line */
		line-height: 1.4;
		/* Control line spacing for readability */
		color: #ffffff;
		background-color: #000000;
	}
	#credits-display{
		font-family: 'rt_dromo_monolight', Courier, monospace;
		font-size: 7.5pt;
		position: fixed;
		top: 33%;
		max-width: 100%;
		/* Limit the width to 35% of the viewport width */
		z-index: 999;
		/* Ensure it appears above other content */
		overflow: hidden;
		/* Hide overflow text */
		white-space: normal;
		/* Allow text to wrap naturally */
		word-wrap: break-word;
		/* Ensure long words break onto the next line */
		overflow-wrap: break-word;
		/* Ensure long words break onto the next line */
		line-height: 1.4;
		/* Control line spacing for readability */
		color: #ffffff;
		background-color: #000000;
	}
	.on-credits-1{
		padding-left: 63vw;
		/* Adjust based on the space you need */
	}
	.additional-info {
		display: none;
	}
	.additional-info-mobile {
		display: block;
	}
	/* Base styling for the fixed info box */
	.fixed-info {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #000000;
		color: white;
		font-family: 'rt_dromo_monolight', Courier, monospace;
		font-size: 6pt;
		width:100%;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.1s ease, visibility 0.1s ease;
		padding-left: 5px;
		padding-bottom:2px;
		padding-right:2px;
	}
}