index.css

body{
    font-size: 1rem;
    font-family: 'Shippori Antique B1', sans-serif;
}
*{
    box-sizing: border-box;
    color: #FFFFFF;
}
/* sizing of main sections */
#container{
    width: 558px;
    height: 550px;
    margin: 0 auto;
    background-color: #1F2937;
    border-radius: 10px;
    overflow: hidden;
}
.navbar{
    height: 90px;
}
.large{
    height: 414px;
    border-radius: 10px;
}
.small{
    height: 46px;
}
/* flex container for organizing subsections */
.flex-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  
    overflow: hidden;  
}
/* navbar organization */
.navbar .flex-container{
    min-height: 90px;
    justify-content: space-evenly;
    align-items: center;
}
.color-picker{
    width: 51px;
    height: 34px;
    border: none;
    padding: none;
    border-radius: 5px;
}
.scheme-picker{
    width: 312px;
    height: 42px;
    background-color: #1F2937;
    border-radius: 3px; 
    font-size: 1.05rem;   
}
.btn{
    width: 123px;
    height: 42px;
    padding: 0;
    border: none;
    background-color: #3D4B60;
    font-size: 0.8rem;
    border-radius: 5px;
}
.btn:hover,
.btn:focus{
    background-color: #6487b8;
    cursor: pointer;
}
/* Colors display */
.color-display{
    width: 110px;
}
.color-display:hover,
.color-display:focus{
    /* border-radius: 10px; */
    border: solid rgb(255, 255, 255, .5) 10px;
}
/* Hex-codes display */
.color-code{
    width: 110px;    
    text-align: center;
    line-height: 46px;           /**setting line-height equal to height of element will center text vertically. Because it is a flexbox, the divs are stretching all the height of parent flexbox. Class 'small' is giving flexbox a height of 46 px */ 
    font-size: 0.8rem;
}
.color-code:hover,
.color-code:focus{
    font-size: .95rem;
}