:root {
	--accent-color: #D2691E /* (chocolate brown) */;
	--text-color: #808080 /* (gray grey) */;
	--background-color: #f5f5f5 /* (Whitesmoke grey) */;
  }

@font-face {
	font-family: 'Whovetica';
	src: url('Whovetica.eot');
	src: url('Whovetica.eot?#iefix') format('embedded-opentype'),
		url('Whovetica.woff2') format('woff2'),
		url('Whovetica.woff') format('woff'),
		url('Whovetica.svg#Whovetica-DisplayOpt28') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

	strong {
		font-weight: 700;
	}


*{
	margin:0;
	padding:0;
	text-decoration: none;
	line-height: normal;
	color:var(--text-color);
	letter-spacing: 0.7px;
	/* border: 0.5px solid red; */
}

html, body{
	height: 100%;
}

.portfolio_image, .portfolio_information, .grid_segments, .featured, .more_projects, .about, .intro, .about_image{
	visibility: hidden;
}

/* .test{
	width: 50%;
	height: 500px;
	background-color: blue;
} */

img{
	display:block;
	max-width:100%;
}

/* GLOBAL */
	.container{
		overflow:hidden;
		max-width:60em;
		margin:0 auto;
		padding:0 1em;
		min-height: 70%;
		height: 100%;
	}

	h2{
		font-size: 1.5em;
		text-align:center;
		margin-top:1em;
		margin-bottom:0.2em;
		font-weight: 500;
	}

	h3{
		font-weight: 500;
	}

	body{
		background: var(--background-color);
		font-family: 'Whovetica', sans-serif;
		font-size: 18px;
		font-weight: 200;
	}

	a{
    	color: var(--accent-color);
    	transition: 0.3s ease-in-out;
    }

	a:hover{
    	color: var(--accent-color);
    	transition: 0.3s ease-in-out;
    }

	a:active{
    	color: black;
    }

/* HEADER */
	#navbar{
		/* overflow: hidden; */
		position: fixed;
		top: 0;
		width: 100%;
		transition: 0.4s;
		z-index: 99;
		padding: 5em 0em 2em 0em;
	}

	header{
		background: #ffffff;
		color:#000000;

	}

	#logo{
		float: left;
		font-family: 'Comfortaa', sans-serif;
		letter-spacing: -0;
	}

	#logo a{
		text-decoration:none;
		font-weight: 900;
		text-transform: lowercase;
		font-size: 2.2em;
		color:black;
	}
	#logo a:hover{
		color: var(--accent-color);
	}

	#logo p{
		letter-spacing: 0.12em;
		font-size: 0.87em;
		padding-left: 0.1em;
	}

/*	header .container{
		padding-top:5em;
		padding-bottom: 2em;
	}	*/
	nav{
		float:right;
		margin-top: 1em;
	}
	nav a{
		color: var(--text-color);
		text-transform: lowercase;
	}

	nav ul{
		margin:0;
		padding:0;
	}

	nav li{
		float:left;
		display: inline;
		padding: 0 1em 0 1em;
	}

	label{
		font-size: 1.5em;
		line-height: 2em;
		display:none;
	}

	.bar1, .bar2, .bar3 {
		width: 1em;
		height: 0.1em;
		background-color: black;
		margin: 0.2em 0;
		transition: 0.4s;
	}

	.change .bar1 {
		-webkit-transform: rotate(-45deg) translate(-0.21em, 0.21em) ;
		transform: rotate(-45deg) translate(-0.21em, 0.21em) ;
	}

	.change .bar2 {
		opacity: 0;
	}

	.change .bar3 {
		-webkit-transform: rotate(45deg) translate(-0.21em, -0.21em) ;
		transform: rotate(45deg) translate(-0.21em, -0.21em) ;
	}

	.closebtn{
		font-size: 2em;
	}

	#toggle, .closebtn {
		display: none;
	}

/* HOME */

/* INTRO */
	.intro{
		text-align: center;
	}

	h1{ 
		margin:0;
		margin-top: 1em;
		color: black;
		font-weight: 500;
		font-size: 1.9em;
		text-align: center;
	}

	.home h1, .intro h1, .blog_post h2{
		margin-top:2em;
		clear: both;
		font-size: 1.3em;
		font-weight:300;
		color: var(--text-color);
	}

	.intro h2{
		color:var(--accent-color);
		clear: both;
		font-size: 1em;
		margin-top: 2em;
		margin-bottom: 1em;
		font-weight:300;
	}

/* PORTFOLIO GRID */
	.portfolio_grid{
	  width: 100%;
	  margin: 4em auto 6em auto;
	  display: grid;
	  grid-gap: 2em;
	  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
	}

	.grid_segments{
		height: auto;
		width: 100%;
		object-fit: cover;
		position: relative;
	}

	.grid_image {
	  display: block;
	  width: 100%;
	  height: auto;
	  border-radius: 0.5em;
	}

	.grid_overlay {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 100%;
	  width: 100%;
	  opacity: 0;
	  transition: .5s ease;
	  background-color: #f5f5f5;
	  border-radius: 0.5em;
	}

	.grid_segments:hover .grid_overlay {
	  opacity: 0.95;
	}

	.grid_text {
	  color: var(--text-color);
	  position: relative;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	  padding:1em;
	}

/* PRESS */
	.press-grid{
	  width: 100%;
	  margin: 2em auto 0 auto;
	  display: grid;
	  grid-gap: 2em;
	  grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
	}

	.press-grid .grid_overlay {
		opacity:0.95;
	}

	.press-grid .grid_segments:hover .grid_overlay {
	  opacity: 0;
	}

/* ABOUT */
	.about_image{
		  display: block;
		  width: 14em;
		  height: auto;
		  margin-right: auto;
		  margin-left: auto;
		  margin-top: 1em;
		  border-radius: 50%;
	}

	.logos_grid{
		text-align:center;
		margin: 1em 0;
	}

	.skills_icon{
		display: inline-block;
		margin: 2em;
		height: 5em;
	}

	.about, .about_logos{
		padding: 4em 0 4em 0;
		border-bottom: 1px solid var(--text-color);
	}

	.about h2{
		padding: 0em 0 2em 0;
	}

	.timeline{
		text-align: center;
	}

	.timeline h2{
		padding: 0 0 1em 0;
	}

	.timeline h3{
		padding: 3em 0 1em 0;
	}

	.timeline p{
		padding: 0 0 1em 0;
	}

	.recognition{
		text-align: center;
	}

	.recognition h2{
		padding: 0 0 0 0;
	}

	.recognition h3{
		padding: 2em 0 1em 0;
		text-transform:uppercase;
	}

	.recognition p{
		padding: 0 0 1em 0;
	}

/* PROJECTS */

.portfolio_image{
	  display: block;
	  width: 100%;
	  height: 100%;
	  margin: 4em 0 2em 0;
	}

.portfolio_image h2{
	  font-size: 1.5em;
	}



.project_recognition{
	padding-top: 3em;
}

.project_recognition li{
	text-decoration: none;
	text-align: center;
	margin-left: 1em;
	list-style: none;
	padding-bottom: 0.5em;
	}

.caption{
	margin-top: 1em;
	text-align: center;
}

.preregister{
		text-align: center;
		font-size: 0.7em;
	}

.purchase{
	text-align: center;
}

.portfolio_information{
	margin-top: 2em;
	}

.portfolio_information p{
	margin-top: 2em;
	}

.portfolio_information li{
	text-decoration: none;
	margin-left: 1em;
	list-style: upper-roman;
	padding-bottom: 1em;
	}

.contact p{
	text-align: center;

	}

.project_grid{
	  width: 100%;
	  margin-top:2em;
	  display: grid;
	  grid-gap: 2em;
	  grid-template-columns: repeat(auto-fit, minmax(19em, 1fr));
	}

.project_image{
		height: auto;
		width: 100%;
		object-fit: cover;
		position: relative;
	}

.featured{
	margin-top: 2em;
	text-align:center;
	}

.featured h3{
	margin: 1em 0;
	text-align:center;
	}

.featured-images{
	text-align:center;
	margin: 1em 0;
	}

.featured-segments{
	display: inline-block;
    margin: 1em;
    height: 7em;
    border-radius: 0.5em;
	}

.more_projects{
	padding-top: 2em;
	margin-top: 4em;
	border-top: 1px solid var(--text-color);
	}

.more_projects h3{
	text-align: center;
	width: 100%;
	padding-top: 3em;
	font-size: 1em;
	}

.previous_project, .next_project{
	float: left;
	width: 7em;
	text-align: left;
	filter: grayscale(100%);
	transition: 0.3s ease-in-out;
	}

.previous_project:hover, .next_project:hover{
	filter: grayscale(0);
	transition: 0.3s ease-in-out;
	}

.next_project{
	float: right;
	text-align: right;
	}

.more_projects-image{
	width: 100%;
	border-radius: 0.5em;
	}

.more_projects-caption{
	font-size: 0.9em;
	margin-top: 1em;
	color: var(--accent-color);
	}

/*CAROUSEL*/
.swiper-container .swiper-pagination {
	position: relative;
    bottom: 4.5em !important;
}

.swiper-container {
	overflow: hidden;
}

.swiper-container .swiper-slide .caption {
    background-color: var(--background-color);
    box-sizing: border-box;
    justify-content: center;
}

.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev {
    color: var(--accent-color);
    transform: translateY(-50%); 
	opacity: 0.7;
}

.swiper-container .swiper-pagination-bullet {
    background-color: #ccc;
    opacity: 0.7;
	border: white 0.5px solid;
}

.swiper-container .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
    opacity: 0.7;
}

/* #threeContainer{
	height: 80vh;
	width: 80vh;
    margin: auto;
} */

/* BLOG */
ul.blog-index-list {
	list-style-type: none; /* This removes the bullet points */
	padding-left: 0;      /* Removes the default indentation browsers add */
	margin-left: 0;       /* Optional: Removes default margin if needed */
  }
  
  /* Optional: Add some spacing between the list items */
  ul.blog-index-list li {
	margin-top: 4em;
	border-bottom: 1px solid #cccccc; /* Style: 1px thick, solid line, light gray color */
  	padding-bottom: 4em;
  }

  ul.blog-index-list li:last-child {
	border-bottom: none;
	margin-bottom: 4em; /* Remove extra space below the last item */
	padding-bottom: 0; /* Remove extra space below the last item if needed */
  }
  
  /* Style the title links */
  ul.blog-index-list li h2, ul.blog-index-list li h2 a{
	text-decoration: none;
	color: var(--text-color); /* Example color */
	text-align: center;
  }
  ul.blog-index-list li h2 a:hover {
	color: var(--accent-color); /* Example hover color */
  }
  
  /* Style the date */
  ul.blog-index-list li p.post-date {
	text-align: center;
	color: var(--text-color);
	font-size: 0.9em;
	margin-top: 0.2em;
  }

  .blog_post p {
	margin-bottom: 1.5em;
  }
  
  .blog_post p:last-of-type {
	 margin-bottom: 0;
  }

  .blog_post h2 {
	text-align: left;
	color: black;
 }

  .blog_post h1 {
	margin-bottom: 1em;
 }

 .next-post-section {
    text-align: center;
}

/* --- SHARE SECTION --- */
.share-section {
    margin-top: 4rem;
    text-align: center;
    border-top: 1px solid #ccc;
    padding-top: 2rem;
}

.share-section h3 {
    font-size: 1em;
    margin-bottom: 1.5em;
    font-weight: 500;
}

.share-icons {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn svg {
    width: 100%;
    height: 100%;
    fill: #808080; /* Your --text-color */
    transition: fill 0.3s ease;
}

.share-btn:hover svg {
    fill: #D2691E; /* Your --accent-color */
}

/* Hide Web Share API button by default, JS will reveal it if supported */
#web-share-btn {
    display: none;
}

/* Toast notification for clipboard copy */
#copy-toast {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    font-size: 0.9em;
}

#copy-toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}


/* FOOTER */
	footer{
		color:#000000;
		margin-top:3em;
		padding:1em;
		font-size: 0.5em;
		text-align: center;
		padding-left: 0em;
		border-top: 2px white solid
	}

	.subscribe{
		padding-top: 2em;
		padding-bottom: 2em;
	}

	.subscribe h3{
		font-size: 1.5em;
		font-weight: normal;
		padding-bottom: 0.5em;
		color: var(--text-color);
	}

	input[type=button], input[type=submit], input[type=reset] {
		background-color: var(--accent-color);
		border: none;
		border-radius: 0.5em;
		color: white;
		text-decoration: none;
		margin: 0em 1em;
		cursor: pointer;
		height: 2.5em;
		padding: 0em 1em;
		font-size: 1.2em;
		font-family: 'Quicksand', sans-serif;
	}

	input[type=email], select{
		font-size: 1.2em;
		height: 2.5em;
		padding: 0em 1em;
		border-radius: 0.5em;
		border: none;
		font-family: 'Quicksand', sans-serif;
	}

	.social_icon_array{
		display: flex;
		justify-content: center;
  		align-items: flex-end;
		margin-bottom: 2em;
	}

	/* .social_icon_container{
		width: 2em;
		height: 2em;
		margin: 0 1em 0 1em;
		border-radius: 50%;
		background-color: #cfcfcf;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		padding: 1em;
	} */

	.social_icon{
		height: 2em;
		filter: brightness(0.5);
		/* border: 0.5px solid red; */
		padding: 1em;
	}

/* 404 PAGE */
	.error_page{
	padding: 5em 0em;
	text-align: center;
	height: 60%;
	}

/* jQuery */
/*	.container{
		opacity: 0;
	}

	.portfolio_image{
		opacity: 0;
	}

	.hero{
		opacity: 1;
	}

	/*#navbar{
		position: fixed;
		top: 0;
		width: 100%;
		transition: top 0.3s;
		z-index: 1;
	} */

	.headerspacer{
		margin-top: 12em;
		display: block;
	}

/* MEDIA QUERIES */

/* TABLET RESPONSIVE WIDTH (??px) */
@media(max-width: 700px){
	html, body{
		height: 90%;
	}

	.previous_project, .next_project{
		filter: grayscale(0);
	}

	.more_projects-caption{
	color: var(--accent-color);
	}

	header #logo,
	header nav,
	header nav li{
		float:none;
		text-align: center;
		width: 100%;
	}

	.headerspacer{
		margin-top: 14em;
		display: block;
	}

	.portfolio_grid{
		grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
	}

	.project_grid{
		grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
	}

	.grid_overlay {
		position: relative;
		height: 4em;
		opacity: 1;
		background-color: rgba(255, 255, 255, 0);
		border-radius: 0;
		top: 1%;
	}

	.grid_segments:hover .grid_overlay {
		opacity: 1;
	}

	.press-grid .grid_segments:hover .grid_overlay {
	  opacity: 1;
	}

	.portfolio_grid, .press-grid{
		grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
	}


	.grid_text {
	  color: var(--text-color);
	  position: relative;
	  top: 2.5em;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  -ms-transform: translate(-50%, -50%);
	  text-align: center;
	  padding:1em;
	  font-size: 0.9em;
	}

	.skills_icon{
		display: inline-block;
		margin: 2em;
		height: 4em;
	}


/* PHONE RESPONSIVE WIDTH (360px) */
@media(max-width: 500px){
	html, body{
 		height: 70%;
 	}

 	strong {
		font-weight: 700;
	}

	h2, h3 {
		font-weight: 700;
	}

	body{
		font-weight: 300;
	}

	label{
		float: right;
		display:block;
		cursor: pointer;
		line-height: 0.7em;
		z-index: 100;
	}

	.grid_text h3, .grid_text p{
		font-size: 1.3em;
	}

	.portfolio_image, .portfolio_information, .about p, .contact p{
		font-size: 1.1em;
	}

	.project_recognition li{
		padding: 1em 0;
	}

	.headerspacer{
		margin-top: 12em;
		display: block;
	}

	header #logo{
		float:left;
		display: inline;
		text-align: left;
		width: auto;
	}

	header ul{
		height: 0%;
		width: 100%;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #ffffff;
		opacity: 1;
		overflow-y: hidden;
		transition: 0.5s;
	}

	#toggle:checked + ul {
		float: left;
		display: block;
		height: 100%;
	}

	.closebtn{
		display: block;
		text-align: center;
		width: 80%;
	}

	header nav li{
		position: relative;
		top: 5%;
		width: 80%;
		margin: auto;
		text-align: center;
		display: block;
		margin-top: 1em;
		padding-top:1em;
		padding-bottom: 1em;
		font-size: 1.2em;
	}

	a:hover, a:active{
    	color: var(--accent-color);
    	transition: 0s;
    }

	.portfolio_grid, .press-grid{
		grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
	}


	.grid_text{
		font-size: 0.7em;
	}

	.project_grid{
		grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr));
	}

	.skills_icon{
		display: inline-block;
		margin: 1em;
		height: 4em;
	}


}
}