@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes scaleIn{0%{width:100px;height:100px}100%{width:250px;height:250px}}@keyframes scaleOut{0%{width:250px;height:250px}100%{width:100px;height:100px}}html,body{padding:0px;margin:0px;width:100%;height:100%;background-color:#0f131b}*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.toggled .panel{animation-name:scaleOut;animation-duration:.5s;animation-delay:1.2s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(2){top:0px}.toggled .panel>.icons-group>.icon:nth-child(2)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.8s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(2)>.content-icon{animation-name:icon-2-base;animation-duration:.5s;animation-delay:.8s;animation-fill-mode:both}@keyframes icon-2-base{0%{opacity:1;width:50px;height:50px;top:-70px;transform:translateX(-20px)}100%{top:0px;opacity:0}}.toggled .panel>.icons-group>.icon:nth-child(6)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.7s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(6)>.content-icon{right:-70px;animation-name:icon-6-base;animation-duration:.5s;animation-delay:.7s;animation-fill-mode:both}@keyframes icon-6-base{0%{opacity:1;width:50px;height:50px;right:-70px;transform:translateY(-20px)}100%{opacity:0;right:0px}}.toggled .panel>.icons-group>.icon:nth-child(8)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.6s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(8)>.content-icon{bottom:-70px;animation-name:icon-8-base;animation-duration:.5s;animation-delay:.6s;animation-fill-mode:both}@keyframes icon-8-base{0%{opacity:1;width:50px;height:50px;bottom:-70px;transform:translateX(-20px)}100%{opacity:0;bottom:0px}}.toggled .panel>.icons-group>.icon:nth-child(4)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.5s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(4)>.content-icon{left:-70px;animation-name:icon-4-base;animation-duration:.5s;animation-delay:.5s;animation-fill-mode:both}@keyframes icon-4-base{0%{opacity:1;width:50px;height:50px;left:-70px;transform:translateY(-20px)}100%{left:0px;opacity:0}}.toggled .panel>.icons-group>.icon:nth-child(5)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.4s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(5)>.content-icon{animation-name:icon-5-base;animation-duration:.5s;animation-delay:.4s;animation-fill-mode:both}@keyframes icon-5-base{0%{opacity:1;top:50%;left:50%;transform:translate(-50%, -50%);width:50px;height:50px}100%{left:0px;opacity:0}}.toggled .panel>.icons-group>.icon:nth-child(9)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.3s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(9)>.content-icon{right:-70px;bottom:-70px;animation-name:icon-9-base;animation-duration:.5s;animation-delay:.3s;animation-fill-mode:both}@keyframes icon-9-base{0%{opacity:1;width:50px;height:50px;right:-70px;bottom:-70px}100%{opacity:0;right:0px;bottom:0px}}.toggled .panel>.icons-group>.icon:nth-child(1)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(1)>.content-icon{left:-70px;top:-70px;animation-name:icon-1-base;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:both}@keyframes icon-1-base{0%{opacity:1;width:50px;height:50px;left:-70px;top:-70px}100%{opacity:0;left:0px;top:0px}}.toggled .panel>.icons-group>.icon:nth-child(3)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:.1s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(3)>.content-icon{right:-70px;top:-70px;animation-name:icon-3-base;animation-duration:.5s;animation-delay:.1s;animation-fill-mode:both}@keyframes icon-3-base{0%{opacity:1;width:50px;height:50px;right:-70px;top:-70px}100%{opacity:0;right:0px;top:0px}}.toggled .panel>.icons-group>.icon:nth-child(7)::before{animation-name:fadeIn;animation-duration:.5s;animation-delay:0s;animation-fill-mode:both}.toggled .panel>.icons-group>.icon:nth-child(7)>.content-icon{left:-70px;bottom:-70px;animation-name:icon-7-base;animation-duration:.5s;animation-delay:0s;animation-fill-mode:both}@keyframes icon-7-base{0%{opacity:1;width:50px;height:50px;left:-70px;bottom:-70px}100%{opacity:0;left:0px;bottom:0px}}.container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.container>.panel{border-radius:10px;background-color:#222532;display:flex;justify-content:center;align-items:center;padding:20px;transition:all .5s;width:100px;height:100px}.container>.panel>.icons-group{cursor:pointer;display:grid;grid-template-columns:repeat(3, auto);gap:5px;width:min-content}.container>.panel>.icons-group>.icon{width:10px;height:10px;position:relative}.container>.panel>.icons-group>.icon::before{content:"";width:100%;height:100%;position:absolute;opacity:1;background-color:#fff;border-radius:50%}.container>.panel>.icons-group>.icon>.content-icon{width:10px;height:10px;transition:all .5s;position:absolute;opacity:0;background-color:#343749;transform:translate(0px, 0px);border-radius:50%;display:flex;justify-content:center;align-items:center;color:#fff}.container>.panel>.icons-group>.icon>.content-icon>svg{width:40%;height:40%;fill:inherit}.container>.panel>.icons-group>.icon>.content-icon:hover{color:#5fdc7c;text-shadow:4px 4px #5fdc7c}.container>.panel>.icons-group>.icon>.content-icon:hover>svg{filter:drop-shadow(0px 0px 5px #5fdc7c)}.container #toggle-menu:checked+.panel{animation-name:scaleIn;animation-duration:.5s;animation-delay:0s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(2)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:0s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(2)>.content-icon{animation-name:icon-2;animation-duration:.5s;animation-delay:0s;animation-fill-mode:both}@keyframes icon-2{0%{opacity:0;top:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;top:-70px;transform:translateX(-20px)}}.container #toggle-menu:checked+.panel .icon:nth-child(6)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.1s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(6)>.content-icon{animation-name:icon-6;animation-duration:.5s;animation-delay:.1s;animation-fill-mode:both}@keyframes icon-6{0%{opacity:0;right:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;right:-70px;transform:translateY(-20px)}}.container #toggle-menu:checked+.panel .icon:nth-child(8)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(8)>.content-icon{animation-name:icon-8;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:both}@keyframes icon-8{0%{opacity:0;bottom:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;bottom:-70px;transform:translateX(-20px)}}.container #toggle-menu:checked+.panel .icon:nth-child(4)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.3s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(4)>.content-icon{animation-name:icon-4;animation-duration:.5s;animation-delay:.3s;animation-fill-mode:both}@keyframes icon-4{0%{opacity:0;left:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;left:-70px;transform:translateY(-20px)}}.container #toggle-menu:checked+.panel .icon:nth-child(5)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.4s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(5)>.content-icon{animation-name:icon-5;animation-duration:.5s;animation-delay:.4s;animation-fill-mode:both}@keyframes icon-5{0%{opacity:0}100%{opacity:1;top:50%;left:50%;transform:translate(-50%, -50%);width:50px;height:50px}}.container #toggle-menu:checked+.panel .icon:nth-child(9)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.5s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(9)>.content-icon{animation-name:icon-9;animation-duration:.5s;animation-delay:.5s;animation-fill-mode:both}@keyframes icon-9{0%{opacity:0;right:0px;bottom:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;right:-70px;bottom:-70px}}.container #toggle-menu:checked+.panel .icon:nth-child(1)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.6s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(1)>.content-icon{animation-name:icon-1;animation-duration:.5s;animation-delay:.6s;animation-fill-mode:both}@keyframes icon-1{0%{opacity:0;left:0px;top:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;left:-70px;top:-70px}}.container #toggle-menu:checked+.panel .icon:nth-child(3)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.7s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(3)>.content-icon{animation-name:icon-3;animation-duration:.5s;animation-delay:.7s;animation-fill-mode:both}@keyframes icon-3{0%{opacity:0;right:0px;top:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;right:-70px;top:-70px}}.container #toggle-menu:checked+.panel .icon:nth-child(7)::before{animation-name:fadeOut;animation-duration:.5s;animation-delay:.8s;animation-fill-mode:both}.container #toggle-menu:checked+.panel .icon:nth-child(7)>.content-icon{animation-name:icon-7;animation-duration:.5s;animation-delay:.8s;animation-fill-mode:both}@keyframes icon-7{0%{opacity:0;left:0px;bottom:0px}20%{opacity:1}100%{opacity:1;width:50px;height:50px;left:-70px;bottom:-70px}}