@import url("https://fonts.googleapis.com/css2?family=Reggae+One&family=Source+Sans+Pro&family=Oleo+Script&family=Dela+Gothic+One&family=Atma&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

/* ----- RESET ----- */
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	font-size: 16px;
	background-color: #e2efff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body,
select,
option,
button {
	font-family: "Source Sans Pro", sans-serif;
}

header {
	background-color: #1a1a1c;
	text-shadow: 0 -1px #0a0a0a;
	width: 100%;
	padding: 1.8rem 2.2rem;
	display: grid;
	justify-content: start;
	align-items: center;
}

#brand-name {
	color: #ededed;
	font-family: "Reggae One", cursive;
	flex-shrink: 1;
}

.tagline {
	color: #b3b3b3;
	font-family: "Oleo Script", cursive;
	flex-shrink: 1;
}

header svg {
	fill: #ededed;
	width: 3.2rem;
	margin-left: 1.4rem;
	grid-row: 1 / span 2;
	grid-column: 2 / span 1;
}

h2,
.category-description {
	
	width: 100%;
	max-width: 640px;
	padding: 2.5rem;
	transform: translateY(2.2rem);
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	color:#fff;
	 animation: example 15s ease infinite;
	 
}
@keyframes example {
  	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h2 {

	font-family: arial;
    letter-spacing:1px;
	/* font-size: 2rem; */
	padding-bottom: 1rem;
	margin-bottom: 0;
	border-radius: 2.7rem 2.7rem 0 0;
	
}

.category-description {
	color: rgba(0, 0, 0, 0.45);
	font-family: "Atma", cursive;
	font-size: 1.25rem;
	padding-top: 0;
	padding-bottom: 4rem;
	margin-top: 0;
	border-radius: 0 0 2.7rem 2.7rem;
}

.item {
	background-color: rgba(255, 255, 255, 0.5);
	width: 95%;
	max-width: 95%;
	padding: 2.8rem;
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	border-radius: 1.7rem;
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
	transform: translateY(-1rem);
	backdrop-filter: blur(1.5rem);
}

.item:last-child {
	margin-bottom: 0.5rem;
}

.item h3 {
	font-size: 1.5rem;
	font-weight: bold;
	
	margin-bottom: 2rem;
}
.item img {
	margin-right:2px;
}

.item figure {
	width: 100%;
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 1.5rem;
}

.item figure img {
	height: 320px;
	display: block;
}

.description {
	color: rgba(255, 255, 255, 0.7);
	background-color: rgba(0, 0, 0, 0.5);
	width: calc(100% - calc(2.8rem * 2));
	height: 320px;
	line-height: 1.75rem;
	padding: 2.5rem;
	position: absolute;
	top: calc(2.8rem + 3.3rem);
	left: 2.8rem;
	overflow: auto;
	opacity: 0;
	border-radius: 1.5rem;
	transition: opacity 200ms ease-out;
}

.item figure:hover + .description,
.description:hover {
	opacity: 1;
}

.item button {
	width: 100%;
    color: #fff;
    /* font-size: 1.5rem; */
    font-weight: bold;
    text-shadow: 0 -1px #fffffff;
    background: dodgerblue;
    padding: 0.8rem 1.2rem;
    border: solid 1px #fff;
    outline: none;
    border-radius: 10px;
    transition: filter 500ms ease-out;
}

.item button:hover {
	filter: brightness(90%);
}

.item button:active {
	filter: brightness(80%);
}

.price {
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
}

.special {
	margin-bottom: 0.5rem;
}

input {
	padding: 0.8rem 1.2rem;
	border: solid 1px #efefef;
	margin-bottom: 1.2rem;
	outline: none;
	border-radius: 0.75rem;
	transition: box-shadow 200ms ease-out;
	
}

select:focus,
select:active {
	box-shadow: 0 0 0 0.25rem rgba(43, 153, 255, 0.5);
}

label {
	margin-bottom: 0.7rem;
}
.footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: dodgerblue;
    color: white;
    text-align: center;
    padding: 6px;
    display: block;
    align-items: center;
    justify-content: center;
    letter-spacing: 2px;
  }
  .footer a{
    text-decoration: none;
    color:#fff;
    font-family: 'Pacifico', cursive;
  }

  .overlay {
    display:none;
    z-index:1;
	position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
	backdrop-filter: blur(5px);
	padding: 1em;
	border: 1px solid rgba(255,255,255,.4);
	/* border-radius: 10px; */
	box-sizing: border-box;
    background: radial-gradient(rgba(40, 38, 38, 0.133) 30%, #fff4);
	font: 150%/1.6 sans-serif;
	text-align: center;
	box-shadow: -1px -1px 10px rgba(255,255,255,.3) inset,
		2px 2px 20px rgba(0,0,0,.5);
	text-shadow: 0 1px 1px rgba(255,255,255,.6);
}
 

.x{
      background: #fff;
   position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
 box-shadow: -1px -1px 10px rgba(255,255,255,.3) inset,
		2px 2px 20px rgba(0,0,0,.5);
	text-shadow: 0 1px 1px rgba(255,255,255,.6);
  	border: 1px solid rgba(255,255,255,.4);
	border-radius: 10px;
	padding:10px;
	height: 100%;
    width: 80%;
    /* margin-top: 50px; */
    padding-top: 50px;
}