* {
	box-sizing: border-box;
}

body {
	font-family: 'Rambla', sans-serif;
	font-size: 16px;
	color: #333;
	margin: 0;
	padding: 1rem 0 2rem;
	background: #623705;
}

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

header,
nav,
main {
	width: calc(100vw - 12px);
	max-width: 1024px;
	min-width: 308px;
	margin: 0 auto;
}

@media screen and (min-width: 800px) {
	header,
	nav,
	main {
		width: calc(100vw - 0.8rem);
	}
}

header {
	padding: 0 0 1rem;
}

main {
	background: #000000;
	border-radius: 20px;
	padding: 6px;
	margin-bottom: 2rem;
	min-width: ;
}

@media screen and (min-width: 800px) {
	main {
		padding: 1rem 2rem;
	}
}

#logo {
	padding: 0.6rem;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	justify-content: center;
}

#logo img {
	width: 400px;
}

h1 {
	font-size: 28px;
	color: #ffffff;
	margin: 1rem 1rem;
}

@media screen and (min-width: 800px) {
	h1 {
		font-size: 42px;
		margin: 1rem 0.2rem;
	}
}

h2 {
	font-size: 24px;
	color: #333;
	margin: 0.4rem 0 1rem;
}

h3 {
	font-size: 20px;
	color: #333;
	margin: 1rem 0 1rem;
}

section {
	margin: 0 0 1rem;
	padding: 0.4rem 0.6rem 2rem;
	background: #fde5b7;
	border-radius: 6px;
}

@media screen and (min-width: 800px) {
	section {
		border-radius: 20px;
		padding: 1rem 1rem 2rem;
	}
}

p {
	margin: 0.4rem 0;
}

strong {
	color: #000;
}
i {
	color: #631B00;
}
ul, ol {
	margin: 0 0 1rem;
	padding: 0 1rem;
}
li {
	margin: 0.4rem 0;
	padding: 0;
}
img {
	max-width: calc(100vw - 2rem - 8px);
	margin: 0.6rem 0;
}

li img {
	max-width: calc(100vw - 3rem - 8px);
}

@media screen and (min-width: 800px) {
	img {
		max-width: calc(832px - 2rem - 8px);
	}

	li img {
		max-width: calc(832px - 3rem - 8px);
	}
}

nav ul {
	list-style: none;
	display: flex;
	gap: 6px;
	padding: 0 0 0 18px;
	margin: 24px 0 0;
}

nav ul li {
	margin: 0;
}

nav ul li a {
	display: block;
	background: #d56300;
	padding: 12px 32px 6px;
	border: 4px solid #623706;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom: 0;
	color: #000000;
	text-decoration: none;
}

nav ul li a.active,
nav ul li a:hover {
	background: #000000;
	color: #ffffff;
}

.desktop-calendar {
	display: none;
}

@media screen and (min-width: 800px) {
	.mobile-calendar {
		display: none;
	}
	.desktop-calendar {
		display: block;
	}
}