html {
	height: 100%;
}

nav {
	display: flex;
	background-color: #a435d7;
	align-items: center;
	justify-content: center;
}

nav > ul {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
}

nav > ul > li {
	margin-left: 1em;
	margin-right: 1em;
}

nav > ul > li > :link { color: #f6f1fb; }
nav > ul > li > :visited { color: #f6f1fb; }
nav > ul > li { font-weight: bold }

:link { color: #b546c4; }
:visited { color: #875da8; }

h1 {
	text-align: center;
	font-size: 2em;
}

main {
	display: flex;
	justify-content: center;
	margin-left: 1em;
	margin-right: 1em;
	flex: 1;
}

main > * {
	max-width: 50em;
	min-width: 18em;
	width: 100%;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 0.5em;
}

footer > * {
	margin: 0.5em;
}

body {
	font-family: "freesans";
	font-size: 18px;
	line-height: 1.3;
	margin: 0;
	display: flex;
	flex-direction: column;
  height: 100vh;
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #111;
		color: white;
	}
	:link { color: #f0e1f2; }
	:visited { color: #cfaeea; }
}

.cover-image {
	margin: auto;
	display: block;
	border-radius: 1em;
	max-height: 30vw;
	max-width: 90%;
}

@media (orientation: portrait) {
	.cover-image {
		max-height: 35vh;
	}
}

footer > section {
	display: flex;
	justify-content: center;
	flex-wrap: inherit;
}

.rows {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.rows > section > h2 {
	text-align: center;
}

.rows > section > ul > li > a {
	text-decoration: none;
	max-width: 17em;
	display: inline-block;
	vertical-align: top;
}

.rows > section > ul > li > a:hover {
	text-decoration: underline;
}

.rows > section > ul > li > ul {
	padding-left: 1em;
}

.rows > section > ul > li > ul > li > a {
	text-decoration: none;
	max-width: 17em;
	display: inline-block;
	vertical-align: top;
}

.rows > section > ul > li > ul > li > a:hover {
	text-decoration: underline;
}

model-viewer {
	width: 40vh;
	height: 40vh;
}

.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	> img {
		max-width:20em;
		max-height:20em;
		width:auto;
		height:auto;
		margin: 0.1em;

		&:hover {
			transform: scale(2);
		}
	}

  .card {
    padding: 0 1.5em 1.5em 1.5em;
    border-radius: 0.5em;
    background-color: mediumorchid;
    width: 11em;
    margin: 1em;
		underline: none;
		color: unset;
		text-decoration-line: none;

		section {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}

		p {
			/* margin-block-end: 0px; */
		}

		h2 {
			margin-block-end: 10px;
		}
		
		img {
			max-height: 7em;
			object-fit: contain;
		}
		
		&:hover {
      background-color: orchid;
		}

		dl {
			margin-top: auto;
			margin-bottom: 0;
		}

		dt {
		  float: left;
		  clear: left;
		  style: bold;
		}

		dd {
			text-align: end;
		}
  }
}