@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	display: block;
	max-width: 100%;
	height: 100%;
}

input,
button,
textarea {
	font: inherit;
}

/* VARIABLE */
:root {
	/* FONTS */
	--FF: Verdana, Geneva;
	--FF-HEADINGS: cursive;
	--FS: clamp(1rem, 2.2vh, 1.5rem);

	/* COLORS */
	--BGCOLOR-FADE: rgb(252, 220, 160);
	--BGCOLOR: orange;
	--BGIMAGE: linear-gradient(to bottom, var(--BGCOLOR), var(--BGCOLOR-FADE));
	--BODY-BGCOLOR: #fff;
	--BORDER-COLOR: #333;
	--BUTTON-COLOR: #fff;
	--FONT-COLOR: #000;
	--HEADER-BGCOLOR: #000;
	--HEADER-COLOR: #fff;
	--HERO-BGCOLOR: rgba(51, 178, 51, 0.75);
	--HERO-COLOR: #fff;
	--HIGHLIGHT-COLOR: rgb(51, 178, 51);
	--LINK-ACTIVE: orange;
	--LINK-COLOR: #000;
	--LINK-HOVER: hsla(9, 92%, 55%, 0.985);
	--NAV-BGCOLOR: #fff;

	/* BORDERS */
	--BORDERS: 1px solid var(--BORDER-COLOR);
	--BORDERS-RADIUS: 15px;

	/* STANDARD PADDING */
	--PADDING-TOP-BOTTOM: 0.25em;
	--PADDING-SIDE: 2.5%;

	/* STANDARD MARGIN */
	--MARGIN: clamp(1em, 2.5vh, 1.5em 0);
}

@media (prefers-color-scheme: dark) {
	:root {
		--BGCOLOR-FADE: #fff;
		--BGCOLOR: #000;
		--BODY-BGCOLOR: #333;
		--BORDER-COLOR: whitesmoke;
		--BUTTON-COLOR: #000;
		--FONT-COLOR: whitesmoke;
		--HEADER-BGCOLOR: #fff;
		--HEADER-COLOR: #000;
		--HERO-COLOR: #333;
		--HIGHLIGHT-COLOR: whitesmoke;
		--LINK-ACTIVE: rgb(253, 67, 5);
		--LINK-COLOR: whitesmoke;
		--LINK-HOVER: orange;
		--NAV-BGCOLOR: rgb(20, 20, 20);
	}
}

/* UTILITY CLASSES */
.offscreen {
	position: absolute;
	left: -10000px;
}

.nowrap {
	white-space: nowrap;
}

.center {
	text-align: center;
}

/* GENERAL STYLES */

html {
	scroll-behavior: smooth;
	font-size: var(--FS);
	font-family: var(--FF);
	background-color: var(--BGCOLOR);
	background-image: var(--BGIMAGE);
}

body {
	background-color: var(--BODY-BGCOLOR);
	color: var(--FONT-COLOR);
	min-height: 100vh;
	max-width: 800px;
	margin: 0% auto;
	border-left: var(--BORDERS);
	border-right: var(--BORDERS);
	box-shadow: 0 0 10px var(--BORDER-COLOR);
}

h1,
h2,
h3 {
	font-family: var(--FF-HEADINGS);
	letter-spacing: 0.1em;
}

h2,
h3 {
	margin-bottom: 1em;
	color: var(--HIGHLIGHT-COLOR);
}

p {
	line-height: 1.5;
}

a:any-link {
	color: var(--LINK-COLOR);
}

a:hover,
a:focus-visible {
	color: var(--LINK-HOVER);
}

a:active {
	color: var(--LINK-ACTIVE);
}

/* HEADER */
.header {
	position: sticky;
	top: 0;
	z-index: 1;
}

.header__h1 {
	text-align: center;
	background-color: var(--HEADER-BGCOLOR);
	color: var(--HEADER-COLOR);
	padding: var(--PADDING-TOP-BOTTOM) var(--PADDING-SIDE);
}

.header__nav {
	background-color: var(--NAV-BGCOLOR);
	border-bottom: var(--BORDERS);
	font-weight: bold;
	box-shadow: 0 6px 5px -5px var(--BORDER-COLOR);
	padding: 1em 0;
}

.header__ul {
	padding: var(--PADDING-TOP-BOTTOM);
	list-style-type: none;
	display: flex;
	justify-content: space-evenly;
	gap: 1rem;
}

.p2 {
	/* padding: 0 21rem;
	 */
	display: flex;
	justify-content: center;
	font-weight: bold;
	font-size: 3em;
}

.table tr {
	display: flex;
}

.tt {
	border-bottom: var(--BORDERS);
	align-items: center;
	justify-content: center;
	display: flex;
	font-weight: bold;
}
/* .ttv {
	background-color: var(--NAV-BGCOLOR);
	border-bottom: var(--BORDERS);
	box-shadow: 0 6px 5px -5px var(--BORDER-COLOR);
} */
/* .btt {
	background-color: var(--NAV-BGCOLOR);
	border-bottom: var(--BORDERS);
	box-shadow: 0 6px 5px -5px var(--BORDER-COLOR);
} */

.btt :any-link {
	color: blue;
}
.btt :hover {
	color: rgb(241, 50, 21);
}

/* HERO */
.hero {
	position: relative;
}

.hero__h2 {
	background-color: var(--HERO-BGCOLOR);
	color: var(--HERO-COLOR);
	padding: 0.25em 0.5em;
	letter-spacing: 0.1rem;
	text-shadow: 2px 2px 5px var(--BORDER-COLOR);
	position: absolute;
	top: -100px;
	left: 20px;
	animation: showWelcome 0.5s ease-in-out 1s forwards;
}

@keyframes showWelcome {
	0% {
		top: -20;
		transform: skew(0deg, -5deg) scaleY(0);
	}

	80% {
		top: 30px;
		transform: skew(10deg, -5deg) scaleY(1.2);
	}

	100% {
		top: 30px;
		transform: skew(-10deg, -5deg) scaleY(1);
	}
}

.footer {
	position: static;
	bottom: 0;
	background-color: var(--HEADER-BGCOLOR);
	color: var(--HEADER-COLOR);
	padding: var(--PADDING-SIDE) var(--PADDING-TOP-BOTTOM);
	text-align: center;
}

.main {
	padding: var(--PADDING-TOP-BOTTOM) var(--PADDING-SIDE);
}

.main__article {
	scroll-margin-top: 6.5rem;
	margin: var(--MARGIN);
}
.main__article:first-child {
	margin-top: 1em;
}

.main__article:last-child {
	min-height: calc(100vh - 20rem);
}

/* ABOUT  */

.about__trivia {
	margin: var(--MARGIN);
}
.about__trivia-answer {
	margin-top: 1em;
}

/* CONTACT */
.contact__h2 {
	margin: 0;
}

.contact__fieldset {
	border: none;
}

.contact__p {
	margin: 1em 0;
}

.contact__label {
	display: block;
	font-weight: bold;
}

.contact__input,
.contact__textarea {
	padding: 0.5em;
	border-radius: var(--BORDERS-RADIUS);
	border-width: 2px;
	width: 100%;
}

.contact__button {
	padding: 0.5em;
	border-radius: var(--BORDERS-RADIUS);
	background-color: var(--HIGHLIGHT-COLOR);
	color: var(--BUTTON-COLOR);
	font-weight: bold;
}

/* MENU */

thead,
tbody,
tfoot,
tr {
	display: contents;
}

.menu__container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: 'hd1 hd2 hd3' 'cr cr2 cr1p' 'cr cr3 cr3p' 'sf sf1 sf1p',
		'sf sf2 sf2p', 'sf sf3 sf3p' 'cs cs cs';
	gap: 0.1em;
	margin-bottom: 1em;
}

.menu__cr,
.menu__sf,
.menu__cs,
.menu__header {
	color: var(--HIGHLIGHT-COLOR);
	font-weight: bold;
	height: 100%;
	display: grid;
	place-content: center;
}

.menu__header,
.menu__item {
	width: 100%;
	padding: 1em;
	border: medium ridge var(--BORDER-COLOR);
}

.menu__item {
	display: grid;
	place-content: center;
}

thead th:first-child {
	border-top-left-radius: var(--BORDERS-RADIUS);
	background-color: #000;
	color: #fff;
}

thead th:nth-child(2) {
	background-color: #000;
	color: #fff;
}

thead th:last-child {
	border-top-right-radius: var(--BORDERS-RADIUS);
	background-color: #000;
	color: #fff;
}

/* tfoot td {
	border-bottom-left-radius: var(--BORDERS-RADIUS);
	border-bottom-right-radius: var(--BORDERS-RADIUS);
} */

/* smallest */
@media screen and (min-width: 100px) {
	.header__h1 {
		font-size: 18px;
	}
	.menu__container {
		padding: var(--PADDING-TOP-BOTTOM);
	}
	.header__h1::before {
		content: '🌭 ';
	}
	.header__h1::after {
		content: ' 🌭';
	}
}

/* smaller */
@media screen and (min-width: 450px) {
	.header__h1::before {
		content: '🍕 ';
	}
	.header__h1::after {
		content: ' 🍕';
	}
}

@media screen and (min-width: 576px) {
	.header__h1 {
		font-size: none;
	}
	.header__h1::before {
		content: '🌮 ';
	}
	.header__h1::after {
		content: ' 🌮';
	}
	.menu__header,
	.menu__cr,
	.menu__sf,
	.menu__cs {
		font-size: 125%;
	}
}