html, body {
    margin: 0;
    padding: 0;
    font-family:Inter, sans-serif;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

#input-container{
    font-family:Inter, sans-serif;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin:1.25em;
    gap:12px;
    justify-items: center;
    max-width: 100%;
}

#input-form{
    display: contents;
}

#color-picker{
width: minmax(0, 61px);
height: 42px;
border-width: 0.5px;
background-color: #E5E5E5;
border: 0.5px solid #D1D5DB;
grid-column: 1;

}

#color-scheme{
width: minmax(auto, 312px );
height: 42px;
border-radius: 6px;
border-width: 1px;
border: 1px solid #D1D5DB;
box-shadow: 0px 1px 2px 0px #0000000D;
grid-column: 2;
}


#get-color{
width: minmax(0, 123px);
height: 42px;
border-radius: 4px;
border-width: 1px;
border: 1px solid #D1D5DB;
box-shadow: 0px 1px 2px 0px #0000000D;
background-color: transparent;
font-family: Inter;
font-weight: 500;
font-size: 12px;
line-height: 1rem;
letter-spacing: 0%;
}

#colors{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 1fr;
    height:70vh
}

.color{
    height: 70vh;
    width: 20vw;
}
#color1{
    background-color: #F55A5A;
}
#color2{
    background-color: #2B283A;
}
#color3{
    background-color: #FBF3AB;
}
#color4{
    background-color: #AAD1B6;
}
#color5{
    background-color: #A626D3;

}
.row2{
    grid-row:2;
    text-align: center;
    font-family: Inter;
    font-weight: 500;
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0%;
    color:#2B283A;
    text-transform: uppercase;

}