@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,900;1,400&display=swap');
:root {
	--green1:#5CCBB9;
	--green2:#3CB8A4;
	--green3:#319081;
	--green4:#256A5E;
	--green5:#18433C;
	--shadow:#E2E0E0;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Nunito', sans-serif;
}

body {
	width: 400px;	
}

header {
	width: inherit;
	background-color: var(--green2);
}

nav {
	width: inherit;
}

nav ul {
	width: inherit;
	list-style: none;
	display: inline-flex;
	flex-direction: row;
    justify-content: space-around;
    align-items: center;
}


ul li a {
	text-decoration: none;
	padding: 10px;
	display:inline-block;
	color: white;
	font-size: 16px;
	font-weight: 900;
  	transition: color .2s;

}

ul li a:hover {
 	color: var(--green4);
 }

.active {
 	color: var(--green4);
 	pointer-events: none;
 	cursor: default;
 }

section {
	width: inherit;
	height: 100px;
	display: inline-flex;
	flex-flow:  row wrap;
	justify-content: center;
	margin-top: 5px;
	align-items: center;
}  

textarea {
	resize: none;
	border-radius: 10px;
	padding: 5px;
	border-color: var(--green4);
	background-color: white;
	box-shadow: 1px 1px var(--shadow);
	color: black;
}

textarea:focus {
	outline-color: var(--green4);
 }


button {
	color: white;
	background-color: var(--green3); 
	border: none;
	box-shadow: 1px 1px var(--shadow);
	border-radius: 5px;
	padding: 10px 12px;
	font-weight: 900;
	font-size: 14px;
	margin: 0px 2px 0px 2px;
	cursor: pointer;
	transition: background .2s;
}

button:hover {
	background-color: var(--green4);
}

.green1 {
	background-color: var(--green1);
}

.quantity {
	margin: 0px 20px 0px 2px;
	width: 40px;
	height: 34px;
	border-radius: 5px;
	color: black;
	background-color: white;
	border-color: var(--green1);
	text-align: center;
	box-shadow: 1px 1px var(--shadow);
	font-weight: 900;
	font-size: 16px;
	transition: border-color .2s;
}

.quantity:hover {
	border-color: var(--green4);
}

select {
	margin: 0px 18px 0px 0px;
	width: 147px;
	height: 38px;
	border: none;
	border-radius: 5px;
	color: black;
	background-color: white;
	border-color: var(--green1);
	text-align: center;
	box-shadow: 3px 3px var(--shadow);
	font-weight: 900;
	font-size: 16px;
	outline: solid;
    outline-color: var(--green1);
    outline-width: 2px;
    transition: outline-color .2s;

}

select option{
	font-weight: inherit;
}

select:hover {
	outline-color: var(--green4);
}

select:focus {
	border-color: var(--green4);
}

footer {
	background-color: var(--green2);
	padding: 2px;
	margin-top: 5px;
	text-align: center;
	color: var(--green5);
}

footer a {
	text-decoration: none;
}

footer a:visited {
	color: var(--green5);	
}
footer a:hover {
	color: var(--green4);
}


.shake {
	animation: shake .1s;
    animation-iteration-count: 2;
}

@keyframes shake {
    0% {margin-left: 0;}
    25% {margin-left: 7px;}
    50% {margin-left: 0;}
    75% {margin-left: -7px;}
    100% {margin-left: 0;}