:root {
	--bg-color: #0d0001;
	--accent-color: #650a1d;
	--accent-color-2: #4f0615;
	--accent-color-3: #3b030d;
}

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: var(--bg-color);
	color: white;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	min-height: 100vh;
}

.content {
	padding-left: 20px;
	padding-right: 20px;
	flex: 1;
}

nav {
	display: flex;
	background-color: var(--accent-color);
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom:5px;
}
nav .logo {
	flex-grow: 1;
	text-align: center;
}
nav ul {
	display: flex;
	padding: 0;
	gap: 10px;
	list-style-type: none;
	align-items: center;
}
nav ul li a {
	color: white;
	text-decoration: none;
	background-color: var(--accent-color-2);
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
}
nav ul li a:hover {
	background-color: var(--accent-color-3);
}

.cart-icon{position:relative;}
    
nav .cart-icon span{display:flex;
    width:15px;
    height:15px;
    justify-content:center;
    align-items:center;
    background-color:red;
    color:white;
    border-radius:40%;
    position:absolute;
    left:32px;
    bottom:18px;
}

svg{
display:block;
margin-bottom:-8px;
padding-top:13px;
margin-right:10px;
width:50px;
color:black;
cursor:pointer;
}

footer {
	text-align: center;
	padding-top: 20px;
	width: 100%;
	background-color: var(--accent-color-2);
}