@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap");
:root {
--background: #1f2937;
--button-color: #3d4b60;
--font-color: #fff;
}
body {
font-family: "Inter", sans-serif;
font-size: 400;
background: var(--background);
}

.container {
width: 70%;
max-width: 550px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: flex-start;
align-items: center;
}
.picker {
width: 100%;
display: flex;
justify-content: space-around;
align-items: flex-center;
margin-bottom: 1.5rem;
}
button {
background: var(--button-color);
color: var(--font-color);
border-radius: 4px;
border: 0;
padding: 0.5rem 1rem;
display: block;
margin-right: 5px;
}
select {
display: block;
background: var(--font-color); /* white */
background: #ffffff;
border: 1px solid #d1d5db;
box-sizing: border-box;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 6px;
width: 15rem;
padding: 0.2rem;
}
select option {
background-color: #1f2937;
padding: 4px 0px;
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1),
0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(0, 0, 0, 0.05);
border-radius: 6px;
}

select option:checked {
margin-left: 25px;
border: 1px solid #4f46e5;
}
select option:not(:checked) {
background-color: #1f2937;
}
input[type="color" i] {
width: 51px;
height: 34px;
border: 0.5px solid #313131;
display: block;
margin-left: 5px;
}
.results {
width: 100%;
display: flex;
height: 90vh;
}
.color-results {
display: flex;
flex-direction: column;
width: 25%;
}
.color-box {
height: 80vh;
}
p {
color: #fff;
text-align: center;
font-size: 500;
}