*{
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

/*Font styles*/
	/*Title font*/
	h1 {
		font-family: garamond-premier-pro,serif;
		font-weight: 700;
		font-style: normal;
	}
	/*Heading font*/
	h2 {
		font-family: futura-pt,sans-serif;
		font-weight: 500;
		font-style: normal;
	}
	/*Body font*/
	p {
		font-family: futura-pt,sans-serif;
		font-weight: 200;
		font-style: normal;
		color: grey;
	}
	/*Code font*/
	code {
		font-family: Consolas,"courier new";
  		color: black;
 		/*background-color: cyan;*/
 		font-weight: 600;
  		display: inline;
  		font-style: italic;
	}

	a {
		transition: color 0.3s;
		transition: opacity 0.3s;
	}

	.nothing {
		height: 100%;
		width: 100%;
	}

/*Sidebar, open and close button*/
	.sideBar {
		height: 100%;
		width: 0px;
		position: fixed;
		z-index: 3;
	 	top: 0;
		right: 0;
		background-color: white;
/*		background: rgba( 255, 255, 255, 0.70 );
*/		opacity: 92.5%;
		overflow-x: hidden; 
		overflow-y: none;
		/*padding-top: 60px; */
		transition: 0.5s;
		box-shadow: 0 8px 32px 0 rgba( 0, 0, 0, 0.37 );
/*		backdrop-filter: blur( 10.0px );
*//*		-webkit-backdrop-filter: blur( 10.0px );
*/		border-radius: 10px;
		border: 1px solid rgba( 255, 255, 255, 0.18 );
	}

/*Sidebar content*/
	.sideBarSubHeader {
		/*padding-right: 35vw;*/
		padding-bottom: 0;
		padding-top: 0;
		margin: 0;
		text-decoration: none;
		text-align: center;
		color: #818181;
		display: block;
		transition: 0.3s;
		line-height: 40%;
	}
	.sideBarMenu a {
		/*padding: 8px 10vw 8px 1vh;*/
		text-decoration: none;
		display: block;
		color: black;
		text-align: center;
		line-height: 50%;
		transition: 0.3s;
		vertical-align: middle;
	}
	.sideBarMenu a:hover {
		color: #818181;
	}

/*Sidebar footer and links*/
	.sideBarFooter {
		/*min-height: 75px;*/
		display: inline;
		margin-bottom: 10px;
		/*position: fixed;*/
	}
	.sideBarFooter a{
		text-decoration: none;
		display: inline;
		overflow-x: none;
		align-items: center;
		color: black;

	}
	.sideBarFooter a:hover {
		color: #818181;
	} 
/*Sidebar open and close buttons*/
	.sideBar .closeButton {
		/*position: fixed;*/
		line-height: 10%;
		top: -7px;
		margin-right: 70vw;
		/*margin-left: 50px;*/
	}
	.openButton {
		position: absolute;
		top: auto;
		right: 5vw;
		margin-left: 50px;
		color: black;
		style: h3;
		align-items: center;
	}
	.openButton:hover {
	/*	background-color: white;*/
		color: gray; 
	}

/*Sidebar blur feature*/
	#blur {
	 	transition: filter 1s;
	 	height: 100%;
	 	position: relative;
	 }
	 #headerBlur {
	 	width: 100%;
	 	filter: blur(50px);
	 	z-index: 0;
	 	left: 0px;
	 }

/*Header style*/
	header {
	border-bottom: 1px solid #ccc;
	}
	.header {
		background-color: white;
		opacity: 97.5%;
		/*display: inline-block;*/
		display: flex;
		justify-content: center;
		align-items: center;
		style: h1;
		width: 100%;
		left: 0px;
		z-index: 1;
	}
	.header a{
		text-decoration: none;
		color: black;
		style: h1;
	}
	.header a:hover {
		color: gray;
	}
	.scroll-line {
     height: 2px;
     margin-bottom: -2px;
     background: #000;
     width: 0%;
	}
/* The progress container (grey background) */
	.progress-container {
  		width: 50%;
 		height: 8px;
  		background: #ccc;
	}	

/* The progress bar (scroll indicator) */
	.progress-bar {
  		height: 8px;
  		background: #04AA6D;
  		width: 0%;
	}




	#countDown{
		margin: 0;
		padding: 0;
	}
	.smallScreenOnly a{
		color: black;
		text-decoration: none;
	}
	.smallScreenOnly a:hover{
		color: grey;
	}
	.largeScreenOnly a{
		color: black;
		text-decoration: none;
	}
	.largeScreenOnly a:hover{
		color: grey;
	}
	#noSpace a{
		text-decoration: none;
		color: black;
	}
	#noSpace a:hover{
		color: grey;
	}

/*Body style*/
	body {
		margin: 0px;
	}

/*Footer syle*/
	.footer {
		background-color: white;
		/*min-height: 75px;*/
		/*display: inline-block;*/
		display: flex;
		justify-content: center;
		align-items: space-between;
		style: h1;
		width: 100%;
		z-index: 1;
		margin-bottom: 10px;
		vertical-align: middle;
		/*position: fixed;*/

	}
	.footer a{
		text-decoration: none;
		color: black;
	}
	.footer a:hover {
		color: grey
	} 

/*Heading style*/
	.heading {
		style: h2;
		padding-left: 0px;
	}
	.heading a{
		text-decoration: none;
		color: black;
	}
	.heading a:hover {
		color: gray;
	}
	.projectHeading {
		style: h2;
		padding-left: 0px;
	}
	.projectHeading a{
		text-decoration: none;
		color: black;
	}
	.projectHeading a:hover {
		color: gray;
	}
	#aboutDaniel {
		text-align: center;

	}
	#centerContent {
		text-align: center;
	}

	#xyCenter{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vh;
	}


/*Container style*/
	.container {
		background-color: white;
		min-height: 200px;	
		style: h2;
		padding-left: 0px;
	}
	.container a{
		text-decoration: none;
		color: black;
	}
	.container a:hover {
		color: gray;
	}

/*Project Infomation*/
	.infoLeft{
		margin-left: 3.5vw;
		margin-right: 3.5vw;
	}
	.infoLeft a {
		text-decoration: none;
		color: black;
	}
	.infoLeft a:hover {
		color: grey;
	}
	.infoRight{
		margin-left: 3.5vw;
		margin-right: 3.5vw;
	}
	.infoRight a {
		text-decoration: none;
		color: black;
	}
	.infoRight a:hover {
		color: grey;
	}
	.infoCenter{
		margin-left: 3.5vw;
		margin-right: 3.5vw;
	}
	.infoCenter a {
		text-decoration: none;
		color: black;
	}
	.infoCenter a:hover {
		color: grey;
	}
	#portrait {
		transition: 0.4s;
		align-content: center;
		align-self: center

	}

/*Project style*/
	.projects {
		background-color: white;
		min-height: 300px;
	}

	/*Project colour box*/
		#project1Box{
			/*background-color: #88CDFF; */
			background-color: #96CBF9;
		}
		#project2Box{
			background-color: #F4CBC6;
		}
		#project3Box{
			background-color: #151F3C;
		}
		#project4Box{
			background-color: #F3E9DD;
		}
		#project5Box{
			background-color: #ffbdbd;
		}
		#project6Box{
			background-color: #e1f7d5;
		}
		#project7Box{
			background-color: #3E3E59;
		}
		#project8Box{
			background-color: #F8C471;
		}
		#project9Box{
			background-color: #e1f7d5;
		}
		#project10Box{
			background-color: #E2E9FF;
		}
		#project11Box{
			background-color: #ffbdbd;
		}
		#project12Box{
			background-color: #e1f7d5;
		}
		#project13Box{
			background-color: #121212;
		}
		#project14Box{
			background-color: #6C90CA;
		}
		#project15Box{
			background-color: #009C9C;
		}
		#project16Box{
			background-color: #F8F3E0;
		}
		#project17Box{
			background-color: #6C90CA;
		}
		#project18Box{
			background: radial-gradient(50% 50% at 0% 50%, rgba(117, 207, 215, 0.48) 0%, rgba(117, 207, 215, 0.1536) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, radial-gradient(50% 50% at 100% 50%, rgba(56, 184, 92, 0.48) 0%, rgba(56, 184, 92, 0.1536) 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, rgba(255, 255, 255, 0.64);
		}
	/*Project hero*/
		.project {
			opacity: 1;
			position: relative;
			text-align: center;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			height: auto;
			width: 40vw;
			transition: 0.5s;
		}
		.project:hover {
			opacity: 0.75;
			transition: opacity 0.5s;
			text-shadow: 2px 2px 10px black;
		}
		.projectName a{
			opacity: 0;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -40%);
			line-height: 0;
			vertical-align: middle;
			text-decoration: none;
			color: white;
			overflow-x: visible;
			text-shadow: 2px 2px 10px black;
		}
		.project:hover > .projectName a{
			opacity: 125%;
			transition: opacity 0.5s;
			text-decoration: none;
			color: white;
		}


		.responsive-iframe {
  			width: 100%;
  			height: 450px; /* Adjust the height as needed */
  			border: none; /* Remove the border if not necessary */
		}

/*Style on larger devices (min-1000px)*/
	@media only screen 
	and (min-width: 1000px)
	{
		#heightBreak {
			height: 30vh;
		}
		.smallScreenOnly {
			visibility: hidden;	
		}
	/*Header area*/
		.openButton{
			font-size: 40px;
			cursor: pointer;
		}
		.closeButton{
			font-size: 60px;
		}
		/*.sidebar{
			max-width: 100px;
		}
		.sideNav{
			max-width: 100px;
		}*/

		.sideBarFooter a{
			width: 80vw;
			float: center;
			margin-left: 15vw;
			margin-right: 1vw;
			padding-bottom: 60px;
			/*margin-right: 5vw;*/
		}

		.header{
			position: fixed;
			max-height: 70px;
			top: -2px;
		}
		#headerBlur{
			position: fixed;
			max-height: 70px;
			top: -2px;
		}


	/*Footer area*/
		.footer {
			max-height: 75px;
		}
		.footer a{
			margin-bottom: 5vw;
			line-height: 150%;
		}

	/*Heading area*/
		.heading {
			width: 96vw;
			float: top;
			padding-bottom: 0px;
			padding-top: 55px;
			padding-left: 2vw;
		}
		.projectHeading {
			width: 96vw;
			float: top;
			padding-bottom: 0px;
			padding-top: 55px;
			padding-left: 2vw;
		}
		#centerContent {
			width: 100%;
			float: top;
			padding-bottom: 5px;
			padding-top: 5px;
			
			text-align: center;
		}
		#aboutDaniel {
			text-align: center;
		}

	/*Container area*/
		.container {
			width: 96vw;
			float: top;
			padding-bottom: 85px;
			padding-top: 85px;
			padding-left: 2vw;
		}
	/*Projects and infomation*/
		.infoRight {
			width: 39%;
			float: right;
			/*min-height: 400px;*/
			margin-bottom: 2vw;
			margin-left: 1vw;
			margin-right: 2vw;
			vertical-align: middle;
			/*padding: 25vw 0;*/
		}
		.infoLeft {
			width: 32%;
			float: right;
			/*min-height: 400px;*/
			margin-bottom: 2vw;
			margin-left: 2vw;
			margin-right: 1vw;
			vertical-align: middle;
			/*padding: 25vw 0;*/
		}
		.infoCenter{
			margin-left: 25vw;
			margin-right: 25vw;
			/*padding: 25vw 0;*/
		}
		#projectLeft {
			width: 55%;
			max-width: 1500px;
			height: auto;
			float: left;
			margin-bottom: 2vw;
			margin-left: 2vw;
			margin-right: 1vw;
		}
		#projectLeft50 {
			width: 39%;
			max-width: 1500px;
			height: auto;
			float: left;
			margin-bottom: 2vw;
			margin-left: 2vw;
			margin-right: 1vw;
		}
		#projectRight {
			width: 39%;
			max-width: 1500px;
			height: auto;
			float: right;
			margin-bottom: 2vw;
			margin-left: 1vw;
			margin-right: 2vw;
		}
		#projectRight50 {
			width: 39%;
			max-width: 1500px;
			height: auto;
			float: right;
			margin-bottom: 2vw;
			margin-left: 1vw;
			margin-right: 2vw;
		}
		#projectCenter {
			float: right;
			max-width: 100%;
			height: auto;
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectCenterSmall {
			float: right;
			width: 100%;
			margin-left: 35vw;
			margin-right: 35vw;
		}

	/*Project's area*/
		#projectNoColor{
			max-width: 50vw;
			
		}
		.project {
			width: 75%;
		}
		.image {
			width: 200px;
		}
		.imageLarge {
			width: 300px;
		}
		.projectName a{
			width: 50vw;
		}
		.projects {
			width: 100vw;
			float: left;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-content: space-between;
		/*	align-content: stretch;*/
			padding-bottom: 50px;
		}
	/*Project left*/
		.projectBox1 {
			width: 47vw;
			float: right;
			min-height: 400px;
			margin-bottom: 2vw;
			margin-left: 2vw;
			margin-right: 1vw;
		}
	/*Project right*/
		.projectBox2 {
			width: 47vw;
			float: right;
			min-height: 400px;
			margin-bottom: 2vw;
			margin-left: 1vw;
			margin-right: 2vw;
		}
	/*Project middle*/
		.projectBox3 {
			width: 96vw;
			float: right;
			min-height: 400px;
			margin-bottom: 2vw;
			margin-left: 2vw;
			margin-right: 2vw;
		}
		.projectNoColor {
			width: 96vw;
			float: left;
			min-height: 600px;
			margin-bottom: 2vw;
			margin-left: 2vw;
			margin-right: 2vw;
		}
		#projectNoColor {
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		

	/*Variable font style*/
		h1 {
			font-size: 30px;
		}
		h2 {
			font-size: 40px;
		}
		p {
			font-size: 15px; 
			line-height: 150%;
		}
		code {
			font-size: 35px;
			line-height: 0%;
		}
	}
/*Style on smaller devices (max-1000px)*/
	@media only screen 
    and (max-width: 1000px)
	{
		#heightBreak {
		height: 5vh;
		}
		
		.smallScreenOnly {
			visibility: hidden;	
		}
	/*Header area*/
		.openButton{
			font-size: 7vw;
			cursor: pointer;
		}
		.closeButton{
			font-size: 10vw;
		}
	/*	.Sidebar{
			width: 80vw;
		}*/

		.sideBarFooter a{
			width: 80vw;
			margin-left: 10vw;
			margin-right: 1vw;
			padding-bottom: 15vw;
			/*margin-right: 5vw;*/
		}
		.header {
			position: fixed;
			height: 15vw;
			/*max-height: 75px;*/
			top: -1vw;
		}
		#headerBlur {
			position: fixed;
			height: 15vw;
			/*max-height: 75px;*/
			top: -1vw;
		}

	/*Footer area*/
		.footer {
			height: 15vw;
		}

	/*Heading area*/
		.heading {
			width: 93vw;
			margin-right: 3.5vw;
			margin-left: 3.5vw;
			padding-top: 12vh;
			padding-bottom: -1vh;
		}
		.projectHeading {
			width: 93vw;
			margin-right: 3.5vw;
			margin-left: 3.5vw;
			/*padding-top: 5vh;*/
			padding-bottom: -1vh;
		}
		#centerContent {
			text-align: center;
		}
		#aboutDaniel {
			padding-top: 5vh;
			padding-bottom: 5vh;
			text-align: center;
		}

	/*Container area*/
		.container {
			width: 93vw;
			margin-right: 3.5vw;
			margin-left: 3.5vw;
			padding-top: 3.5vw;
			padding-bottom: 3.5vw;
		}

	/*Projects and infomation*/
		.infoLeft {
			width: 93vw;
			display: flex;
			flex-direction: column;
		}
		.infoRight {
			width: 93vw;
			display: flex;
			flex-direction: column;
		}
		.infoCenter {
			width: 93vw;
			display: flex;
			flex-direction: column;
		}
		#projectLeft{
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectLeft50{
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectRight{
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectRight50{
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectCenter{
			margin-left: 3.5vw;
			margin-bottom: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectCenterSmall{
			margin-left: 3.5vw;
			margin-right: 3.5vw;
			margin-bottom: 3.5vw;
		}

	/*Project's area*/
		.project {
			width: 75vw;
		}
		.image {
			width: 55vw;
		}
		.imageLarge {
			width: 65vw;
		}
		.projectName a{
			width: 75vw;
		}
		.projects {
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		.projectName a{

		}
		.projectBox1 {
			width: 93vw;
			height: 120vw;
			margin-bottom: 3.5vw;
			margin-left: auto;
			margin-right: auto;
		}
		.projectBox2 {
			width: 93vw;
			height: 120vw;
			margin-bottom: 3.5vw;
			margin-left: auto;
			margin-right: auto;
		}
		.projectBox3 {
			width: 93vw;
			height: 120vw;
			margin-bottom: 3.5vw;
			margin-left: auto;
			margin-right: auto;
		}
		.projectNoColor {
			width: 93%;
			height: 93%;
			padding-bottom: -1vh;
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}
		#projectNoColor {
			margin-left: 3.5vw;
			margin-right: 3.5vw;
		}

		
	/*Variable font style*/
		h1 {
			font-size: 7vw;
		}
		h2 {
			font-size: 8vw;
			line-height: 15vw;
		}
		p {
			font-size: 5vw;
			line-height: 200%
		}
		code {
			font-size: 8vw;
			line-height: 0;
		}
	}