.button{display:flex;justify-content:center;align-items:center;border-radius:45px;border:none;font-family:Slackey,sans-serif;text-align:center;font-size:10px;width:30em;max-width:40em;padding:3em;transition:all .4s;cursor:pointer;text-shadow:2px 2px 4px rgba(0,0,0,1);position:relative;overflow:hidden;transition:all .4s ease-out}.button:before{content:"";position:absolute;top:0;right:0;width:8px;height:100%;transform:translateX(12px) rotate(12deg);transition:all 1s ease-out;opacity:.5}.button:hover:before{transform:translateX(-40px) rotate(12deg);opacity:0}.button span{z-index:1}.create-button,.join-button,.test-button{margin-left:30px;width:33em}.create-button{background:linear-gradient(90deg,#0ba360,#3cba92);box-shadow:0 5px 56px -20px #0ba360}.back-button{background:linear-gradient(90deg,#ad0968,#ad0968);box-shadow:0 5px 56px -17px #ad0968}.home-button{background:linear-gradient(90deg,#f0af37,#f0af37);box-shadow:0 5px 56px -17px #f0af37}.join-button{background:linear-gradient(90deg,#5676e8,#5676e8);box-shadow:0 5px 56px -20px #5676e8}.test-button{background:linear-gradient(90deg,#f20000,#f20000);box-shadow:0 5px 56px -20px #f20000}.button span{cursor:pointer;display:inline-block;position:relative;font-size:2.5em;line-height:1;transition:.4s}.create-button span:after,.join-button span:after{content:"Room";position:absolute;opacity:0;top:0;right:-20px;transition:.7s}.test-button span:after{content:"TEST";position:absolute;opacity:0;top:0;right:-20px;transition:.7s}.home-button span:after,.profile-button span:after{content:"Menu";position:absolute;opacity:0;top:0;right:-20px;transition:.7s}.back-button span:after{content:"";position:absolute;opacity:0;top:0;right:-20px;transition:.7s;font-size:22px}.create-button:hover span,.home-button:hover span,.join-button:hover span,.profile-button:hover span,.test-button:hover span{padding-right:3.8em}.create-button:hover span:after,.home-button:hover span:after,.join-button:hover span:after,.profile-button:hover span:after,.test-button:hover span:after{opacity:1;right:0}.icon-spacing{margin-right:10px}.svg-icon{filter:drop-shadow(3px 3px 2px rgb(0 0 0/.2))}.button-with-attached-circle{position:relative;display:inline-flex;align-items:center}.button-circle{position:absolute;left:-5px;width:93px;height:93px;border-radius:50%;background-color:rgba(255,255,255,1);display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:-4px 3px 0 rgba(0,0,0,.2)}