@font-face {
	src: url('Typo Grotesk Rounded.otf');
	font-family: regular;
}

.static {
	overflow: hidden;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
}

.flexible {
	overflow: hidden;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

@media screen and (max-width: 768px) {
	html {
		font-size: 12px;
	}

	.page {
		width: calc(100% - 40px);
	}

	.page > .header {
		margin-top: 20px;
	}

	.page > .buttons {
		margin: 4px 8px;
	}

	.page > .buttons > .button {
		flex: 1 1 auto;
		width: 100px;
		height: 24px;
	}

	.page > .buttons > .button > .icon {
		display: none;
	}

	.section#projects > .card {
		margin: 4px;
		width: calc(50% - 8px);
	}

	.section#demos > .list > .item {
		margin: 4px 0;
	}
}

@media screen and (min-width: 769px) {
	html {
		font-size: 16px;
	}

	.page {
		width: calc(100% - 120px);
		max-width: 1024px;
	}

	.page > .header {
		margin-top: 32px;
	}

	.page > .buttons {
		margin: 4px 8px 4px auto;
	}

	.page > .buttons > .button {
		width: 160px;
		height: 32px;
	}

	.page > .buttons > .button > .icon {
		display: block;
	}

	.section#projects > .card {
		margin: 8px;
		width: calc(25% - 16px);
	}

	.section#demos > .list > .item {
		margin: 8px 0;
	}
}

/* body */

body.light {
	--bg: hsl(0, 0%, 96%);
	--body: hsl(0, 0%, 100%);
	--text: black;
	--shadow: rgba(0 0 0 / 4%);
	--primary-hue: 205;
	--primary-color: hsl(var(--primary-hue), 100%, 50%);
	--primary-text: white;
}

body.dark {
	--bg: hsl(0, 0%, 16%);
	--body: hsl(0, 0%, 20%);
	--text: white;
	--shadow: rgb(0 0 0 / 12%);
	--primary-hue: 346;
	--primary-color: hsl(var(--primary-hue), 100%, 50%);
	--primary-text: white;
}

body {
	margin: 0;
	font-family: regular;
	letter-spacing: 1px;
	color: var(--text);
	white-space: nowrap;
	background-color: var(--bg);
	transition-property: color, background-color;
	transition-duration: 0.1s;
	transition-timing-function: ease-out;
}

/* fields */

button {
	padding: 0;
	font-family: regular;
	letter-spacing: 1px;
	color: var(--text);
	border-width: 0;
}

.button {
	font-size: 1rem;
	text-decoration: none;
	color: var(--primary-text);
	border-width: 1px;
	border-radius: 6px;
	border-color: var(--primary-color);
	background-color: var(--primary-color);
	box-shadow: 0px 0px 2px 1px var(--shadow);
	transition-property: color, border-color, background-color;
	transition-duration: 0.1s;
	transition-timing-function: ease-out;
	cursor: pointer;
}

input[type="radio"] {
	display: none;
}

input[type="radio"]:checked + .button {
	background-color: hsl(var(--primary-hue), 100%, 50%);
}

.radio {
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.radio > .button {
	padding: 4px;
	width: 160px;
	text-align: center;
	background-color: hsl(var(--primary-hue), 100%, 20%);
	box-shadow: none;
	user-select: none;
}

.radio > .button.left {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.radio > .button.middle {
	border-radius: 0;
}

.radio > .button.right {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* page */

.page {
	overflow: visible;
	margin: auto;
	min-height: 100vh;
}

/* header */

.page > .header {
	margin-left: 10%;
	margin-right: 10%;
	justify-content: center;
}

.page > .header > .title {
	font-size: 2.4rem;
	font-weight: bold;
}

.page > .header > .description {
	margin-top: 4px;
	margin-left: 16px;
	font-size: 1.2rem;
}

/* buttons */

.page > .buttons {
	flex-direction: row;
}

.page > .buttons > .button {
	flex-direction: row;
	margin: 4px;
	align-items: center;
}

.page > .buttons > .button > .icon {
	margin: auto -8px auto 4px;
	width: 24px;
	height: 24px;
}

.page > .buttons > .button > .text {
	margin: auto;
	padding-bottom: 1px;
}

/* body */

.page > .body {
	margin-bottom: 20px;
	padding: 20px;
	border-radius: 20px;
	background-color: var(--body);
	box-shadow: 0px 0px 4px 0px var(--shadow);
	transition: background-color ease-out 0.1s;
}

.page > .body > .sections {
	overflow: visible;
	position: relative;
	margin-top: 20px;
}

.page > .body > .sections > .section {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition-property: opacity, transform;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

.page > .body > .sections > .section.hide-left {
	opacity: 0;
	transform: translateX(-40px);
	pointer-events: none;
}

.page > .body > .sections > .section.hide-right {
	opacity: 0;
	transform: translateX(40px);
	pointer-events: none;
}

/* projects */

.section#projects {
	flex-direction: row;
	flex-wrap: wrap;
	align-content: start;
	justify-content: space-evenly;
}

.section#projects > .card {
	position: relative;
	aspect-ratio: 16/10;
	border-radius: 6px;
	box-shadow: 0px 0px 4px 1px var(--shadow);
	z-index: 1;
}

.section#projects > .card > .image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.section#projects > .card > .text {
	margin: auto auto 6px auto;
	padding: 4px 8px;
	font-size: 0.7rem;
	color: var(--primary-text);
	border-radius: 6px;
	background-color: rgb(0 0 0 / 50%);
	transition-property: font-size, background-color;
	transition-duration: 0.12s;
	transition-timing-function: ease-out;
}

.section#projects > .card:hover > .text {
	font-size: 0.8rem;
	background-color: var(--primary-color);
}

/* demos */

.section#demos {
	flex-direction: row;
}

.section#demos > .list {
	margin-right: 20px;
	width: calc(33% - 20px);
	min-width: 160px;
	max-width: 240px;
}

.section#demos > .list > .item {
	position: relative;
	aspect-ratio: 16/3;
	width: calc(100% - 6px);
	justify-content: center;
	font-size: 0.8rem;
	font-weight: bold;
	text-align: center;
	text-shadow: 0px 1px 6px black;
	color: var(--primary-text);
	border-style: solid;
	border-width: 3px;
	border-radius: 6px;
	border-color: hsl(var(--primary-hue), 100%, 20%);
	background-color: black;
	box-shadow: 0px 0px 4px 1px var(--shadow);
	z-index: 1;
	cursor: pointer;
	user-select: none;
	transition: border-color ease-out 0.12s;
}

.section#demos > .list > .item > .image {
	opacity: 60%;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	transition: opacity ease-out 0.12s;
}

.section#demos > .list > .item:hover > .image {
	opacity: 100%;
}

.section#demos > .list > .item.selected {
	border-color: hsl(var(--primary-hue), 100%, 50%);
}

.section#demos > .list > .item.selected > .image {
	opacity: 100%;
}

/* games */

.section#games > .card {
	margin: 8px auto;
	max-width: calc(100% - 8px);
	border-style: solid;
	border-width: 4px;
	border-radius: 6px;
	border-color: var(--primary-color);
	box-shadow: 0px 0px 4px 1px var(--shadow);
}

/* dialog */

.dialog::backdrop {
	background-color: rgba(0 0 0 / 40%)
}

.dialog {
	padding: 0;
	width: 20rem;
	border-width: 0;
	border-radius: 6px;
	background-color: white;
	box-shadow: 0px 0px 6px 4px var(--shadow);
}

.dialog > .body {
	padding: 8px;
}

.dialog > .body > .email {
	margin: 8px;
	font-size: 1rem;
	text-align: left;
	color: black;
}

.dialog > .body > .buttons {
	margin-top: 16px;
	flex-direction: row;
}

.dialog > .body > .buttons > .button {
	margin: 0 4px;
	padding: 4px 6px;
	font-size: 0.8rem;
}

.dialog > .body > .buttons > .button#close {
	margin-left: auto;
}