:root {
    --bg-color: #FFFFFF;
    --btn-color:#FFFFFF;
    --text-color:#111827;
}
*, *::after, *::before {
    box-sizing: border-box;
}
body {
    margin:0;
    padding:0;
    background-color: var(--bg-color);
    color:var(--text-color);
    font-family: 'Inter', sans-serif;
    min-width: 550px;
}
/* typography */
h1 {
    font-size: 1.875rem;
    text-align: center;
    margin-bottom:0;
}
.code, button {
    font-weight: 500;
    font-size: 0.75rem;
}
.code {
    color:#2B283A;
}
/* layout */
main {
    margin:0 auto;
    width: 550px;
    height: 550px;
    border-radius: 6px;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 5fr;
}
/* form */
form {
    display: flex;
    gap:12px;
    align-items: center;
    justify-content: center;
}
form input, form select, form button {
    height: 46%;
}
input[type="color"]{
    width: 11%;
    border: 0.5px solid #D1D5DB;
}
select {
    width: 56%;
    padding: 9px 13px;
    border-radius: 6px;
    padding-right:30px;
    border: 1px solid #D1D5DB;
    color:inherit;
    appearance: none;
    background: url('Icon.png') no-repeat;
    background-size: 14px; 
    background-position: 98% 50%;
    }
select option {
        color: inherit;
        background-color: var(--bg-color);
}
    
button {
    background-color: var(--btn-color);
    border: 1px solid #D1D5D8;
    padding: 13px 11px 13px 11px;
    border-radius:4px;
}
button:hover,button:focus {
    background-color: #F1F5F9;
}
/* color container */
.color-container {
    display:grid;
    grid-template-columns: repeat(5, 1fr);
}
.color-box {
    position:relative;
    display:flex; 
    flex-direction: column;
}
.copied {
    position:absolute;
    bottom:55px;
    right:10px;
    left:10px;
    padding:10px;
    background-color: rgba(91, 91, 91, 0.493);
    color:white;
    border-radius: 5px;
    display:none;
    text-align: center;
}
.color-display {
    height: 90%;
} 
.code {
    height: 10%;
    align-content: center;
    margin:0 auto;
}
/* Window Theme */

    @media(prefers-color-scheme:dark){
        :root {
            --bg-color: #1F2937;
            --btn-color:#3D4B60;
            --text-color: #FFFFFF;
            --tick-color:#5A8DFF;
        }
        button, select {
            color:inherit;
        }
            .code {
            color: #D5D4D8;}

        button {
            border:none;
            background-color: var(--btn-color);
        }
            button:hover,button:focus {
        color: var(--btn-color);}
}
    
    @media(prefers-color-scheme:light){
        :root {
            --bg-color: #FFFFFF;
            --btn-colorline:#FFFFFF;
            --text-color:#374151;
            --tick-color: #4F46E5;
        }
    }