.converter-container{display:flex;justify-content:center;align-items:center;box-shadow:var(--box-shadow-default);border-radius:10px;background-color:#fff;width:700px;height:400px}.converter{width:80%}.color-view,.converter-box{margin:10px auto;box-shadow:-1px 1px 3px -1px rgba(50,50,50,.5);border-radius:8px;width:100%;height:60px}.color-view{background:#000}.converter-box{display:flex;align-items:center;background-color:#e6e6e6}.color-type{margin:0 12px;border-radius:5px;background-color:#111;padding:4px 8px;width:30px;color:#fff;font-weight:600;font-size:1.2rem}.color-value{display:inline-block;outline:0;border:none;border-bottom:1px solid #d3d3d3;border-radius:5px;background-color:#fff;width:100%;height:30px;color:gray;font-weight:500;text-align:center}.convert-button{margin-left:10px;box-shadow:-1px 0 4px -2px #646464;border:none;border-radius:0 6px 6px 0;background-color:#dcdcdc;width:80px;height:100%}.convert-button:hover{background-color:#d2d2d2}.convert-button .tool-icon-animation{animation:tool-icon-animation 1s ease-in-out}@keyframes tool-icon-animation{50%{transform:rotate(420deg)}100%{transform:rotate(360deg)}}@media (max-width:868px){.converter-container{padding:15px 0;width:500px;height:auto}.converter{padding:0 5%;width:100%}}@media (max-width:576px){.converter-container{margin:0 10px;width:100%}}