* {
	padding:0;
	margin:0;
	text-align:center;
	font-family:sans-serif;
}

body {
	min-height:100vh;
	background-color:#fafaeb;
	color:#121027;
}

.center-flex {
	display:flex;
	align-items:center;
	justify-content:center;
}

header {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	width:100%;
	border-bottom:solid #c4dac9 8px;
}

.flex-row {
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:6px;
}

.icon {
	width:20px;
	height:20px;
}

.social {
	background-color:#d2f2d2;
	text-decoration:none;
	color:inherit;
	padding:4px 6px;
	border-radius:20px 0 0 20px;
}

#favicon {
	width:40px;
	height:40px;
}

h1 {
	font-size:2.5rem;
}

#app {
	width:100%;
	padding-top:15px;
}

.main-list, #sub-list-div {
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
}

.main-list-element {
	width:300px;
	height:50px;
	background-color:#d5ebda;
	border-left:solid #c4dac9 8px;
	border-radius:0 10px 0 0;
	outline:solid #c4dac9 1.5px;
	cursor:pointer;
}

.main-list-element:hover {
	background-color:#c4dac9;
	border-left:solid #b3c9b8 8px;
	outline:solid #b3c9b8 1.5px;
}

.create-list-button {
	position:fixed;
	bottom:50px;
	right:40px;
	width:48px;
	height:auto;
	border-radius:50%;
	cursor:pointer;
	background-color:#121027;
}

.create-list-div {
	position:fixed;
	top:0px;
	width:100%;
	height:100%;
	background-color:#c4dac9aa;
	-webkit-backdrop-filter:blur(3px); 
	backdrop-filter:blur(3px);
}

#create-list-sub-div {
	width:270px;
	height:100px;
	background-color:#c4dac9;
	border:solid #a2b8a7 1.5px;
	gap:10px;
	position:relative;
}

#main-list-input, #sub-list-input {
	width:120px;
	height:30px;
	border:none;
	outline:none;
	background-color:#f4f1de;
 }

#main-list-create-button, #sub-list-add-button {
	width:55px;
	height:30px;
	border-radius:0;
	border:none;
	background-color:#a2b8a7;
	cursor:pointer;
}

#close-img {
	width:32px;
	height:32px;
	position:absolute;
	right:0;
	top:0;
	background-color:#a2b8a7;
	cursor:pointer;
}

.list-header {
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	background-color:#c4dac9;
}

.list-header img {
	background-color:#a2bda7;
	cursor:pointer;
	opacity:.6;
}

.hide {
	display:none;
}

.sub-list {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
	width:100%;
}

.item-container {
	width:55%;
	height:40px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-between;
	background-color:#fdfdee;
}

.item-container img {
	width:30px;
	height:auto;
	cursor:pointer;
	opacity:.5;
}

.item-container img:hover {
	opacity:.8;
}
 
@media(max-width:650px) {
	.item-container {
		width:95%;
	}
}