html {
	background-color: #fff0db;
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
}

img,
picture,
video {
	max-width: 100%;
}

.homebutton {
	text-align: center;
	display: inline-block;
	width: 200px;
}

.container {
	width: 340px;
	margin-right: auto;
	margin-left: auto;
}

.content {
	text-align: justify;
}

header {
	text-align: center;
}

img.mimage {
	width: 100%;
	aspect-ratio: 1 / 1;
}

a {
	text-decoration: none;
	border: 4px solid #d9b99b;
	border-radius: 10px;
	color: black;
	font-size: 1.5em;
	font-weight: bold;
}

a:hover {
	background-color: #eed9c4;
	color: white;
}

a:active {
	color: #e4d5b7;
}

@media screen and (min-width: 1024px) {
	.container {
		width: 600px;
		margin-right: auto;
		margin-left: auto;
	}

	html {
		font-size: 16px;
	}

	main {
		gap: 10px;
	}

	a {
		border: 5px solid #d9b99b;
	}

	.homebutton {
		width: 267px;
	}
}

@media screen and (min-width: 1280px) {
	.container {
		width: 800px;
		margin-right: auto;
		margin-left: auto;
	}
}