@font-face {
	font-family: "Helvetica";
	font-style: normal;
	font-weight: normal;
	src: url("HelveticaNeueMedium.otf");
}

h2:hover,
h1:hover {
	color: #f5b940;
}

html {
	overflow: hidden;
	height: 100%;
}

body {
	overflow: auto;
	height: 100%;
}

body {
	font-family: Helvetica;
	background: #f5b940;
	background: linear-gradient(
		90deg,
		rgba(245, 185, 64, 1) 0%,
		rgba(154, 201, 227, 1) 11%,
		rgba(75, 156, 185, 1) 81%,
		rgba(236, 139, 50, 1) 100%
	);
}

iframe {
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	height: auto;
}

.center {
	color: #103045;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	margin: 0;
	flex-direction: column;
}
.intro,
.contact,
.projects {
	width: min(75ch, 92vw);
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 12px;
}

.title {
	display: flex;
}
.project summary:hover {
	color: #9ac9e3;
	background-color: #103045;
}
.project {
	.inside {
		background-color: #4b9cb9;
		padding: 10px;
	}
}
.aboutme:hover {
	background-color: #4b9cb9;
}
.aboutme {
	padding: 10px;
}

.project {
	padding: 3px;
}
.project summary {
	padding: 6px;
	color: #103045;
}

details summary::-webkit-details-marker {
	display: none;
}

details > summary {
	list-style: none;
}
details > summary::-webkit-details-marker {
	display: none;
}