body{font-family:Arial,sans-serif;height:100vh;width:100vw;margin:0}#app{height:100%;display:flex;flex-direction:column;justify-content:center}#container{height:100%;display:flex;flex-direction:column}#navbar{flex-grow:1;max-height:10%;min-height:40px;background-color:#222;color:#fff;display:flex;align-items:center}#navbar div{padding:5px}#colors-list{display:flex;justify-content:space-evenly}#colors-list div{height:100px;width:100px;border-radius:50%;margin-top:40px;transition:all 1s ease}.selected{border:5px solid black}.red{background-color:#cf000f}.orange{background-color:#eb6b56}.yellow{background-color:#ffc153}.green{background-color:#27ae60}.blue{background-color:#1d4fda}.violet{background-color:#462446}.black{background-color:#000}.white{background-color:#fff}