.parent{display:flex;align-items:end;justify-content:center;gap:7px;width:100%;height:80vh;position:relative}.box{transition:background-color .2s linear;width:50px;background-color:#d4a373;font-family:poppins,serif;font-weight:600;display:flex;align-items:end;color:#231942;font-size:15px;justify-content:center;border-top-left-radius:5px;border-top-right-radius:5px}@keyframes fadeIn{0%{transform:translate(-50px)}}.left{animation:fadeIn .5s ease-in-out 1}@keyframes fadeout{0%{transform:translate(50px)}}.right{animation:fadeout .5s ease-in-out 1}.parent h1{position:absolute;top:0;font-family:poppins,serif;color:#03045e}.sort{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:20px;height:100vh}select{padding:10px;font-family:poppins,serif;background-color:#d8f3dc;font-size:15px;font-weight:600;border-radius:7px;box-shadow:2px 4px #52b788;outline:none;cursor:pointer}.button{all:unset;text-align:center;padding:10px;font-family:poppins,serif;font-size:15px;font-weight:600;border-radius:7px;cursor:pointer}.gen{background-color:#ffd6ff;box-shadow:2px 4px #e4c1f9}.start{box-shadow:2px 4px #dd2d4a;background-color:#f49cbb}.sort .input{all:unset;font-family:poppins,serif;font-weight:600;color:#000;border-radius:7px;box-shadow:2px 4px #2c7da0;font-size:15px;padding:10px;background-color:#a9d6e5;cursor:pointer}.hov{transition:all linear .3s}.hov:hover{scale:1.05}.stop{background-color:#1b263b;color:#fff;box-shadow:2px 4px #0d1b2a}.main{display:flex}