* {
	margin: 0;
	padding: 0;
	list-style-type:none;
	-webkit-appearance:none;
	outline: none;
	box-sizing: border-box;

}
:root {
	color-scheme: only light;

	--white: #fff;
	--background-color: #fdfcfe;
	--card-background: var(--white);
	--header-text: var(--white);
	--text-color: #202050;
	--card-border: #f1eef3;

	--input-background: #f9f6fc;
	--input-border: #ece3f9;

	--pink: #f11793;
	--purple: #773ce3;
	--yellow: #feab00;
	--green: #35bd88;
	--blue: #3a82f9;
	--red: #ff3843;
}




@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: normal;
	src: url('/fonts/inter/InterVariable.woff2') format('woff2');
}

body {
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	line-height: 1.5;
	background-color: var(--background-color);
}

body, li, .item-details, .search-bar, .categories, .select, .footer li {
	position: relative;
}

body, input, select, textarea, button {
	font-family: 'Inter', Arial, -apple-system, sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: var(--text-color);
}
header, .footer-bar {
	position: fixed;
	right: 0;
	left: 0;

}
header {
	background-color: var(--pink);
	background: linear-gradient(139deg, var(--purple) 12%, var(--pink) 100%);
	height: 145px;
	color: var(--header-text);
	top: 0;
	z-index: 5;
}
.logo a {
	color: var(--header-text);
}

li svg, .logo svg, .search-bar svg, .layout svg, .select svg {
	width: 20px;
	height: 20px;
	fill:none;
	stroke: currentColor;
	stroke-width: 1.75px;
	stroke-linecap:round;
	stroke-linejoin:round;
	pointer-events: none;
}

.logo {
	padding: 13px;
}
.logo svg {
	width: 44px;
	height: 44px;
	stroke-width: 1px;
	margin-right: 4px;
}
.logo span {
	font-size: 24px;
}

.action-bar {
	position:absolute;
	background-color: var(--background-color);
	color: var(--text-color);
	left: 0;
	right: 0;
	bottom: 0;
	height: 75px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	padding: 16px 14px 0 14px;
	z-index: 8;
}
.search-bar, .select {
	color: var(--purple);
}
.search-bar, .categories {
	width: 32%;
}
.search-bar input, .categories select {
	width: 100%;
	background-color: var(--input-background);
	border: 1px solid var(--input-border);
	color: var(--purple);
	border-radius: 14px;
	height: 50px;
	line-height: normal;
}
.search-bar input {
	padding: 0 44px;
}
.categories select {
	padding: 0 12px;
}
.categories {
	margin-left: 1%;
}
.select svg {
	position: absolute;
	top: 14px;
	right: 14px;
}
.search-bar label, .cancel, select {
	cursor:pointer;
}
.search-bar label, .cancel {
	display:block;
	position:absolute;
	width: 44px;
	height: 48px;
}
.search-bar label {
	top: 1px;
	left: 1px;
}
.search-bar label svg, .cancel svg {
	margin: 14px;
}
.cancel {
	color: var(--red);
	top: 1px;
	right: 1px;
}

.results {
	padding: 155px 14px 14px 14px;
}
li, li img, .storage-container span, .storage-container svg, .logo span, .logo svg, .search-bar, .categories {
	display:inline-block;
}
.storage-container span, .storage-container svg, .logo span, .logo svg {
	vertical-align: middle;
}
li, li img, .search-bar, .categories {
	vertical-align:top;
}
ul.items, ul.footer {
	margin-left: -1%;
}
.items li {
	background-color: var(--card-background);
	width: 19%;
	margin: 0 0 14px 1%;
	padding: 18px;
	border-radius: 12px;
	border: 1px solid var(--card-border);
	box-shadow: 0px 0px 5px 2px rgba(241,238,243,0.8);
	color: var(--blue);
}

li.green {
	color: var(--green);
}
li.blue {
	color: var(--blue);
}
li.yellow {
	color: var(--yellow);
}
li.pink {
	color: var(--pink);
}

.items li img {
	display:block;
	margin: 16px auto;
	height: 70px;
}

.status span, .id span {
	display: inline-block;
	background: color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 10px;
	padding: 0 11px;
	line-height: 31px;
	font-weight: 600;
	font-size: 13px;
}

.storage-container {
	position:absolute;
	right: 24px;
	top: 16px;
}
.storage-container span {
	margin-left: 4px;
}
.item-details {
	text-align:center;
	margin: 0 -24px -18px -24px;
	padding: 18px 0;
	border-bottom-right-radius: 11px;
	border-bottom-left-radius: 11px;
	min-height: 130px;
}
.title {
	color: var(--text-color);
	padding: 0 18px;
	max-height: 51px;
	overflow:hidden;
}
.status {
	width: 100%;
	position:absolute;
	bottom: 14px;
}


.footer-bar {
	padding: 14px 140px 0 14px;
	bottom: 0;
	height: 120px;
	background-color: var(--white);
}
.footer li {
	width: 24%;
	margin-left: 1%;
	background: color-mix(in srgb, currentColor 5%, transparent);
	border-radius: 12px;
	max-height: 92px;
	padding: 14px;
}


@media screen and (max-width:1270px) {
	.items li {
		width: 24%;
	}
}

@media screen and (max-width:970px) {
	.items li {
		width: 49%;
	}
	.search-bar {
		width: 50%;
	}
	.categories {
		width: 49%;
	}
}

@media screen and (max-width:520px) {
	.search-bar, li {
		display:block;
	}

	.search-bar, li {
		width: auto;
	}
	.categories {
		display:none;
	}

}

::placeholder {
	color: currentColor;
	opacity: .5;
}