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

a {
	text-decoration:none;
	color:#002b5b;
}

body {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
}

header, #header-left, #adder-sub {
	display:flex;
	flex-direction:row;
	align-items:center;
}

#adder-sub {
	justify-content:center;
	width:100%;
}

header {
	width:100%;
	background-color:#002b5b;
	color:#e4dccf;
	height:50px;
	font-size:.75rem;
	justify-content:space-between;
}

#header-left {
	justify-content:flex-start;
	margin-left:10px;
	gap:10px;
}

#header-right {
	margin-right:10px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:10px;
}

#header-right button {
	height:35px;
	width:80px;
	border-radius:5px;
	background-color:#ea5455;
	border:solid #f9f5eb 2px;
	color:#002b5b;
}

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

#app {
	gap:10px;
	width:98%;
	min-height:75vh;
	position:relative;
	display:flex;
	flex-direction:row;
	align-items:flex-start;
	justify-content:center;
}

#color-container {
	width:100%;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex-flow:wrap;
}

.color {
	width:60px;
	height:60px;
	background-color:yellow;
	border-radius:2px;
	border:solid white 2px;
	outline:solid black 2px;
}

.color:hover {
	outline:double black 4px;
}

#add-color-popup {
	display:none;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	gap:25px;
	flex-flow:wrap;
	border:solid #435676 2px;
	border-radius:10px;
	position:fixed;
	top:15vh;
	background-color:#f9f5eb;
	width:250px;
	height:320px;
	padding:20px;
}

#add-color-popup input[type = "text"] {
	background-color:#e4dccf;
	border-radius:5px;
	border:solid #002b5b 2px;
	width:190px;
	height:30px;
	color:#002b5b;
}

#add-color-popup input[type = "text"]:focus {
	border:solid transparent 2px;
	outline:solid #002b5b 2px;
}

::placeholder {
	color:#333;
}


#add-color-popup input[type = "range"] {
	width:250px;
	height:10px;
	-webkit-appearance:none;
	appearance:none;
	outline:none;
	border-radius:10px;
}

#add-color-popup input[type = "range"]::-webkit-slider-thumb {
	width:15px;
	height:15px;
	appearance:none;
	border-radius:50%;
	background:#e4dccf;
	border:solid #002b5b 2px;
}

#add-color-popup input[type = "range"]::-moz-range-thumb {
	border-radius:50%;
	width:14px;
	height:14px;
	cursor:pointer;
	background:#e4dccf;
	border:solid #002b5b 2px;
}

#slider-red {
	background-image:linear-gradient(to right, #000000, #ff0000);
}

#slider-green {
	background-image:linear-gradient(to right, #000000, #00ff00);
}

#slider-blue {
	background-image:linear-gradient(to right, #000000, #0000ff);
}



#add-color-popup button {
	width:80px;
	height:30px;
	color:#002b5b;
	background-color:#ea5455;
	border:solid #002b5b 2px;
	border-radius:5px;
}

#color-details-popup {
	width:280px;
	height:320px;
	background-color:#f9f5eb;
	position:fixed;
	top:25vh;
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
	border-radius:10px;
	border:solid #002b5b 2px;
}

#color-sub-popup {
	width:90%;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:space-around;
	gap:10px;
}

#color-sub-popup button {
	width:80px;
	height:30px;
	border:solid #002b5b 2px;
	border-radius:5px;
	border-radius:5px;
	background-color:#ea5455;
	border:solid #002b5b 2px;
	color:#002b5b;
}

#color-details-popup p {
	color:#002b5b;
}

#color-sub-popup button:active,#add-color-popup button:active, #header-right button:active {
	background-color:#e4dccf;
}

#color-popup, #adder-color-box {
	width:100px;
	height:100px;
	border:solid white 2px;
	outline:solid black 2px;
	border-radius:5px;
}