:root {
	--font-size: 16px;
	--root-size: 1.2rem;
	--shadow: #2a272382;
	--light-blue: #3a68c48a;
	--blue: #3a68c4;
	--bolded: 900;
	--margin: 1.5rem;
	--padding: 1rem;
	--border-radius: 1rem;
	--gap: 1rem;
	--pixel: "Pixelify Sans", sans-serif;
}

body {
	font-family: var(--pixel);
	background-color: var(--white);
	text-transform: uppercase;
	background-image: url("../assets/8bit3.webp");
	background-size: 310%;
}

* {
	color: var(--black);
}

header {
	display: flex;
	position: sticky;
	padding-top: calc(var(--padding)/1.4);
	padding-bottom: calc(var(--padding)/1.4);
	margin-bottom: var(--margin);
	padding-left: var(--padding);
	background-color: var(--white);
	border-bottom: 2px solid var(--black);
	top: 0;
	z-index: 100;
	gap: var(--gap);
}

/* LOGO */
.logo > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding-top: calc(var(--padding)/2.4);
}

.logo {
	height: 100%;
}

.mood {
	align-items: center;
	display: flex;
	border: solid 2px var(--black);
	padding-left: calc(var(--padding)/2);
	padding-right: calc(var(--padding)/2);
	border-radius: 5px 5px 5px 0px;
}

.feeling-hungry {
	align-self: center;
}

/* NAV */
ul {
	list-style: none;
}

li > a {
	cursor: pointer;
}

.nav {
	width: 100%;
	position: absolute;
	background-color: var(--black);
	overflow: hidden;
	max-height: 0;
	transition: max-height .5s ease-out;
	top: 100%;
	left: 0;
	z-index: 10;
}

.menu a {
	display: block;
	padding: 30px;
	color: var(--white);
}

.menu a:hover {
	background-color: var(--black);
}

/* MENU ICON */
.hamb {
	cursor: pointer;
	float: right;
	padding: var(--padding);
	margin-right: 0.2rem;
}

.hamb-line {
	background: #e51933;
	display: block;
	height: 2px;
	position: relative;
	width: 20px;
}

.hamb-line::before{
	background: #e51933;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
	top: 5px;
}

.hamb-line::after {
	top: -5px;
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .2s ease-out;
	width: 100%;
	background: #e51933;
}

.side-menu {
	display: none;
}

/* TOGGLE MENU ICON */
.side-menu:checked ~ nav {
	max-height: 1000%;
}

.side-menu:checked ~ .hamb .hamb-line {
	background: transparent;
}

.side-menu:checked ~ .hamb .hamb-line::before {
	transform: rotate(-45deg);
	top: 0;
}

.side-menu:checked ~ .hamb .hamb-line::after {
	transform: rotate(45deg);
	top: 0;
}

/* NAVBAR SWIPE */
.navbar {
	left: 0;
	top: 0;
	width: 100%;
	background: var(--white);
	transition: transform 0.3s ease-in-out;
}


.logo {
	width: 1.5rem;

	img {
		object-fit: cover;
		width: 100%;
	}
}

h1 {
	font-size: calc(var(--font-size)*1.3);
	font-weight: var(--bolded);
	margin-left: var(--margin);
	margin-right: var(--margin);
	text-align: center;
	margin-bottom: var(--margin);
}


/* FORMS STYLING - modified from https://www.w3schools.com/howto/howto_custom_select.asp */
#meal-form {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
	margin-left: var(--margin);
	margin-right: var(--margin);
	margin-bottom: var(--margin);
}

.form {
	position: relative;
	background-color: var(--white);
	width: fit-content;
	text-align: center;
	padding: calc(var(--padding)/2);
	border: solid 2px var(--black);
	font-size: calc(var(--font-size)/1.3);
	box-shadow: 3px 3px var(--yellow);
}

/* FORM ANIMATION */
.cui {
	animation: extend 1s ease-in-out;
}

@keyframes extend {
	0% {
		box-shadow: 3px 3px var(--yellow);
	}

	50% {
		transform: translate(-4px, -4px);
		box-shadow: 5px 5px var(--yellow);
	}

	100% {
		box-shadow: 3px 3px var(--yellow);
	}
}

.spi {
	animation: stretch 1s ease-in-out;
}

@keyframes stretch {
	0% {
		box-shadow: 3px 3px var(--yellow);
	}

	70% {
		transform: translate(-4px, -4px);
		box-shadow: 5px 5px var(--yellow);
	}

	100% {
		box-shadow: 3px 3px var(--yellow);
	}
}

.typ {
	animation: secondStretch 1s ease-in-out;
}

@keyframes secondStretch {
	0% {
		box-shadow: 3px 3px var(--yellow);
	}

	90% {
		transform: translate(-4px, -4px);
		box-shadow: 5px 5px var(--yellow);
	}

	110% {
		box-shadow: 3px 3px var(--yellow);
	}
}

/* LABEL */
label {
	color: var(--black);
	font-weight: var(--bolded);
	font-size: var(--font-size);
}

select {
	color: var(--black);
	font-size: var(--font-size);
}

.button-flex {
	display: flex;
	gap: var(--gap);
}

button {
	border: 2px solid var(--black);
	padding: calc(var(--padding)/1.5);
}

/* DISABLED - modified from https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field?utm_source=chatgpt.com */
select.placeholder {
	color: #888;
	font-style: italic;
}

select.selected {
	background-color: var(--yellow);
	color: var(--black);
	text-align: center;
}


/* GASHAPON */
.gashapon-wrapper {
	position: relative;
	width: 20rem;
	height: 26rem;
	margin: auto;
	object-fit: cover;
}

.bg {
	width: 120%;
	height: 25rem;
	object-fit: cover;
	display: block;
	z-index: 1;
	image-rendering: pixelated;
	max-block-size: unset;
}

.crank-button {
	position: absolute;
	width: 60px;
	height: 60px;
	bottom: 80px;
	left: 180px;
	cursor: pointer;
	z-index: 5;
}

.capsule-container {
	position: absolute;
	width: 5rem;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 8rem;
}

.capsule {
	position: absolute;
	width: 130px;
	transition: transform 0.8s ease, opacity 0.5s ease;
	z-index: 11;
}

.hidden {
	display: none;
}

#full-capsule {
	transform: translateY(-150px);
	opacity: 0;
}

#full-capsule.drop-in {
	opacity: 1;
	animation: dropBounce 1s ease;
}

#top-capsule {
	top: 15%;
}

#bottom-capsule {
	top: 45%;
}

@keyframes dropBounce {
	0% {
		transform: translateY(-150px);
		opacity: 0;
	}

	50% {
		transform: translateY(10px) scale(1.05);
		opacity: 1;
	}

	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

#top-capsule.open {
	animation: topPop 0.6s ease forwards;
}

#bottom-capsule.open {
	animation: bottomPop 0.6s ease forwards;
}

@keyframes topPop {
	to {
		transform: translateY(-130px) rotate(-20deg);
		opacity: 1;
	}
}

@keyframes bottomPop {
	to {
		transform: translateY(20px) rotate(15deg);
		opacity: 1;
	}
}


/* MODAL */
.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	background: var(--yellow);
	color: var(--black);
	border: 3px solid var(--black);
	padding: var(--padding);
	z-index: 999;
	width: 80%;
	max-width: 300px;
	text-align: center;
	box-shadow: 4px 4px var(--black);
	transition: all 0.3s ease-in-out;
	font-family: var(--pixel);
	opacity: 0;
	pointer-events: none;
}

.modal.show {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
	pointer-events: auto;
}

.modal-content {
	line-height: 1.5rem;
}

/* HIDE MODAL */
.hidden {
	display: none;
}

.close-btn {
	position: absolute;
	top: 0.3rem;
	right: 0.6rem;
	background: none;
	border: none;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--black);
}

.restaurant {
	padding: var(--padding);
	border: 2px solid var(--black);
	text-decoration: underline;
	margin-top: var(--padding);
	box-shadow: 2px 2px;
}

.modal-info {
	font-size: calc(var(--font-size)*1.5);
	padding-top: calc(var(--padding)/1.8);
	padding-bottom: calc(var(--padding)/1.8);
}

h3 {
	font-weight: var(--bolded);
}


/* FEELING LUCKY BUTTON */
.feeling-lucky {
	padding: var(--padding);
	border: solid 2px var(--white);
	background-color: var(--black);
	font-weight: var(--bolded);
	margin-top: var(--margin);
	min-width: 20.5rem;
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--margin);
}

button > a {
	color: var(--white);
	text-decoration: underline;
}

/* FOOTER */
footer {
	margin-top: var(--margin);
}


/* 800PX */
@media (min-width: 800px) {
	#meal-form {
		width: 40rem;
		margin-left: auto;
		margin-right: auto;
	}

	select {
		font-size: calc(var(--font-size));
	}

	body {
		background-size: 140%;
	}

	.bg {
		max-block-size: unset;
		height: 23rem;
	}

	/* ANIMATION */
	@keyframes topPop {
		to {
			transform: translateY(-120px) rotate(-20deg);
			opacity: 1;
		}
	}
	
	@keyframes bottomPop {
		to {
			transform: translateY(40px) rotate(15deg);
			opacity: 1;
		}
	}
}


/* 1290px */
@media (min-width: 1290px) {
	/* BACKGROUND IMAGE */
	body {
		background-size: 94%;
	}


	/* HEADER + FOOTER*/
	.logo {
		width: 2.5rem;
	}

	.mood, .footer-info {
		font-size: calc(var(--font-size)*1.2);
	}


	/* MAIN FLEX BOX */
	/* FLEX CONTAINER */
	main {
		display: flex;
		height: 35rem;
		max-width: 50rem;
		margin: auto;
		justify-content: start;
		align-items: center;
	}

	/* FORM */
	#meal-form {
		flex-direction: column;
		width: fit-content;
		margin: 0;
		gap: calc(var(--gap)*2);
	}

	.form {
		box-shadow: 6px 6px var(--yellow);
	}

	label, select {
		font-size: calc(var(--font-size)*1.5);
	}

	/* FORM ANIMATION */
	@keyframes extend {
		0% {
			box-shadow: 6px 6px var(--yellow);
		}

		50% {
			transform: translate(-5px, -5px);
			box-shadow: 9px 9px var(--yellow);
		}

		100% {
			box-shadow: 6px 6px var(--yellow);
		}
	}

	@keyframes stretch {
		0% {
			box-shadow: 6px 6px var(--yellow);
		}

		70% {
			transform: translate(-5px, -5px);
			box-shadow: 9px 9px var(--yellow);
		}

		100% {
			box-shadow: 6px 6px var(--yellow);
		}
	}

	@keyframes secondStretch {
		0% {
			box-shadow: 6px 6px var(--yellow);
		}

		90% {
			transform: translate(-5px, -5px);
			box-shadow: 9px 9px var(--yellow);
		}

		110% {
			box-shadow: 6px 6px var(--yellow);
		}
	}

	/* FORM HOVER */
	.form:hover {
		transform: translate(-5px, -5px);
		box-shadow: 9px 9px var(--yellow);
		transition: 0.5s ease;
		cursor: pointer;
	}

	/* GASHAPON */
	.bg {
		height: 35rem;
	}

	.gashapon-wrapper {
		margin-top: 0;
	}

	/* COIN */
	.crank-button {
		width: 100px;
		height: 100px;
		bottom: 20px;
	}

	/* CAPSULE */
	.capsule-container {
		width: 11rem;
		margin-left: 0;
	}

	.capsule {
		width: 200px;
		height: 190px;
	}

	/* ANIMATION */
	@keyframes dropBounce {
		0% {
			transform: translateY(-200px);
			opacity: 0;
		}
	
		50% {
			transform: translateY(10px) scale(1.05);
			opacity: 1;
		}
	
		100% {
			transform: translateY(0) scale(1);
			opacity: 1;
		}
	}

	@keyframes topPop {
		to {
			transform: translateY(-170px) rotate(-20deg);
			opacity: 1;
		}
	}
	
	@keyframes bottomPop {
		to {
			transform: translateY(190px) rotate(15deg);
			opacity: 1;
		}
	}


	/* MODAL */
	.modal {
		padding: calc(var(--padding)*2);
		max-width: 40rem;
	}

	.modal-content {
		line-height: 3rem;
	}

	h3 {
		font-size: calc(var(--font-size)*2.3);
		font-weight: 500;
	}

	.modal-info {
		font-size: calc(var(--font-size)*4);
		font-weight: var(--bolded);
		padding-top: var(--padding);
		padding-bottom: var(--padding);
	}

	.modal-subtext, .restaurant, .try-again {
		font-size: calc(var(--font-size)*2);
	}

	.restaurant:hover {
		transform: translate(-5px, -5px);
		box-shadow: 9px 9px var(--black);
		transition: 0.5s ease;
		cursor: pointer;
	}

	.close-btn {
		font-size: 2.2rem;
	}
	
}