@import url(https://pro.fontawesome.com/releases/v5.11.2/css/all.css);:root{--user-button-circle:rgba(0,0,0,.025);--user-button-cardborder:hsla(0,0%,100%,.25);--user-button-text:#323133;--user-button-shadow:rgba(0,0,0,.1)}body #user-button{z-index:1000;bottom:1rem!important;right:1rem!important;color:var(--user-button-text);transition:1s ease-out 0s;animation:slide 3s ease-out forwards}@keyframes slide{0%,50%{opacity:0;display:block!important}to{opacity:1;display:block!important}}body #user-button .u-card{border-radius:100%;box-shadow:0 0 1rem -.25rem var(--user-button-shadow),inset 0 0 1rem -.75rem var(--user-button-shadow)}body #user-button .u-main{cursor:pointer;--user-button-background:var(--user-button-main,#ec87c0)}body #user-button .u-main img{height:100%;width:100%}body #user-button .u-main iframe{position:absolute;top:0;left:0;width:4rem;height:4rem;opacity:1;transition:0s 4s}body #user-button .u-icons{position:relative;z-index:950;transform:translate(-50%,-50%);background:var(--user-button-circle);box-shadow:0 0 0 .125rem var(--user-button-cardborder);border-radius:100%;transition:.25s;opacity:1!important;backdrop-filter:blur(10px)}body #user-button .u-icons a{color:inherit;display:grid;place-items:center;width:30px;height:30px;text-decoration:none}body #user-button .u-icons a div{padding:.5rem;transition:0s}body #user-button .u-icons a[href="https://twitter.com/zed_dash"]{position:relative}body #user-button .u-icons a[href="https://twitter.com/zed_dash"]:before{content:"Middle Click";position:absolute;top:-1.5rem;left:50%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;white-space:pre;transform:translateX(-50%);opacity:0;pointer-events:none;transition:.25s ease-in;background:#fffc;padding:.25rem .5rem;border-radius:.25rem}body #user-button .u-icons a[href="https://twitter.com/zed_dash"].show:before{opacity:1;transition:.25s ease-out}body #user-button .u-icons a[href="https://twitter.com/zed_dash"] div{color:#1da1f2}body #user-button .u-icons a[href="https://codepen.io/z-"] div{background:#000;color:#fff}body #user-button .u-icons a.u-random div{position:relative;top:-1px;animation:diespin 2s linear infinite}@keyframes diespin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}body #user-button .u-icons a.u-random:not(:hover) div{animation-play-state:paused}body #user-button .u-icons>*{position:absolute;width:30px;height:30px;background:var(--singlecolour);border-radius:100%;cursor:pointer;transform:translate(-50%,-50%);transition:.25s -.05s}body #user-button .u-icons>:before{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}body #user-button .u-icons>:focus-within,body #user-button .u-icons>:hover{background:var(--hcolour)}body #user-button .u-icons>:first-child:last-child:first-child,body #user-button .u-icons>:first-child:last-child~:first-child{left:25%;top:25%}body #user-button .u-icons>:first-child:nth-last-child(2):first-child,body #user-button .u-icons>:first-child:nth-last-child(2)~:first-child{left:37.5%;top:18.75%}body #user-button .u-icons>:first-child:nth-last-child(2):nth-child(2),body #user-button .u-icons>:first-child:nth-last-child(2)~:nth-child(2){left:18.75%;top:37.5%}body #user-button .u-icons>:first-child:nth-last-child(3):first-child,body #user-button .u-icons>:first-child:nth-last-child(3)~:first-child{left:50%;top:15.625%}body #user-button .u-icons>:first-child:nth-last-child(3):nth-child(2),body #user-button .u-icons>:first-child:nth-last-child(3)~:nth-child(2){left:25%;top:25%}body #user-button .u-icons>:first-child:nth-last-child(3):nth-child(3),body #user-button .u-icons>:first-child:nth-last-child(3)~:nth-child(3){left:15.625%;top:50%}body #user-button .u-icons>:first-child:nth-last-child(4):first-child,body #user-button .u-icons>:first-child:nth-last-child(4)~:first-child{left:62.5%;top:18.75%}body #user-button .u-icons>:first-child:nth-last-child(4):nth-child(2),body #user-button .u-icons>:first-child:nth-last-child(4)~:nth-child(2){left:37.5%;top:18.75%}body #user-button .u-icons>:first-child:nth-last-child(4):nth-child(3),body #user-button .u-icons>:first-child:nth-last-child(4)~:nth-child(3){left:18.75%;top:37.5%}body #user-button .u-icons>:first-child:nth-last-child(4):nth-child(4),body #user-button .u-icons>:first-child:nth-last-child(4)~:nth-child(4){left:18.75%;top:62.5%}body #user-button:focus-within .u-icons,body #user-button:hover .u-icons{width:300%!important;height:300%!important}body{transition:.25s}.credit{position:absolute;bottom:20px;left:20px;color:inherit}.options{display:flex;flex-direction:row;align-items:stretch;overflow:hidden;width:max(600px,100%);height:100%}@media screen and (max-width:718px){.options{min-width:520px}}@media screen and (max-width:638px){.options{min-width:440px}}@media screen and (max-width:558px){.options{min-width:360px}}@media screen and (max-width:478px){.options{min-width:280px}}.options .option{position:relative;overflow:hidden;min-width:min(60px,5cqi);min-height:60px;margin:min(10px,1cqi);background:var(--optionBackground,var(--defaultBackground,#e6e9ed));background-size:auto 120%;background-position:50%;cursor:pointer;transition:.5s cubic-bezier(.05,.61,.41,.95)}.options .option:first-child{--defaultBackground:#ed5565}.options .option:nth-child(2){--defaultBackground:#fc6e51}.options .option:nth-child(3){--defaultBackground:#ffce54}.options .option:nth-child(4){--defaultBackground:#2ecc71}.options .option:nth-child(5){--defaultBackground:#5d9cec}.options .option:nth-child(6){--defaultBackground:#ac92ec}.options .option.active{flex-grow:10000;transform:scale(1);max-width:100%;margin:0;border-radius:min(40px,3cqi);background-size:auto 100%;background-repeat:no-repeat}.options .option.active .shadow{box-shadow:inset 0 -120px 120px -120px #000,inset 0 -120px 120px -100px #000}.options .option.active .label{bottom:20px;left:20px}.options .option.active .label .info>div{left:0;opacity:1}.options .option:not(.active){flex-grow:1;border-radius:min(30px,2.5cqi)}.options .option:not(.active) .shadow{bottom:-40px;box-shadow:inset 0 -120px 0 -120px #000,inset 0 -120px 0 -100px #000}.options .option:not(.active) .label{bottom:10px;left:10px}.options .option:not(.active) .label .info>div{left:20px;opacity:0}.options .option .shadow{bottom:0;left:0;height:120px}.options .option .label,.options .option .shadow{position:absolute;right:0;transition:.5s cubic-bezier(.05,.61,.41,.95)}.options .option .label{display:flex;height:40px}.options .option .label .icon{display:flex;flex-direction:row;justify-content:center;align-items:center;min-width:40px;max-width:40px;height:40px;border-radius:100%;background-color:#fff;color:var(--defaultBackground)}.options .option .label .info{display:flex;flex-direction:column;justify-content:center;margin-left:10px;color:#fff;white-space:pre}.options .option .label .info>div{position:relative;transition:.5s cubic-bezier(.05,.61,.41,.95),opacity .5s ease-out}.options .option .label .info .main{font-weight:700;font-size:1.2rem}.options .option .label .info .sub{transition-delay:.1s}