/*<!--- 
Restaurant Menu
-->*/

:root {
	--bg: #fffdf2;
	--tst: #d1e8ff;
	--radius: 10px;
	--icolor1: #c4e85a;
	--icolor2: #ffb370;
	--icolor3: #d65ae8;
	--icolor4: #63c8ff;
}

body {
	font-family: "Rubik", sans-serif;
	color: #111;
}

.container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	display: grid;
	grid-template-columns: 5% auto 5%;
	grid-template-rows: 140px 80px auto 100px 30px;
	background: var(--bg);
	/* mobile viewport bug fix */
	height: -webkit-fill-available;
}

.header {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	font-family: "Dancing Script", cursive;
}

.title {
	width: 100%;
	height: 100%;
	line-height: 150px;
	font-size: 70px;
	text-align: center;
}

.indicators {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 5;
	grid-row-end: 5;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 10px;
}

#i1,
#i2,
#i3,
#i4 {
	grid-column-start: 1;
	grid-column-end: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
#i2 {
	grid-column-start: 2;
	grid-column-end: 2;
}
#i3 {
	grid-column-start: 3;
	grid-column-end: 3;
}
#i4 {
	grid-column-start: 4;
	grid-column-end: 4;
}

.navi-indicator {
	height: 4px;
	width: 60px;
	border-radius: 20px;
	transition: width 0.2s;
}

#ni1{
	background: var(--icolor1);	
}
#ni2{
	background: var(--icolor2);
}
#ni3{
	background: var(--icolor3);
}
#ni4{
	background: var(--icolor4);
}

.navi {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 4;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 100px;
}

.navi-item1,
.navi-item2,
.navi-item3,
.navi-item4 {
	grid-column-start: 1;
	grid-column-end: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navi-item2 {
	grid-column-start: 2;
	grid-column-end: 2;
}
.navi-item3 {
	grid-column-start: 3;
	grid-column-end: 3;
}
.navi-item4 {
	grid-column-start: 4;
	grid-column-end: 4;
}

.nav-button {
	height: 70px;
	width: 70px;
	border-radius: 20px;
	background: linear-gradient(145deg, #e6e4da, #ffffff);
	box-shadow: 6px 6px 10px #cfcdc4, -6px -6px 10px #ffffff;
	font-family: "Rubik", sans-serif;
	font-weight: 700;
	cursor: pointer;
}

#startersbutton .navi-icon {
	color: var(--icolor1);
}
#mainsbutton .navi-icon {
	color: var(--icolor2);
}
#dessertsbutton .navi-icon {
	color: var(--icolor3);
}
#drinksbutton .navi-icon {
	color: var(--icolor4);
}

.navi-icon {
	height: 40px;
	line-height: 50px;
	font-size: 20px;
	text-align: center;
}

.navi-text {
	height: 30px;
	line-height: 20px;
	text-align: center;
	font-size: 0.9em;
	font-weight: 300;
}

.menu {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 4;
	overflow-y: auto;
}

.menu-item {
	grid-column-start: 2;
	grid-column-end: 2;
	height: 110px;
	margin: 15px;
	display: grid;
	grid-template-columns: auto 90px;
	grid-template-rows: 40px 60px;
	font-size: 0.9em;
	border-radius: var(--radius);
	padding-left: 30px;
	padding-top: 10px;
	background: linear-gradient(145deg, #ffffff, #e6e4da);
	box-shadow: 6px 6px 10px #c7c5bd, -6px -6px 10px #ffffff;
}
.menu-item-name {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	font-weight: 700;
	line-height: 50px;
}
.menu-item-description {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 2;
}
.menu-item-price {
	grid-column-start: 2;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 3;
	font-weight: 700;
	line-height: 100px;
	text-align: center;
}

.drink-item {
	grid-column-start: 2;
	grid-column-end: 2;
	height: 50px;
	margin: 15px;
	display: grid;
	grid-template-columns: auto 30px 90px;
	grid-template-rows: 50px;
	font-size: 0.9em;
	border-radius: var(--radius);
	padding-left: 30px;
	padding-top: 10px;
	background: linear-gradient(145deg, #ffffff, #e6e4da);
	box-shadow: 6px 6px 10px #c7c5bd, -6px -6px 10px #ffffff;
}
.drink-item-name {
	grid-column-start: 1;
	grid-column-end: 2;
	font-weight: 700;
	line-height: 50px;
}
.drink-item-description {
	grid-column-start: 2;
	grid-column-end: 2;
	line-height: 50px;
}
.drink-item-price {
	grid-column-start: 3;
	grid-column-end: 3;
	font-weight: 700;
	line-height: 50px;
	text-align: center;
}

.menu-separator {
	grid-column-start: 2;
	grid-column-end: 2;
	height: 50px;
	margin: 15px;
	margin-top: 35px;
	font-size: 1.2em;
	line-height: 50px;
	font-weight: 700;
	border-radius: var(--radius);
	padding-left: 30px;
	background: linear-gradient(145deg, #ffffff, #e6e4da);
	box-shadow: 6px 6px 10px #c7c5bd, -6px -6px 10px #ffffff;
}

/*Desktop Stuff*/
@media only screen and (min-width: 800px) {
	.container {
		grid-template-rows: 150px 100px 20px auto 20px;
	}
	.indicators {
		grid-row-start: 3;
		grid-row-end: 4;
	}
	.navi-indicator {
		height: 4px;
		width: 100%;
		margin: 15px;
	}
	.navi {
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.navi-item1,
	.navi-item2,
	.navi-item3,
	.navi-item4 {
		display: flex;
	}
	.nav-button {
		height: 70px;
		width: 100%;
		margin: 15px;
		display: flex;
		justify-content: center;
		border-radius: var(--radius);
	}
	.navi-icon {
		height: 100%;
		line-height: 70px;
		font-size: 25px;
		text-align: center;
	}
	.navi-text {
		line-height: 70px;
		margin-left: 10px;
		text-align: left;
		font-size: 1.3em;
		font-weight: 700;
	}
	.menu {
		grid-row-start: 4;
		grid-row-end: 4;
	}
}

/*prevent defaults*/
button,
p {
	display: inline-block;
	border: none;
	margin: 0;
	text-decoration: none;
	padding: 0;
	background: none;
	border-radius: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	overflow: hidden;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
input {
	padding: 0;
}
input:focus {
	outline: none;
}
button:focus {
	outline: none;
	color: var(--maincolor);
}

textarea:focus {
	outline: none;
}
select:focus {
	color: #39a;
}
a,
a:link,
a:visited {
	color: var(--maincolor);
}