html {
    font-size: 16px;
}

body {
    margin: 0;
    background-color: #282c34; 
     font-family: "Momo Trust Display", sans-serif;
    font-weight: 400;
    color: #F5F5F5;
}


.container {
    max-width: 34.375rem; /* 550px */
    width: 95%; 
    margin: 2rem auto; 
}


header {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    background-color: #1F2937;
    padding: 1.25rem; /* 20px */
    border-radius: 0.5rem; /* 8px */
    gap: 0.75rem; /* 12px */
}

.seed-color-input,
.scheme-input,
.get-color-btn {
    font-family: inherit;
    font-size: 1rem;
    height: 2.625rem; /* 42px */
    border: 1px solid #4D5562;
    background-color: #1F2937;
    color: #D5D4D8;
    border-radius: 0.375rem; /* 6px */
    cursor: pointer;
    transition: all 0.2s ease-in-out; 
}

.seed-color-input {
    width: 3.75rem; /* 60px */
    padding: 0.3rem;
    box-sizing: border-box;
}

.scheme-input {
    flex-grow: 1; 
    padding: 0 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D5D4D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.2em;
}

.get-color-btn {
    padding: 0 1.25rem;
    background-color: #3D4B60;
    font-weight: 500;
    border-color: #3D4B60;
}

.seed-color-input:hover,
.scheme-input:hover {
    border-color: #727a88;
}

.get-color-btn:hover {
    background-color: #4F5E74;
    border-color: #4F5E74;
}

:is(.seed-color-input, .scheme-input, .get-color-btn):focus-visible {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}



#color-palette {
    display: flex;
    height: 25rem; /* 400px */
    margin-top: 1.5rem; 
    border-radius: 0.5rem; 
    overflow: hidden; 
}


#color-palette > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.color-palette {
    flex-grow: 1;
}

#color-palette p {
    text-align: center;
    padding: 0.75em;
    background-color: #1F2937;
    margin: 0;
    font-size: 0.875rem;
    color: #D5D4D8;
    cursor: pointer;
    transition: background-color 0.2s;
}

#color-palette p:hover {
    background-color: #3D4B60; 
}