body{
    font-family: "Inter Tight", sans-serif;
    font-size: 0.75em;
    padding: 1em;
    color: #374151;
    box-sizing: content-box;
}

main{
    display: flex;
    flex-direction: column;
}

header.get-color-info{
    display: flex;
    justify-content:safe;
    gap: 0.5em;
}

header.get-color-info, .colorhex{
    padding: 1em;
}

.text-center{
    text-align: center;
}

.colorhex{
    background-color: white;
}

.colorhex:hover, colorhex:focus{
    cursor: pointer;
}

input.color-input, select.mode-select, button.get-scheme-btn{
    border: #D1D5DB 1px solid;
    font-size: inherit;
}

input.color-input{
    width: 3.8125em;
    height: 2.625em;
}

.border-radius{
    border-radius: 5px;
}

.padding{
    padding: 0.5em 0.75em;
}

.get-scheme-btn{
    background-color: white;
    
}

.color-hue{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "color1 color2 color3 color4 color5";
    min-height: 75vh;
}

#color1{
    grid-area: color1;
    background-color: #2E2E2F;
}
#color2{
    grid-area: color2;
    background-color: #4B4D4F;
}
#color3{
    grid-area: color3;
    background-color: #5C5F61;
}
#color4{
    grid-area: color4;
    background-color: #757779;
}
#color5{
    grid-area: color5;
    background-color: #939596;
}

.color-background{
    display: flex;
    justify-content: end;
    flex-direction: column;
}

@media (min-width: 768px) {
    body{
        font-size: 1em;
    }
}