@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');

html,body {
	font-family: 'Noto Serif', serif;
	margin:0px;
	--theme-color: #ec450f;
	--flamingo-color: #eca7b2;
	--flamingo-text-color: #3a1920;
	--luci-color: #cd97ff;
	--bouncer-color: #fff184;
}

*::selection {
	background-color:var(--theme-color);
	color:#FFF;
}

project *::selection {
	background-color:#FFF;
	color:#000;
}

img {
	outline: none;
	border-style: none;
	border:0px;
}

#wrapper {
	width:700px;
	margin-left: auto;
	margin-right:auto;
	padding-bottom:200px;
}

.header {
	margin-top:100px;
}

.title {
	font-size:60px;
	font-weight:800;
	margin-bottom: 0px;
}

.subtitle {
	font-weight:500;
	margin-top:5px;
	font-size:25px;
}

.description {
	font-weight:500;
	margin-top:30px;
	font-size: 17px;
	line-height:2em;
}

a {
	text-decoration: none;
	color:var(--theme-color);
}

a:hover {
	background: var(--theme-color);
	color: white;
}


project {
	transition:0.24s;
	overflow:hidden;
	position:relative;
	display:block;
	border-radius:16px;
	margin-top:40px;
}

project slider {
	border-radius:8px;
	position:absolute;
	top:35px;
	box-shadow:0 0 40px rgba(0,0,0,0.2);
}

project slider * {
	border-radius:8px;
}

project slider {
	right:35px;
}

project slider {
	width:270px;
	height:100%;
	overflow:hidden;
}

project h1 {
	margin-top:45px;
	font-size:40px;
	margin-bottom:0px;
}

project h2 {
	margin-top: 10px;
	font-size:17px;
	font-weight:800;
}

project p {
	margin-top:25px;
	opacity:0.8;
	font-weight: 500;
	padding-bottom:25px;
	margin-right:20px;
	font-size:15px;
	line-height:1.95em;
}

project .project_info {
	width:310px;
}

project .project_info {
	float:left;
	width:290px;
	margin-left:45px;
}

.footer {
		width:100%;
		text-align:center;
		margin-top:100px;
		font-weight:bold;
}

slider {
	display: block;
	overflow: hidden;
}

slider shot {
	transition:0.5s;
	position:absolute;
	width:100%;
}


@media only screen and (max-width: 700px) {
	#wrapper {
		width: 80%;
		margin-left:10%;
	}

	.header {
		margin-top:75px;
	}

	project slider {
		top:35px !important;
		position:relative !important;
		width:80% !important;
		left:10% !important;
		max-height:200px;
		object-fit: cover;
		overflow:hidden;
		object-position: 50% 0%;
	}

	project slider * {
		object-fit: cover;
		object-position: 50% 0%;
		min-height:200px;
	}

	project.project_top {
		min-height: 0px;
	}

	project slider {
		width:100%;
		height:200px;
		overflow:hidden;
	}

	project slider shot {
		width:100%;
		height:200px;
	}

	project .project_info {
		width:90% !important;
		margin-left:5% !important;
		text-align:center;
		float:none !important;
	}

	project h1 {
		margin-top:60px;
		font-size:6.5vw;
	}

	project h2 {
		padding-bottom:20px;
		font-size:3.5vw;
		line-height:2em;
	}

	project p {
		display:none;
	}

	.title {
		font-size:10vw;
	}

	.subtitle {
		font-size:4vw;
	}

	.description {
		font-size:3.5vw;
	}
}