*,
*::before,
*::after{
    box-sizing:border-box;
}

body{
    width:550px;
    height:550px;
    margin:0px auto;
    padding:0px;
    background-color:#1F2937;
}

/* header-section */

header{
    width:550px;
    height:90px;
    background:#1F2937;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

#get-color{
    width:61px;
    height:43px;
    padding:0px;
    border:none;
    cursor:pointer;
}

#get-scheme{
    height:fit-content;
    width:312px;
    padding:0.8125em 0.5625em;
    border-radius:6px;
    background:#1F293A;
    color:#D1D5DB;
    box-shadow:0px 0px 1px;
    font-family: "Inter", sans-serif;
    font-size:1rem;
    line-height:24%;
}

#get-color-scheme-btn{
    width:123px;
    height:42px;
    border-radius:4px;
    background-color:#3D4B60;
    color:#FFFFFF;
    border:none;
    font-family: "Inter", sans-serif;
    font-size:0.75rem;
    line-height:16%;
    cursor:pointer;
}

/* colors section */

#colors-section{
    width:550px;
    height:auto;
    display:flex;
    flex-wrap:wrap;
}

.separate-color{
    width:110px;
    max-width:100%;
}

.color-scheme{
    height:414px;
    width:110px;
    cursor:pointer;
}

.hex-code{
    font-family: "Inter", sans-serif;
    line-height:24%;
    font-size:0.75rem;
    text-align:center;
    color:#D5D4D8;
    margin:1.25em 0em;
    cursor:pointer;
}

/* change count section */

#count-section{
    display:flex;
    margin:0.625em auto;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

#color-count-input{
    width:200px;
    padding:0.3125em 0.625em;
    border-radius:5px;
}

#change-color-count{
    background-color:#16DB99;
    border:none;
    padding:0.5em 0.9375em;
    border-radius:5px;
    cursor:pointer;
    color:#1F2937;
}

label{
    color:#D1D5DB;
    font-size:1.125rem;
}

/* message */

#message{
    text-align:center;
    color:#16DB99;
    font-size:1.1rem;
}