#harps{width:200px;height:60px;background:#fff;position:fixed;top:30px;left:30px;display:flex;justify-content:center;align-items:center;border:1px outset #000;cursor:col-resize}.smooth{transition:all .5s ease-in-out}.smooth-slow,.string i{transition:all 2s ease-in-out}.string{width:5vw;height:100%;display:block;float:left;cursor:e-resize}.string i{display:block;float:left;width:10%;z-index:9000;pointer-events:none}.string i:nth-child(20){height:400%;margin-top:0;background-color:#f5f}.string i:nth-child(19){height:361%;margin-top:0;background-color:#ff54ff}.string i:nth-child(18){height:324%;margin-top:0;background-color:#ff53ff}.string i:nth-child(17){height:289%;margin-top:0;background-color:#ff52ff}.string i:nth-child(16){height:256%;margin-top:0;background-color:#ff51ff}.string i:nth-child(15){height:225%;margin-top:0;background-color:#ff50ff}.string i:nth-child(14){height:196%;margin-top:0;background-color:#ff4fff}.string i:nth-child(13){height:169%;margin-top:0;background-color:#ff4eff}.string i:nth-child(12){height:144%;margin-top:0;background-color:#ff4dff}.string i:nth-child(11){height:121%;margin-top:0;background-color:#ff4cff}.string i:nth-child(10){height:100%;margin-top:0;background-color:#ff4bff}.string i:nth-child(9){height:81%;margin-top:0;background-color:#ff4aff}.string i:nth-child(8){height:64%;margin-top:0;background-color:#ff49f0}.string i:nth-child(7){height:49%;margin-top:0;background-color:#ff48d2}.string i:nth-child(6){height:36%;margin-top:0;background-color:#ff47b4}.string i:nth-child(5){height:25%;margin-top:0;background-color:#fa4696}.string i:nth-child(4){height:16%;margin-top:0;background-color:#c84578}.string i:nth-child(3){height:9%;margin-top:0;background-color:#96445a}.string i:nth-child(2){height:4%;margin-top:0;background-color:#64433c}.string i:nth-child(1){height:1%;margin-top:0;background-color:#32421e}.string:hover{height:95%}.string:hover i:nth-child(20){height:100%;margin-top:1100%;background-color:#ff1eff}.string:hover i:nth-child(19){height:95%;margin-top:1045%;background-color:#ff1dff}.string:hover i:nth-child(18){height:90%;margin-top:990%;background-color:#ff1cff}.string:hover i:nth-child(17){height:85%;margin-top:935%;background-color:#ff1bff}.string:hover i:nth-child(16){height:80%;margin-top:880%;background-color:#ff1aff}.string:hover i:nth-child(15){height:75%;margin-top:825%;background-color:#ff19ff}.string:hover i:nth-child(14){height:70%;margin-top:770%;background-color:#ff18ff}.string:hover i:nth-child(13){height:65%;margin-top:715%;background-color:#ff17ff}.string:hover i:nth-child(12){height:60%;margin-top:660%;background-color:#f016ff}.string:hover i:nth-child(11){height:55%;margin-top:605%;background-color:#dc15ff}.string:hover i:nth-child(10){height:50%;margin-top:550%;background-color:#c814ff}.string:hover i:nth-child(9){height:45%;margin-top:495%;background-color:#b413ff}.string:hover i:nth-child(8){height:40%;margin-top:440%;background-color:#a012ff}.string:hover i:nth-child(7){height:35%;margin-top:385%;background-color:#8c11ff}.string:hover i:nth-child(6){height:30%;margin-top:330%;background-color:#7810ff}.string:hover i:nth-child(5){height:25%;margin-top:275%;background-color:#640fff}.string:hover i:nth-child(4){height:20%;margin-top:220%;background-color:#500eff}.string:hover i:nth-child(3){height:15%;margin-top:165%;background-color:#3c0dff}.string:hover i:nth-child(2){height:10%;margin-top:110%;background-color:#280cff}.string:hover i:nth-child(1){height:5%;margin-top:55%;background-color:#140b96}*{box-sizing:border-box;font-family:"Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-weight:200;text-transform:uppercase;font-size:16px;letter-spacing:2px}html{min-height:100vh}body{overflow:hidden;height:100vh;width:100vw;margin:0;padding:0;background:#000}body *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;outline:0}