:root {
	--white: #fff;
	--whitergba: 255, 255, 255;
	--black: #000;
	--blackrgba: 0, 0, 0;
	--beautyred: #E31C25;
	--beautyredrgba: 227, 28, 37;
	--beautyblue: #1a95e7;
	--beautybluergba: 26, 149, 231;
	--colorused: #1a95e7;
	--colorusedrgba: 26, 149, 231;
}
body
{
	/*background: url("../images/background/HasglerOdyssey.png");
	background-repeat: no-repeat;
	background-attachment: fixed;*/
}
#home
{
	background: rgba(var(--whitergba), 0.8);
	padding: 1.5rem 0;
}
body>a
{
	position: fixed;
	height: fit-content;
	width: fit-content;
	right: 10%;
	top: 5%;
	z-index: 1;
}
body>a>i{
	font-size: 70px;
	color: var(--black);
	transition: all ease-in-out .5s;
}
@media screen and (max-width: 575.98px) {
	body>a>i{
		font-size: 50px;
		right: 5%;
	}
}
  body>a>i:hover{
	color: var(--colorused);
	cursor: pointer;
  }
body .inter {
position: fixed;
left: 15vw;
top: 25%;
z-index: 2;
transform: rotate(-90deg);
}
@media screen and (max-width: 575.98px) {
	body .inter {
		display: none;
	}
}
@media (min-width: 767px) and (max-width: 991.98px) {
	body .inter {
		left: 4vw;
	}
}
	body .inter h4 {
		color: var(--black);
		font-size: 1.5rem;
		font-weight: 400;
		letter-spacing: .5px;
		text-transform: uppercase;
	}
	@media (min-width: 767px) and (max-width: 991.98px) {
		body .inter h4 {
			font-size: 1.5rem;
		}
	}
/*MINE SECTION*/
#project{
	background: rgba(var(--whitergba), 1);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	max-width: 55vw;
	width: 55vw;
	padding: 3.125rem 0;
	position: relative;
	transition: all ease .5s;
	margin: auto;
  }
	@media screen and (max-width: 575.98px) {
	  #project{
		padding: 1.25rem 0;
		max-width: 90vw;
		width: 90vw;
	  }
	}
	@media (min-width: 767px) and (max-width: 991.98px) {
	  #project{
		padding: 0;
	  }
	}
	#project span
	{
		color: var(--colorused);
	}
	#project .description
	{
		width: 50%;
	}
	@media screen and (max-width: 575.98px) {
		#project .description{
			width: 90%;
		}
	}
	@media (min-width: 767px) and (max-width: 991.98px) {
		#project .description{
			width: 80%;
		}
	}
	#project .description h1
	{
		font-size: 3.5rem;
		font-weight: 600;
		color: var(--black);
		margin-bottom: 2%;
	}
	#project .description table
	{
		width: 60%;
		table-layout: fixed;
	}
	@media screen and (max-width: 575.98px) {
		#project .description table
		{
			width: 100%;
			table-layout: auto;
		}
	}
	@media (min-width: 767px) and (max-width: 991.98px) {
		#project .description table
		{
			width: 100%;
			table-layout: auto;
		}
	}
	#project .description table tbody tr
	{
		line-height: 35px;
		width: 35%;
	}
	#project .description table tbody tr th
	{
		color: var(--black);
	}
	#project .description table tbody tr .value
	{
		color: var(--black);
		max-width: 50%;
		white-space: nowrap;
	}
	@media screen and (max-width: 575.98px) {
		#project .description table tbody tr .value
		{
			white-space: normal;
		}
	}
	@media (min-width: 767px) and (max-width: 991.98px) {
		#project .description table tbody tr .value
		{
			white-space: normal;
		}
	}
	  #project .content {
		display: flex;
		flex-direction: column;
		width: 90%;
		margin: auto;
		margin-top: 5%;
	  }
		#project .content h2 {
		font-size: 2.2rem;
		color: var(--black);
		text-transform: uppercase;
		font-weight: 600;
		letter-spacing: .0625rem;
		}
		@media screen and (max-width: 575.98px) {
			#project .content h2 {
			font-size: 1.5625rem;
			}
		}
		@media (min-width: 576px) and (max-width: 767.98px) {
			#project .content h2 {
			font-size: 1.875rem;
			}
		}
		@media (min-width: 768px) and (max-width: 991.98px) {
			#project .content h2 {
			font-size: 2rem;
			}
		}
		#project .content .content-section
		{
			display: flex;
			flex-direction: column;
			min-height: fit-content;
			width: 90%;
			margin: 1.25rem auto 3rem auto;
		}
			#project .content h2 span {
				color: var(--colorused);
			}
			#project .content .content-section p {
				color: var(--black);
				font-size: 1.05rem;
				line-height: 1.6875rem;
				display: inline-block;
				text-align: justify;
				margin-bottom: 20px;
			}
			#project .content .content-section p:last-child {
				margin-bottom: 0px;
			}
			@media screen and (max-width: 575.98px) {
			  #project .content .content-section p {
				font-size: .875rem;
			  }
			}
			@media (min-width: 576px) and (max-width: 767.98px) {
			  #project .content .content-section p {
			  }
			}
				#project .content .content-section p span {
					font-weight: 600;
				}
			#project .content .content-section a {
				margin-left: 20px;
				padding: 10px;
				color: var(--white);
				font-size: 1rem;
				font-weight: 450;
				text-transform: capitalize;
				transition: all ease-in-out .5s;
				border: 0;
				border-radius: 0;
				background: var(--black);
				width: fit-content;
			}
			#project .content .content-section a:hover {
				background: var(--colorused);
			}
			#project .content .content-section iframe{
				box-shadow: 10px 10px 5px var(--black);
				width: 100%;
				height: 48.5vh;
			}
			@media screen and (max-width: 575.98px) {
				#project .content .content-section iframe {
					height: 19vh;
				}
			}
			@media (min-width: 576px) and (max-width: 767.98px) {
				#project .content .content-section iframe {
					height: 20vh;
				}
			}
			@media (min-width: 768px) and (max-width: 1081px) {
				#project .content .content-section iframe {
					height: 20vh;
				}
			}
			#project .content .content-section video{
				box-shadow: 10px 10px 5px var(--black);
			}