html {
	overflow: hidden;
}

body {
	background-color: gray;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}

a:hover {
	text-decoration: none;
}

#backgroundCanvas {
	position: absolute;
	width: 100vw;
	height: 100vh;
	z-index: -1; /* Place canvas behind other content */
	touch-action: none;
}


/* TopBar */
topbar {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    background: white;
    text-align: center;
    z-index: 10;
    position: absolute;
    top: 0px;
    transition: transform 0.25s;
    transform: translateY(-4em);
    box-shadow: 0px 0px 1px #00000085;
}

topbar #navToggle {
    font-size: 28px;
    padding: 0.5em;
    color: #3c3c3c;
    background: #ffffff;
    position: fixed;
    left: 0;
    top: 0;
    transition: transform 0.25s, left 0.25s;
}

topbar #navToggle::before {
	transition: transform 0.25s;
}

topbar #navToggle:hover::before  {
	color: var(--highlight-color);
	transform: rotate(90deg);
}

topbar #navToggle.active {
	left: calc(100% - 52px);
	transform: rotate(0deg);
	top: 62px;
}

/* Left */
sidebar {
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: linear-gradient(to right, rgb(18 18 18 / 62%), rgba(0, 0, 0, 0));
    padding: 10vh 0px 100vh 0px;
    width: 400px;
    transition: left 0.25s;
}

sidebar navUnderlay {
	opacity: 0;
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: -1;
    transition: opacity 0.5s;
}

sidebar.active navUnderlay {
    opacity: 1;
    background-image: linear-gradient(to right, rgb(57 57 57 / 0%), rgb(30 30 30 / 85%));
}

logo {
	margin: 0px 0px 50px 80px;
	max-width: 60%;
	width: 350px;
	height: 100px;
	background-image: url('/img/logo.png');
	background-size: contain; /* Scale the background image to fit within the element */
	background-repeat: no-repeat; /* Prevent the image from repeating */
	display: inline-block;
	transform-origin: top left; /* Set the scaling origin to top-left */
	transition: transform 0.2s ease-in-out; /* Add a smooth transition effect */
}

topbar > logo {
    filter: brightness(0);
    display: block;
    text-align: center;
    width: 138px;
    height: 42px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
}

nav {
	display: block;
	width: 100%;
	z-index: 1;
}

navBtn {
	display: block;
	text-transform: uppercase;
	font-size: 16px;
	font-family: 'Montserrat';
	font-weight: 600;
	user-select: none;
	cursor: pointer;
	padding: 1em 100px 1em 90px;
	background-color: transparent;
	margin-bottom: 1px;
	color: white;
	text-decoration: none;
	transition: color 0.5s, background-color 0.25s;
}

/*navBtn:hover, navBtn.active {
	background-color: white;
	color: var(--highlight-color);
}*/

/* Active Buttons */
navBtn.active, navBtn.active:hover,
fullscreen > i[direction="exit"]:active,
a#attribution:active {
	color: var(--highlight-color);
    background-color: white;
}

/* Hover Buttons */
navBtn:hover, 
fullscreen > i[direction="exit"]:hover,
a#attribution:hover {
	color: white;
    background-color: var(--color_secondary3);
    text-decoration: none;
}

a#attribution {
    display: block;
    position: absolute;
    z-index: 2;
    bottom: 0px;
    right: 0px;
    padding: 1em 2em 0.75em 2em;
    color: #ffffffc2;
    font-size: 0.6em;
    letter-spacing: 0.1em;
}

/* {
	
    background: #1c1c1cd9;
    color: white;
}*/

/* Right */
content {
    width: calc(100vw - 400px);
    height: 100vh;
    z-index: 1;
    position: absolute;
    display: block;
    top: 0px;
    right: -100%;
    transition: right 0.25s;
    background-color: rgb(30 30 30 / 75%);
}

content.active {
	right: 0%;
}

content > div {
    background-color: #ffffff;
    z-index: 3;
    padding: 3em 3em;
    text-align: justify;
    overflow-y: auto;
	overflow-x: hidden;
	max-width: 900px;
    margin-left: 0px;
    margin-right: auto;
    opacity: 1;
    transition: height 0.75s, opacity 0.75s, padding 0.75s;
}

content > div > img, content > div > p > img {
	width: 100%;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

content > div[active="true"] {
	padding: 3em 3em;
    opacity: 1;
    height: calc(100vh - 96px);
    animation-fill-mode: forwards;
    animation: fadeIn 0.75s;
}

content > div[active="false"] {
	padding: 0em 3em;
    opacity: 0;
    height: 0%;
    animation-fill-mode: forwards;
    animation: fadeOut 0.75s;
}

div[pruned="true"] {
	display: none;
}

/* About */

#about img {
	margin-bottom: 1em;
}

/* Portfolio  */

#portfolio {
    padding: 0px;
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: calc(100vh - 2.5em);
    max-width: 1100px;
    padding: 0.0em;
    padding-bottom: 2em;
}

cell.loading {
	background-size: 200%;
	opacity:0%;
}

cell {
	display: block;
	float: left;
    width: calc(100% / 3 - 6px);
    border: 3px solid white;
    height: 280px;
    background: #262626;
    overflow: visible;
    z-index: 0;
    position: relative;
    filter: brightness(100%);
    opacity: 100%;
    transition: transform 0.25s, filter 0.25s, box-shadow 0.25s, border 0.25s, opacity 1s, background-size 0.25s;
	background-repeat: no-repeat !important;
	background-size: 150%;
    background-position-x: center;
    background-position-y: center;
	box-shadow: 0px 0px 0px #000000FF;
    transform: scale(1);
}

cell:hover {
	filter: brightness(100%);
    transform: scale(1.2);
    background-size: 133%;
    border: 3px solid #2f2f2f;
	box-shadow: 0px 40px 10px #0000009e;
    z-index: 10;
}

cell title {
    display: block;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8em;
    background-color: #2f2f2f;
    position: absolute;
    bottom: 0px;
    left: -1px;
    text-align: left;
    padding: 0.5em 1.25em;
    opacity: 0%;
    transition: opacity 0.5s;
    user-select: none;
}

cell:hover title {
	opacity: 100%;
	transition: background-color 0.25s;
}

cell:active {
    border: 3px solid var(--highlight-color);
}

cell:active title {
    background-color: var(--highlight-color);
}

/*cell.full {
	position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
	transition: all 0.5s ease;
	filter: brightness(100%);
	z-index: 1;
	transition: z-index 0s 0s;
}
*/

/*content > div {
	background-color: #ffffffbf;
	padding: 3em;
	text-align: justify;
	opacity: 1;
    transition: height 3s, opacity 3s;
}

content > div[active="true"] {
	opacity: 1;
	height: 100%;
}

content > div[active="false"] {
	opacity: 0;
	height: 0%;
}*/

/* Testimonials */

testimony {
    height: auto;
    display: grid;
    grid-template-columns: 30% auto;
    grid-template-rows: 1fr;
    border: 1px solid #d2d2d2;
    background: #e8e7e7;
    margin-bottom: 2em;
    overflow: hidden;
}

testimony img {
	grid-row: 1;
    grid-column: 1;
    overflow: hidden;
    justify-self: center;
    height: 100%;
}

testimony txt {
	grid-row: 1;
    grid-column: 2;
    background: #f7f7f7;
    padding-top: 2em;
    padding-right: 2em;
    padding-bottom: 1em;
    padding-left: 2em;
}


testimony:nth-child(odd) {
    grid-template-columns: auto 30%;
}

testimony:nth-child(odd) img {
	grid-column: 2;
}

testimony:nth-child(odd) txt {
	grid-column: 1;
}

testimony quote {
    display: block;
    font-size: 1.1em;
    line-height: 160%;
    margin-bottom: 1em;
    text-align: left;
}

testimony quote::before,
testimony quote::after {
    color: #c77e51;
    content: "\201C";
    position: relative;
    display: inline-block;
    font-style: italic;
    padding: 0px 0.5em 0px 0px;
    top: 0.15em;
    font-size: 1em;
    scale: 2.5;
}

testimony quote::after {
    content: "\201D"; /* Right double quotation mark */
    padding: 0px 0px 0px 0.15em;
}

testimony name {
    font-size: 1.5em;
    display: block;
    text-align: right;
    color: #3d3d3d;
    font-weight: 100;
}

testimony title {
    font-size: 0.8em;
    display: block;
    text-align: right;
    color: #a56c30;
    margin-top: 1em;
    font-weight: 100;
}

/* Contact Page */

box {
    display: block;
    margin-bottom: 2em;
    margin-right: 2%;
    border: 1px solid #f3f3f3;
    max-width: 47%;
    min-height: 330px;
    float: left;
    font-size: 0.9em;
    text-align: left;
}

box label {
    background: #f3f3f3;
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 1.15em;
    padding: 1em;
    display: block;
    user-select: none;
}

box info {
    display: block;
    padding-top: 1em;
    padding-right: 2em;
    padding-bottom: 2em;
    padding-left: 2em;
}

box i.fa {
    font-size: 46px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    width: 46px;
    color: #3f3f3f;
}

box#phone a, box#email a {
    display: block;
    text-align: center;
    padding-bottom: 0.75em;
    font-size: 1.5em;
}

box#social info a {
    display: block;
    width: 50%;
    float: left;
    text-decoration: none;
    overflow: hidden;
}

box#social handle {
    display: block;
    position: relative;
    top: -1.5em;
    text-align: center;
    font-size: 0.85em;
    font-style: italic;
    color: #818181;
}

box#social info a:hover i, box#social info a:hover handle {
	color: var(--highlight-color);
}

box#address {
    max-width: 100%;
    width: 100%;
}

box#address .left {
    background: #7b7b7b;
    float: left;
    width: 60%;
    height: 400px;
}

box#address .right {
    float: right;
    width: 40%;
    height: 100%;
}

box#address a {
    color: black;
    text-decoration: none;
    display: block;
}

box#address a:hover {
    color: var(--highlight-color);
    cursor: pointer;
}

box#address .left {
	display: block;
	user-select: none;
    overflow: hidden;
}

/* Fullscreen Portfolio Items */

fullscreen {
    display: block;
    position: absolute;
    height: 100vh;
    width: 100vw;
    background: white;
    z-index: -1;
    opacity: 0%;
    user-select: none;
    overflow-x: hidden;
    overflow-y: scroll;
    transition: opacity 0.5s, z-index 0.5s;
}

fullscreen.active {
	z-index: 11;
	user-select: auto;
	opacity: 100%;
	transition: opacity 0.5s, z-index 0.5s;
}

fullscreen > i[direction="exit"] {
	color: #2f2f2f;
    background-color: white;
    padding: 1em;
    z-index: 100;
    font-size: 1.4em !important;
    transition: color 0.25s, background-color 0.25s; 
    opacity: 100%;
    cursor: pointer;
    position: fixed;
    right: 0px;
    top: 0px;
}

portfolio_item > imageArea > control[direction="left"] {
    background: #ff000000;
    display: block;
    position: relative;
    right: 0px;
    z-index: 2;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
}

portfolio_item > imageArea > control[direction="right"] {
    background: #0000ff00;
    display: block;
    position: absolute;
    z-index: 2;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 100%;
}

portfolio_item {
    z-index: 0;
    display: block;
    position: absolute;
    opacity: 0%;
    width: 100%;
    top: -64px;
}

portfolio_item imageArea {
    position: relative;
    display: block;
    width: 100vw;
    height: 70vh;
    top: 0px;
    background: black;
}

portfolio_item > imageArea > img {
    width: 100%; 
    height: 100%;
    object-fit: contain; /* this will make the image maintain its aspect ratio */
    object-position: center; /* this centers the image */
    position: absolute; /* positions the image relative to the container */
    top: 0;
    left: 0;
}

portfolio_item.active {
	z-index: 1;
	opacity: 100%;
}

portfolio_item desciption {
    background: white;
    display: block;
    position: relative;
    padding: 2em;
    z-index: 2;
    min-height: 200px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1050px) {
	/* CSS rules for mobile devices */
	body {
		font-size: 16px; /* Adjust font size for mobile */
	}

	content {
		width: calc(100vw);
		height: calc(100vh - 96px - 58px);
		top: 58px;
	}

	content > div {
		max-width: 100%;
		margin-right: 0px;
		margin-left: 0px;
	}

	#about,
	#testimonials,
	#contact {
		height: calc(100vh - 153px);
	}

	topbar.active {
		transform: translateY(0em);
	}

	sidebar.active {
		left: -400px;
	}
}

:root {
  --primary-color: #a1713d;
  --secondary-color: #6c757d;
  --accent-color: #17a2b8;
  --success-color: #28a745;
  --error-color: #dc3545;
  --highlight-color: #a1713d;
  --gray: #d2d2d2;
}

@media (max-width: 690px) {
	testimony {
		grid-template-columns: 100%;
	    grid-template-rows: 2fr;
	}

	testimony txt {
		grid-column: 1;
		grid-row: 2;
	}

	testimony img {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
	}

	testimony:nth-child(odd) {
	    grid-template-columns: 100%;
	}

	testimony:nth-child(odd) img {
		grid-column: 1;
	}

	testimony:nth-child(odd) txt {
		grid-column: 1;
	}

	box {
		margin-right: 0px;
		max-width: 100%;
	}

	cell {
		width: calc(100% / 2 - 6px);
	}

	fullscreen > i {
		opacity: 100%;
	}

	fullscreen > i[direction="right"],
	fullscreen > i[direction="left"] {
		display: none;
	}

	portfolio_item > control[direction="right"],
	portfolio_item > control[direction="left"] {
		height: 60%;
	}

	portfolio_item > imageArea > img {
	    object-fit: cover;
	}

}

@media (max-width:  450px) {
	#about,
	#testimonials,
	#contact {
		padding: 0px;
		height: calc(100vh - 59px);
	}

	#about h1,
	#contact h1,
	#testimonials h1 {
		padding-top: 1em;
		padding-left:  1em;
		padding-right: 1em;
	}

	#about p {
		padding-left: 1em;
		padding-right: 1em;
	}

	#about img {
		width: 100%;
	    height: 320px;
	    object-fit: cover;
	    display: block;
	    overflow: hidden;
	}
}