*{border:0;box-sizing:border-box;color:#fff;font-family:sans-serif;font-weight:600;margin:0;min-width:0;padding:0}body,html{height:100%;width:100%}body{animation:changeColor 20s ease-in-out infinite alternate}canvas{height:100svh;left:0;position:absolute;top:0;width:100%}.container{align-items:center;display:flex;justify-content:center;min-height:100%;overflow:hidden;position:relative;width:100%;z-index:1}.logo{align-items:center;display:flex;flex-direction:column;opacity:0;animation:show .8s ease-in-out forwards 1s}.line1,.line2{position:absolute;opacity:0}.line1{animation:show .8s ease-in-out forwards 1.5s,lineOneAnimation 8s ease-in infinite alternate;bottom:0;left:0}.line2{animation:show .8s ease-in-out forwards 2s,lineOneAnimation 8s ease-in-out infinite alternate;right:0;top:0}@keyframes changeColor{from{background-color:#63c}50%{background-color:#2b2b2b}to{background-color:#36f}}@keyframes lineAnimation{0%{transform:rotate(0)}50%{transform:rotate(3deg) translate(5px,5px)}100%{transform:rotate(5deg)}}@keyframes show{from{opacity:0}to{opacity:1}}