body{margin:0;font-family:Arial,sans-serif;background-color:#34495e;color:#333}.app{display:flex;height:100vh}.app-header{background-color:#2c3e50;display:flex;flex-direction:row;width:100%}.header-title{font-size:1.5em;margin-bottom:20px}.sidebar{flex-direction:column;background-color:#34495e;padding:20px;width:300px;box-shadow:2px 0 5px #0000001a;color:#fff}.sidebar label,.sidebar .button{margin-bottom:15px}.slider{width:100%}.button{background-color:#1abc9c;padding:15px;margin:10px 0;width:100%;text-align:center;cursor:pointer;border:none;border-radius:5px;font-size:1em;transition:background-color .3s ease}.button-normal{background-color:#1abc9c}.button-sorting{background-color:#3f3f3f}.button:hover{background-color:#186655}.description{background-color:#ecf0f1;width:25%;padding:15px;box-shadow:0 0 #0000;margin-left:20px;margin-right:0}.array-container{display:flex;align-items:flex-end;justify-content:center;height:60h;width:calc(100% - 320px);padding:20px;background-color:#ecf0f1;margin-left:5px;box-shadow:0 0 #0000001a}.array-bar{background-color:#40e0d0;margin:0 2px;width:80px;transition:height .2s ease}.footer{background-color:#2c3e50;color:#fff;padding:10px 20px;position:fixed;bottom:0;width:100%;text-align:center;font-size:.8em;box-shadow:0 -2px 5px #0000001a}@media (max-width: 768px){.app-header{flex-direction:column;align-items:center}.sidebar{width:85%;padding:10px;box-shadow:none}.description{width:90%;margin:10px 0}.array-container{width:100%;margin-left:0}}@media (max-width: 480px){.header-title{font-size:1.2em}.button{padding:10px;font-size:.9em}.slider{width:80%}}