html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #EEEEEE;
    /*background-color: #0F0E0E*/
}

#container {
    height: 550px;
    width: 550px;
    background-color: #FFFDFE;
    margin: 50px auto;
    box-sizing: border-box;
}

#top-container {
    height: 88px;
    width: 548px;
    border: 1px solid #D1D5DB;
}

#color-form {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 20px;
}

.color-picker {
    height: 42px;
    width: 61px;
}

.dropdown {
    height: 42px;
    width: 312px;
}

.btn {
    height: 42px;
    width: 123px;
}

#colors-container {
    display: flex;
}

.color-box {
    height: 414px;
    width: 110px;
    text-align: center;
}

.color-hex {
    text-align: center;
    margin: 7px 0px;
}

.box1 {
    background-color: #6979E1;
}

.box2 {
    background-color: #7281E5;
}

.box3 {
    background-color: #E9DB7A;
}

.box4 {
    background-color: #EDDF84;
}

.box5 {
    background-color: #F0E38D;
}