.media-button{align-items:center;background-image:linear-gradient(to right top,#d16ba5,#c777b9,#ba83ca,#aa8fd8,#9a9ae1,#8aa7ec,#79b3f4,#69bff8,#52cffe,#41dfff,#46eefa,#5ffbf1);border:0;border-radius:50%;box-shadow:-1px 17px 24px -6px rgba(0,0,0,.2);cursor:pointer;display:none;height:80px;justify-content:center;pointer-events:none;position:relative;transition:box-shadow .1s,-webkit-transform .1s;transition:box-shadow .1s,transform .1s;transition:box-shadow .1s,transform .1s,-webkit-transform .1s;width:80px}.media-button--active{display:flex;pointer-events:visible}.media-button:active{box-shadow:-1px 8px 24px -6px rgba(0,0,0,.2);position:relative;-webkit-transform:scale(.95);transform:scale(.95)}.media-button svg{fill:#fff}.media-button:before{border:2px solid rgba(125,176,242,.631);border-radius:50px;box-shadow:0 0 0 5px rgba(123,177,243,.43);content:"";display:block;height:100%;opacity:.01;position:absolute;top:-2px;transition:opacity .3s;width:100%}.media-button:focus{outline:0}.media-button:focus:before{opacity:.57}.home{align-items:center;display:flex;flex-direction:column;z-index:0}.home p{margin:0 0 50px;padding:0}.home .hidden{opacity:.001;-webkit-transform:translateY(20px);transform:translateY(20px);transition:opacity .2s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s cubic-bezier(.215,.61,.355,1);transition:transform .3s cubic-bezier(.215,.61,.355,1),opacity .2s cubic-bezier(.215,.61,.355,1);transition:transform .3s cubic-bezier(.215,.61,.355,1),opacity .2s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s cubic-bezier(.215,.61,.355,1)}.home .active{opacity:.999;-webkit-transform:translateY(0);transform:translateY(0)}.home .title{transition-delay:.3s}.home .subtitle{transition-delay:.35s}.home .icon{transition-delay:.1s}.home .media-button{margin-top:90px;opacity:1}.home .media-button.hidden{-webkit-transform:scale(0) translateY(20px);transform:scale(0) translateY(20px);-webkit-transform-origin:center;transform-origin:center;transition:-webkit-transform .2s cubic-bezier(.175,.885,.32,1.275) .3s;transition:transform .2s cubic-bezier(.175,.885,.32,1.275) .3s;transition:transform .2s cubic-bezier(.175,.885,.32,1.275) .3s,-webkit-transform .2s cubic-bezier(.175,.885,.32,1.275) .3s}.home .media-button.active{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}.home .footer{height:40px;justify-content:space-between;padding:0 40px;top:80px;width:100%}.home .footer,.home .soundcloud{align-items:center;display:flex;position:relative}.home .soundcloud{color:#585858;height:30px;text-decoration:none}.home .soundcloud:before{border-radius:5px;content:"";display:block;height:100%;left:-7px;opacity:.01;padding:3px;position:absolute;top:-5px;transition:opacity .3s;width:100%}.home .soundcloud:focus{outline:none}.home .soundcloud:focus:before{border:solid;opacity:.1}.icon{fill:#c1c1c1}.icon--back{margin-right:3px}.icon-button{align-items:center;background-color:transparent;border:0;border-radius:50%;cursor:pointer;display:flex;height:35px;justify-content:center;position:relative;transition:background-color .3s;width:35px}.icon-button:hover{background-color:hsla(0,0%,85%,.239)}.icon-button:active{background-color:#f1f1f1}.icon-button:before{border:2px solid rgba(125,176,242,.631);border-radius:50px;box-shadow:0 0 0 3px rgba(123,177,243,.33);content:"";display:block;height:100%;left:-2px;opacity:.01;position:absolute;top:-2px;transition:opacity .3s;width:100%}.icon-button--high-light svg{fill:#92a0e6;stroke:#7b80d2;stroke-width:5px}.icon-button:focus{outline:0}.icon-button:focus:before{opacity:.57}.menu{align-items:center;background-color:#fff;color:#585858;display:flex;height:80px;justify-content:space-between;padding:20px;z-index:3}.menu .icon-button--close{display:none}.menu .icon-button--back.active{transition-delay:.1s}.menu__title{font-size:18px}.menu__title.active{transition-delay:.2s}.menu .icon-button--help.active{transition-delay:.4s}.menu .hidden{opacity:.001;-webkit-transform:translateY(20px);transform:translateY(20px);transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.menu .active{opacity:.999;-webkit-transform:translateY(0);transform:translateY(0);transition-duration:.3s,.2s}.menu--home{visibility:hidden}.menu--about .icon-button--close{display:block}.menu--about .icon-button--help{display:none}.menu--about .icon-button--back,.menu--about .menu__title{visibility:hidden}.menu--detail{justify-content:flex-start}.menu--detail .help{visibility:hidden}.menu--detail .menu__title{text-align:center;width:80%}.page{height:100%;left:0;position:absolute;top:0;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .3s cubic-bezier(.075,.82,.165,1);transition:transform .3s cubic-bezier(.075,.82,.165,1);transition:transform .3s cubic-bezier(.075,.82,.165,1),-webkit-transform .3s cubic-bezier(.075,.82,.165,1);width:100%}.page.unactive{pointer-events:none;-webkit-transform:translateX(100%) translateZ(0);transform:translateX(100%) translateZ(0)}.page.active{pointer-events:visible;-webkit-transform:translateX(0) translateZ(0);transform:translateX(0) translateZ(0)}.loader{background-image:linear-gradient(to right top,#d16ba5,#c777b9,#ba83ca,#aa8fd8,#9a9ae1,#8aa7ec,#79b3f4,#69bff8,#52cffe,#41dfff,#46eefa,#5ffbf1);border-radius:6px;display:block;height:4px;left:50%;margin-top:-30px;position:absolute;-webkit-transform:translateX(-50%) scaleX(0);transform:translateX(-50%) scaleX(0);-webkit-transform-origin:left;transform-origin:left;transition:-webkit-transform 3s cubic-bezier(.215,.61,.355,1);transition:transform 3s cubic-bezier(.215,.61,.355,1);transition:transform 3s cubic-bezier(.215,.61,.355,1),-webkit-transform 3s cubic-bezier(.215,.61,.355,1);width:94%}.loader.animate{-webkit-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#585858;font-family:Sarabun,sans-serif;margin:0;padding:0}*{box-sizing:border-box}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:400;src:local("Sarabun Regular"),local("Sarabun-Regular"),url(https://fonts.gstatic.com/s/sarabun/v6/DtVjJx26TKEr37c9aBVJnw.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:Sarabun;font-style:normal;font-weight:800;src:local("Sarabun ExtraBold"),local("Sarabun-ExtraBold"),url(https://fonts.gstatic.com/s/sarabun/v6/DtVmJx26TKEr37c9YLJvilss6w.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}.app{background-image:linear-gradient(to right top,#d16ba5,#c777b9,#ba83ca,#aa8fd8,#9a9ae1,#8aa7ec,#79b3f4,#69bff8,#52cffe,#41dfff,#46eefa,#5ffbf1);height:100vh;justify-content:center;width:100vw}.app,.shell{display:flex}.shell{align-self:center;background-color:#fff;box-shadow:1px 3px 20px 8px rgba(0,0,0,.09);flex-direction:column;height:inherit;height:667px;overflow:hidden;position:relative;width:100%}@media screen and (min-width:380px){.shell{border-radius:10px;width:375px}}.page-wrapper{height:100%;overflow:hidden;position:relative;width:100%}a,button{-webkit-tap-highlight-color:rgba(0,0,0,0)}
/*# sourceMappingURL=main.28573e69.css.map*/