::-ms-expand {
	display: none;
}
*,
::before,
::after {
	box-sizing: border-box;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
	touch-action: manipulation;
}
body {
	background: rgba(0, 0, 0, .85);
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	color: white;
	font-family: Sans-serif;
	margin: 0;
	max-width: 90vw;
	padding: 1.5rem;
}
body > header {
	background: rgba(255, 255, 255, .2);
	border-radius: 10px;
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 1rem;
	padding: 1rem 0;
	text-align: center;
}
body > nav {
	background: rgba(255, 255, 255, .15);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-bottom: 1rem;
	padding: 1rem;
}
body > nav a {
	border-radius: 5px;
	color: white;
	font-weight: bold;
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition: background 0.3s;
}
body > nav a:hover,
body > nav a.active {
	background: rgba(255, 255, 255, .3);
}
body a {
	color: white;
}
body.item {
	max-width: 750px;
}
button:focus,
input:focus,
select:focus,
textarea:focus,
[contenteditable]:focus {
	outline: 0;
}
h2 {
	color: rgb(255, 200, 0);
}
html {
	align-items: center;
	background: linear-gradient(180deg, rgb(255, 94, 0) 0%, rgb(255, 30, 30) 50%, rgb(128, 0, 0) 100%);
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	min-height: 100vh;
	overflow: auto;
}
img {
	max-width: 100%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type="number"] {
	-moz-appearance: textfield;
}
main {
	background: rgba(255, 255, 255, .1);
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
}
ol,
li {
	text-align: left;
}
table {
	border-collapse: collapse;
}
#cards {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	margin: 0 auto;
	max-width: 900px;
	padding: 20px;
}
#cards .card {
	color: black;
	display: block;
	text-decoration: none;
}
#cards .card .polaroid {
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
	transition: 0.3s;
	width: 100%;
}
#cards .card .polaroid .caption {
	padding: 10px;
	text-align: center;
}
#cards .card .polaroid img {
	height: auto;
	width: 100%;
}
#cards .card .polaroid:hover {
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}
#contact {
	display: flex;
	flex-direction: column;
	margin: auto;
	max-width: 500px;
}
#contact .name-wrapper {
	display: flex;
	gap: 10px;
}
#contact .name-wrapper > div {
	flex: 1;
}
#contact button {
	background-color: #4CAF50;
	border: none;
	border-radius: 4px;
	color: white;
	cursor: pointer;
	padding: 10px 15px;
}
#contact button:hover {
	background-color: #3e8e41;
}
#contact input,
#contact textarea {
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	margin-bottom: 10px;
	margin-top: 5px;
	padding: 8px;
	width: 100%;
}
#contact label {
	display: block;
	margin-top: 10px;
}
#contact textarea {
	resize: vertical;
}
#me {
	height: 182px;
}
#recipe {
	text-align: left;
}
#recipe-image img {
	display: block;
	margin: auto;
	max-width: 500px;
	width: 100%;
}
#search {
	background: #FFF;
	border: 0;
	color: black;
	font: inherit;
	padding: .33rem;
	width: 96%;
}