*{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:roobert-bold;src:url(fonts/RoobertBold.ttf)}@font-face{font-family:roobert-medium;src:url(fonts/RoobertMedium.ttf)}@font-face{font-family:roobert-semibold;src:url(fonts/RoobertSemiBold.ttf)}@font-face{font-family:roobert-light;src:url(fonts/RoobertLight.ttf)}body,html{height:100%;overflow-x:hidden}html{scroll-behavior:smooth}body{background-color:#fff}a,b,button,h1,h2,h3,i,input[type=file],input[type=password],input[type=submit],input[type=text],label,li,p,select,span,td,textarea,th{font-family:roobert-semibold;-webkit-font-smoothing:antialiased;color:#272737}a,b,button,i,input[type=file],input[type=password],input[type=submit],input[type=text],label,li,p,select,span,td,textarea,th{font-size:30px;letter-spacing:1px}.radioBox{display:inline-block;position:relative;padding-left:28px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radioBox:not(:first-child){margin-left:20px}.radioBox input{position:absolute;opacity:0;cursor:pointer}.radioBox .checkmark{position:absolute;top:0;left:0;height:22px;width:22px;background-color:#424357;border-radius:50%}.radioBox input:checked~.checkmark{background-color:#3f4558}.radioBox .checkmark:after{content:"";position:absolute;display:block;background:#999}.radioBox input:checked~.checkmark:after{background:#ee2d3e}.radioBox .checkmark:after{top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;border-radius:50%}.clsLoading{position:fixed;top:0;left:0;width:100%;height:100%;z-index:20;background-color:rgb(0 0 0 / .5)}.clsLoading img{display:inline-block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:5px;width:70px}audio{display:none}::-webkit-scrollbar{width:5px;height:7px}::-webkit-scrollbar-track{background-color:#2f3043}::-webkit-scrollbar-thumb{width:5px;background-color:#262734;border-radius:10px}.tunes{display:block;margin-left:10%;margin-top:-3%;height:365px}.brand{color:#ed2d3c;position:absolute;right:3%;top:7%;font-size:11px;transform:rotate(90deg)}.pg-content{position:relative;margin-top:-50px;margin-left:10%}.pg-content section{display:inline-table;vertical-align:top}.pg-content .mobile .input{margin-top:20px}.pg-content .mobile .input input[type=text]{font-family:roobert-medium;padding:15px;border:none;outline:0;background-color:#efefef;width:300px;font-size:15px;height:48px;color:#2f3043}.pg-content .mobile .input .btn-gen,.pg-content .mobile .input .btn-play,.pg-content .mobile .input .btn-reset{width:145px;height:48px;text-align:center;display:inline-table;vertical-align:bottom;padding:15px;border-radius:30px;background-color:#efc808;margin-left:15px;text-decoration:none;font-size:17px;color:#2f3043}.pg-content .mobile .input .btn-play{background-image:url(images/play.png);background-size:18px;background-position:center center;background-repeat:no-repeat;display:none}.pg-content .mobile .input .btn-reset{display:none;background-image:url(images/reset.png);background-size:18px;background-position:15px center;background-repeat:no-repeat;padding-left:30px}.pg-content .wave-share{margin-top:65px;display:none}.pg-content .wave-share .wave{width:430px}.pg-content .wave-share .replay-share{margin-top:65px;display:none;align-items:center}.pg-content .wave-share .replay-share div{display:inline-table;vertical-align:top}.pg-content .wave-share .replay-share div:not(:last-child){margin-right:15px}.pg-content .wave-share .replay-share div a:first-child{display:inline-table;vertical-align:top;background-repeat:no-repeat;background-position:center center;width:28px;height:28px}.pg-content .wave-share .replay-share div a:last-child{margin-left:7px;display:inline-table;vertical-align:top;padding:5px 12px;background-color:#efc808;text-decoration:none;outline:0;text-align:center;border-radius:30px;display:inline-block;font-size:17px}.pg-content .wave-share .replay-share .replay a:first-child{background-size:28px;background-image:url(images/replay.png)}.pg-content .wave-share .replay-share .share a:first-child{background-size:28px;background-image:url(images/share.png)}.pg-content .wave-share .replay-share .save a:first-child{background-size:36px;background-image:url(images/save-audio.png);width:40px}.pg-content .wave-share .download-text{display:none;font-size:16px;text-align:center;margin-top:15px}.keypad{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:25px;margin-left:150px;margin-top:40px}.keypad .key{display:block;width:80px;height:80px;border:1px;background-color:#2e2f42;border-radius:50%;text-align:center;color:#fff;text-decoration:none;padding-top:15px;font-size:40px;font-family:roobert-light;outline:0}.keypad .erase{outline:0;background-image:url(images/erase.png);background-repeat:no-repeat;background-position:center center;background-size:50px;text-align:center;color:#fff;text-decoration:none;padding-top:18px;font-size:30px;font-family:roobert-light;padding-left:6px}.keypad .key:active,.keypad .key:hover{background:#f26974;background:-moz-linear-gradient(top,#f26974 0,#ee3745 40%,#a9202b 100%);background:-webkit-linear-gradient(top,#f26974 0,#ee3745 40%,#a9202b 100%);background:linear-gradient(to bottom,#f26974 0,#ee3745 40%,#a9202b 100%);font-family:roobert-semibold}.piano{display:none}.piano img{width:650px;position:absolute;right:-51px;margin-top:4%}.shareBox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:20;background-color:rgb(255 255 255 / .8)}.shareBox .content{background-color:#fec926;padding:60px 20px;border-radius:30px;position:relative;width:1000px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.shareBox .content .close{position:absolute;background-color:#ed2736;color:#fff;text-align:center;width:50px;height:50px;border-radius:50%;right:-15px;top:-15px;text-decoration:none;padding-top:3px}.shareBox .content .share-options{display:flex;align-items:center}.shareBox .content .share-options .option{flex:1}.shareBox .content .share-options .option a{display:block;text-align:center}.shareBox .content .share-options .option a img{display:inline-block;width:80px}.shareBox .content .share-options .option a span{margin-top:30px;padding:5px 25px;background-color:#2d2e41;color:#fff;text-decoration:none;outline:0;text-align:center;border-radius:30px;display:inline-block;font-size:18px}.alert{display:none;position:fixed;left:0;right:0;z-index:10;background-color:#f86a4e;box-shadow:0 1px 6px 0 #000}.alert p{text-align:center;font-size:18px;padding:5px 0}@media only screen and (max-width:1366px){.tunes{height:324px}}@media only screen and (max-width:1250px){.piano img{width:550px;margin-top:6%}}@media only screen and (max-width:1100px){p{font-size:25px}.keypad{grid-gap:15px;margin-left:90px;margin-top:60px}.keypad .key{width:65px;height:65px;padding-top:10px;font-size:35px}.keypad .erase{padding-top:12px;font-size:28px}.piano img{width:490px}.shareBox .content{width:90%}}@media only screen and (max-width:1000px){.piano img{position:static;right:unset}.tunes{height:237px}}@media only screen and (max-width:900px){p{font-size:22px}.pg-content,.tunes{margin-left:7%}.keypad{grid-gap:10px;margin-left:70px;margin-top:70px}.keypad .key{width:55px;height:55px;padding-top:10px;font-size:30px;margin:0 auto}.keypad .erase{padding-top:10px;font-size:25px}}@media only screen and (max-width:800px){.brand{font-size:9px;right:2%;top:5%}.keypad{margin-left:40px}}@media only screen and (max-width:750px){p{font-size:18px}body,html{height:auto;min-height:100%}.pg-content{margin-top:-25px;margin-left:0}.pg-content section{display:block}.pg-content section:first-child{margin-left:7%}.pg-content .mobile .input{margin-top:10px}.pg-content .mobile .input input[type=text]{padding:10px;height:39px}.pg-content .mobile .input .btn-gen,.pg-content .mobile .input .btn-play,.pg-content .mobile .input .btn-reset{height:39px;padding:10px;margin-left:10px}.pg-content .mobile .input .btn-reset{padding-left:30px}.pg-content .wave-share .replay-share div a:last-child{font-size:18px}.pg-content .wave-share .replay-share div:not(:last-child){margin-right:10px}.keypad{margin-left:0;width:35%;margin:0 auto;grid-gap:15px;margin-top:40px}.pg-content .wave-share .replay-share{width:430px}.piano{margin-left:7%}.shareBox .content{width:240px;padding:40px 30px}.shareBox .content .share-options{flex-direction:column}.shareBox .content .share-options .option:not(:first-child){margin-top:50px}.shareBox .content .share-options .option a img{width:55px}.shareBox .content .share-options .option a span{margin-top:15px;font-size:16px}}@media only screen and (max-width:700px){.tunes{height:208px}}@media only screen and (max-width:650px){.tunes{margin-top:-2px}}@media only screen and (max-width:550px){.brand{font-size:6px;right:1%;top:3%}.pg-content{margin-top:0}.pg-content .mobile .input input[type=text]{width:180px}.keypad{width:70%}body,html{height:100%}.piano img{position:absolute;right:0;width:400px}.pg-content .wave-share,.pg-content .wave-share .replay-share{margin-top:45px}.shareBox .content .close{width:40px;height:40px;font-size:22px;padding-top:4px}}@media only screen and (max-width:500px){.tunes{height:160px}.pg-content .wave-share .replay-share,.pg-content .wave-share .wave{width:auto;margin-right:7%}.pg-content .wave-share .replay-share div a:first-child{width:22px;height:22px}.pg-content .wave-share .replay-share .replay a:first-child,.pg-content .wave-share .replay-share .share a:first-child{background-size:22px}.pg-content .wave-share .replay-share .save a:first-child{background-size:28px;width:28px}.pg-content .wave-share .replay-share div a:last-child{font-size:16px;padding:3px 10px}}@media only screen and (max-width:450px){.piano img{width:350px;right:-20px}}@media only screen and (max-width:420px){.tunes{height:133px}.pg-content .wave-share .replay-share,.pg-content .wave-share .wave{text-align:center}.pg-content .wave-share .replay-share div a{display:inline-block}.pg-content .wave-share .replay-share div a:first-child{margin-bottom:7px}.pg-content .wave-share .replay-share div a:last-child{display:block;margin-left:0}.pg-content .wave-share .replay-share div{text-align:center}}@media only screen and (max-width:380px){.tunes{height:120px}.pg-content .mobile .input input[type=text]{width:155px}}.share-page{margin:-60px auto 0 auto;width:400px;text-align:center}.share-page video{max-width:100%;border:2px solid #ee2d3d}.share-page .btn-gen{display:inline-block;padding:10px 25px;border-radius:30px;background-color:#efc808;margin-top:15px;margin-bottom:15px;text-decoration:none;font-size:17px;color:#2f3043;box-shadow:0 0 8px rgb(0 0 0 / 79%)}@media only screen and (max-width:1000px){.share-page{margin:0 auto 0 auto;width:300px}}@media only screen and (max-width:600px){.share-page{margin:20px auto 0 auto;width:90%}}