body {
	font-family: href="https://fonts.googleapis.com/css?family=Inconsolata";
}

@font-face {
font-family: inconsolata;
src: url(inconsolata.woff2) format(woff2);
}

body {
	font-style: normal; font-variant: normal;
	font-family: inconsolata;
	text-align: center;
	background-color: #3c3c3c;
	color: #cccccc;
	line-height: 1.5;
}

* {
	margin: 0;
	padding: 0px;
  }

/*Link Color*/
a:link {
	color: #eeeeee;
	background-color: transparent;
	text-decoration: underline;
	text-decoration-color: grey;
	text-underline-position: under;
	font-size: auto;
}

a:visited {
	color: #eeeeee;
	background-color: transparent;
	text-decoration-color: grey;
	text-underline-position: under;
	font-size: auto;
}

a:hover {
	color: #ffffff;
	background-color: transparent;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-position: under;
	font-size: auto;
}

a:active {
	color: #dddddd;
	background-color: transparent;
	text-decoration-color: grey;
	text-underline-position: under;
	font-size: auto;
}
	
/*End Link Color*/

div.Max-width {
	max-width: 800px;
	margin: auto;
	width: 95%;
}

h1 { font-size: 28px; font-weight: 620; color: #dddddd;
}
h2 { font-size: 26px; font-weight: 620; color: #dddddd;
}
h3 { font-size: 24px; font-weight: 620; color: #dddddd;
}
h4 { font-size: 22px; font-weight: 620; color: #dddddd;
}
p { font-size: 20px; font-weight: 320;
}
blockquote { font-size: 20px; font-weight: 320;
}
pre { font-size: 20px; font-weight: 320;
}
span { font-size: 20px; font-weight: 320;
}
li { font-size: 20px; font-weight: 320;
}
b { font-size: 20px; font-weight: 620;
}
strong { font-size: 20px; font-weight: 620;
}
ul { font-size: 20px; font-weight: 320;
}
nav { font-size: 20px; font-weight: 320;
}
a { font-size: 20px; font-weight: 320;
}
rt { font-size: 12px; font-weight: 320;
}
q { font-size: 20px; font-weight: 320;
}

/* Dashed border */
hr.new1 {
	margin-top: 20px;	margin-bottom: 20px;
	border: 1px dashed gray;
}

/* Style The Dropdown Button */
.dropbtn {
	background-color: transparent;
	color: #eeeeee;
	padding: 0px;
	font-size: 20px;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: grey;
	text-underline-position: under;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #414141;
	min-width: 160px;
	box-shadow: 0 0px 10px 0 #363636;
	z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
	color: #eeeeee;
	background-color: transparent;
	text-decoration: underline;
	text-decoration-color: grey;
	text-underline-position: under;
	padding: 8px 8px;
	display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	color: #ffffff;
	background-color: transparent;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-position: under;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
	background-color: #414141;
}

/* Add blinkingText */
.blinking {
	animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText {
	0%{	color: #ffffff; }
	49%{ color: #ffffff; }
	60%{ color: transparent; }
	99%{ color: transparent; }
	100%{ color: #ffffff; }
}

/* Add a card effect */
.card {
	background-color: #414141;
	padding: 20px 20px;
	margin-top: 15px;
	margin-bottom: 15px;
	box-shadow: 0 0px 10px 0 #363636;
	transition: 0.3s;
	border-radius: 8px;
	max-width: none;
}
	
/* On mouse-over, add a deeper shadow */
.card:hover {
	box-shadow: 0 0px 10px 0 #222222;
}

/* Badge */
	.bgreen {
		border-color: #00D000; /* Green */
		border-style: solid;
		border-width: 1px;
		color:#ffffff;
		padding: 4px 4px;
		text-align: center;
		border-radius: 50px;
	}
	.bblue {
		border-color: #183EFF; /* Blue */
		border-style: solid;
		border-width: 1px;
		color:#ffffff;
		padding: 4px 4px;
		text-align: center;
		border-radius: 50px;
	}
	.byellow {
		border-color: #FFD000; /* Yellow */
		border-style: solid;
		border-width: 1px;
		color:#ffffff;
		padding: 4px 4px;
		text-align: center;
		border-radius: 50px;
	}
	.bred {
		border-color: #FF0000; /* Red */
		border-style: solid;
		border-width: 1px;
		color:#ffffff;
		padding: 4px 4px;
		text-align: center;
		border-radius: 50px;
	}
	.bwhite {
		border-color: #ffffff; /* White */
		border-style: solid;
		border-width: 1px;
		color: #ffffff;
		padding: 4px 4px;
		text-align: center;
		border-radius: 50px;
	}

/* Notes */
	.ngreen {
		background-color: transparent;
		border-left: 1px solid #00D000;
		border-radius: 50px;
	}
	.nblue {
		background-color: transparent;
		border-left: 1px solid #183EFF;
		border-radius: 50px;
	}
	.nyellow {
		background-color: transparent;
		border-left: 1px solid #FFD000;
		border-radius: 50px;
	}
	.nred {
		background-color: transparent;
		border-left: 1px solid #FF0000;
		border-radius: 50px;
	}

	img {
		pointer-events: all;
		max-width: 100%;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}


	/*--====== Figure ======--*/
	figure {
		border: 1px #363636 solid;
		padding: 0px;
		margin: auto;
	}
	
	figcaption {
		background-color: #414141;
		color: #cccccc;
		font-family : smaller inconsolata; color: #cccccc;
		padding: 10px;
		text-align: left;
		line-height:1.2;
		inset: auto auto 0 0;
	}

	/*--====== Gallery ======--*/

	.asyncGallery {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		z-index: 1000;
		visibility: hidden;
		background-color: #3c3c3c;
		transition: opacity 200ms, visibility 200ms;
	}
	
	.asyncGallery.is-visible {
		opacity: 1;
		visibility: visible;
	}
	/*--====== When Open ======--*/
	.asyncGallery__Item {
		position: absolute;
		top: 50%;
		left: 50%;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transform: translate(-50%, -50%);
		transition: opacity 200ms, visibility 200ms;
	}
	
	.asyncGallery__Item.is-visible {
		opacity: 1;
		visibility: visible;
	}
	
	.asyncGallery__ItemImage img {
		/* max-height: 80vh; */
		max-height: 100vh;
		display: block;
	}
	
	.asyncGallery__ItemDescription {
		color: #cccccc;
		font: small-caption;
	}
	
	.asyncGallery__Loader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: none;
		color: #cccccc;
		z-index: 100;
	}
	
	.asyncGallery__Loader.is-visible {
		display: block;
	}
	
	.asyncGallery button {
		background-color: transparent;
		border: 0;
		outline: 0;
		padding: 0;
		font-size: 0;
		cursor: pointer;
	}
	
	.asyncGallery__Close {
		position: absolute;
		top: 30px;
		right: 30px;
		width: 30px;
		height: 30px;
		z-index: 1000;
		background-repeat: no-repeat;
		background-size: 30px 30px;
		background-image: url("../assets/close.png");
	}
	
	.asyncGallery__Counter {
		position: absolute;
		font-size: 14px;
		font-weight: normal;
		color: #cccccc;
		right: 40px;
		bottom: 40px;
	}
	
	.asyncGallery__Dots {
		position: absolute;
		left: 50%;
		bottom: 30px;
		display: flex;
		margin: 0;
		padding: 0;
		transform: translateX(-50%);
		list-style-type: none;
		z-index: 1000;
	}
	
	.asyncGallery__Dots button {
		padding: 0;
		width: 10px;
		height: 10px;
		background-color: #fff;
		border: 0;
		outline: 0;
		border-radius: 50%;
	}
	
	.asyncGallery__Dots li {
		opacity: 0.2;
		transition: opacity 200ms;
	}
	
	.asyncGallery__Dots li + li {
		margin-left: 10px;
	}
	
	.asyncGallery__Dots li.is-active {
		opacity: 1;
	}
	
	.asyncGallery__Next,
	.asyncGallery__Prev {
		position: absolute;
		top: 50%;
		width: 20px;
		height: 40px;
		z-index: 1000;
		transition: transform 200ms, opacity 200ms;
		transform: translateY(-50%);
	}
	
	.asyncGallery__Next:disabled,
	.asyncGallery__Prev:disabled {
		opacity: 0.2;
		cursor: default;
	}
	
	.asyncGallery__Next:before,
	.asyncGallery__Prev:before {
		position: absolute;
		content: "";
		top: 50%;
		left: 50%;
		background-image: url("../assets/arrow.png");
		width: 20px;
		height: 40px;
		background-repeat: no-repeat;
		background-size: 20px 40px;
	}
	
	.asyncGallery__Next {
		right: 10px;
	}
	
	.asyncGallery__Next:before {
		transform: translate3d(-50%, -50%, 0);
	}
	
	.asyncGallery__Prev {
		left: 10px;
	}
	
	.asyncGallery__Prev:before {
		transform: translate3d(-50%, -50%, 0) scale(-1);
	}
	
	/* Thumbnail Demo */
	* {
		font-family: Inconsolata;
		box-sizing: border-box;
	}
	
	body {
		margin: 0;
	}
	
	.container {
		/*max-width: 100%;*/
		max-width: 1200px;
		/*width: 100%;*/
		margin: 0 auto;
	}
	/* Thumbnail Demo */
	.container img {
		max-width: 100%;
		margin: 0 auto;
		aspect-ratio: 1 / 1;
		object-fit: scale-down;
		font: small-caption;
	}
	/* Thumbnail Demo Important*/
	.gallery {
		display: flex;
		flex-wrap: wrap;
		align-items: top;
	}
	
	.gallery div {
		max-width: calc(33.333% - 5px);
		margin-top: 2.5px;
		margin-right: auto;
		margin-bottom: 2.5px;
		margin-left: auto;
		transition: opacity 200ms;
		cursor: pointer;
		border-color: #363636;
		border-style: solid;
		border-width: 2px;
		padding: 5px;
		border-radius: 8px;
	}
	
	.gallery div:hover {
		box-shadow: 0 0px 10px 0 #222222;
	}
	
	.gallery div img {
		max-width: 100%;
	}

	/*important*/
	@media screen and (max-width: 768px) {
		.asyncGallery__Close {
			top: 15px;
			right: 15px;
			width: 15px;
			height: 15px;
			background-size: 15px;
		}
		
		.asyncGallery__Dots {
			bottom: 30px;
		}
		
		.asyncGallery__Counter {
			right: 40px;
			bottom: 40px;
			font-size: 14px;
		}
		
		.asyncGallery__Item {
			width: 100%;
		}
		
		.asyncGallery__ItemImage img {
			max-height: auto;
			max-width: 100%;
		}
		
		.asyncGallery__ItemDescription {
			padding: 0 0 0;
		}
		
		.asyncGallery__Next,
		.asyncGallery__Prev {
			display: none;
		}
		
		/* Thumbnail Demo */
		.gallery {
			display: block;
		}
		
		.gallery div {
			max-width: 100%;
			margin: 0 0 0;
		}
		
		.gallery div img {
			max-width: 100%;
			min-width: 100%;
		}
		}

		/* Timeline Container */
		.timeline {
			background: var(--primary-color);
			margin: 20px auto;
			padding: 20px;
		}
		
		/* Outer Layer with the timeline border */
		.outer {
			border-left: 2px solid #222222;
		}
		
		/* Timeline Card container */
		.timecard {
			margin: 0 0 20px 20px;
			padding: 10px;
			background: #414141;
			box-shadow: 0 0px 10px 0 #363636;
			transition: 0.3s;
			border-radius: 8px;
			max-width: none;
		}

		/* On mouse-over, add a deeper shadow */
		.timecard:hover {
			box-shadow: 0 0px 10px 0 #222222;
		}
		
		/* Information about the timeline */
		.info {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}
		
		/* Title of the timeline card */
		.titleblue {
			color: #dddddd;
			position: relative;
		}
		
		/* Timeline dot  */
		.titleblue::before {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: #cccccc;
			border-radius: 999px;
			left: -39px;
			border: 3px solid blue;
		}
					
		.titleyellow {
			color: #dddddd;
			position: relative;
		}
		
		/* Timeline dot  */
		.titleyellow::before {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: #cccccc;
			border-radius: 999px;
			left: -39px;
			border: 3px solid yellow;
		}

		.titlegreen {
			color: #dddddd;
			position: relative;
		}
		
		/* Timeline dot  */
		.titlegreen::before {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: #cccccc;
			border-radius: 999px;
			left: -39px;
			border: 3px solid green;
		}

		.titlered {
			color: #dddddd;
			position: relative;
		}
		
		/* Timeline dot  */
		.titlered::before {
			content: "";
			position: absolute;
			width: 10px;
			height: 10px;
			background: #cccccc;
			border-radius: 999px;
			left: -39px;
			border: 3px solid red;
		}

		/* END */