:root{--primary-color: #d9d9d9;--secondary-color: #fff;--background-color: #212121}body{min-height:100vh;background-color:var(--background-color);margin:0;font-family:Josefin Sans,sans-serif}nav{position:absolute;top:0;left:0;width:100%;height:100%;max-height:100vh}.logo{position:absolute;text-align:center;display:flex;align-items:center;justify-content:center;width:300px;height:300px;background-color:var(--primary-color);border-radius:50%;top:calc(50% - 150px);left:calc(50% - 150px);margin:0}.logo>h1{opacity:1;position:absolute;color:#000;font-size:4rem;transition:opacity .3s ease-in-out}.logo>h2{opacity:0;position:absolute;transition:opacity .3s ease-in-out}.logo:hover>h1{opacity:0}.logo:hover>h2{opacity:1}.page{z-index:3;display:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--secondary-color)}div.fade{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;background-color:var(--background-color);opacity:0;transition:opacity .3s ease-in-out;pointer-events:none}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}div.circle-link-1{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(45deg)*497px/2);left:calc(50% - 21px + sin(45deg)*497px/2);transform-origin:calc(21px + sin(45deg)*497px/-2) calc(21px + cos(45deg)*497px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both}div.circle-link-1:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(45deg)*497px/2);left:calc(50% - 38px + sin(45deg)*497px/2);transform-origin:calc(38px + sin(45deg)*497px/-2) calc(38px + cos(45deg)*497px/-2)}div.circle-link-1:hover>span{animation-play-state:paused;opacity:1}div.circle-link-1>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both reverse}div.circle-link-1>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-1:hover)>div.fade{opacity:.9}nav:has(div.circle-link-1:hover)>div.circle-2:after{animation-play-state:paused}div.circle-link-2{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(135deg)*597px/2);left:calc(50% - 21px + sin(135deg)*597px/2);transform-origin:calc(21px + sin(135deg)*597px/-2) calc(21px + cos(135deg)*597px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both reverse}div.circle-link-2:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(135deg)*597px/2);left:calc(50% - 38px + sin(135deg)*597px/2);transform-origin:calc(38px + sin(135deg)*597px/-2) calc(38px + cos(135deg)*597px/-2)}div.circle-link-2:hover>span{animation-play-state:paused;opacity:1}div.circle-link-2>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both}div.circle-link-2>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-2:hover)>div.fade{opacity:.9}nav:has(div.circle-link-2:hover)>div.circle-link-3{animation-play-state:paused}nav:has(div.circle-link-2:hover)>div.circle-link-3>span{animation-play-state:paused}nav:has(div.circle-link-2:hover)>div.circle-3:after{animation-play-state:paused}div.circle-link-3{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(-45deg)*597px/2);left:calc(50% - 21px + sin(-45deg)*597px/2);transform-origin:calc(21px + sin(-45deg)*597px/-2) calc(21px + cos(-45deg)*597px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both reverse}div.circle-link-3:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(-45deg)*597px/2);left:calc(50% - 38px + sin(-45deg)*597px/2);transform-origin:calc(38px + sin(-45deg)*597px/-2) calc(38px + cos(-45deg)*597px/-2)}div.circle-link-3:hover>span{animation-play-state:paused;opacity:1}div.circle-link-3>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both}div.circle-link-3>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-3:hover)>div.fade{opacity:.9}nav:has(div.circle-link-3:hover)>div.circle-link-2{animation-play-state:paused}nav:has(div.circle-link-3:hover)>div.circle-link-2>span{animation-play-state:paused}nav:has(div.circle-link-3:hover)>div.circle-3:after{animation-play-state:paused}div.circle-link-4{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(90deg)*747px/2);left:calc(50% - 21px + sin(90deg)*747px/2);transform-origin:calc(21px + sin(90deg)*747px/-2) calc(21px + cos(90deg)*747px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both}div.circle-link-4:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(90deg)*747px/2);left:calc(50% - 38px + sin(90deg)*747px/2);transform-origin:calc(38px + sin(90deg)*747px/-2) calc(38px + cos(90deg)*747px/-2)}div.circle-link-4:hover>span{animation-play-state:paused;opacity:1}div.circle-link-4>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both reverse}div.circle-link-4>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-4:hover)>div.fade{opacity:.9}nav:has(div.circle-link-4:hover)>div.circle-link-5{animation-play-state:paused}nav:has(div.circle-link-4:hover)>div.circle-link-5>span{animation-play-state:paused}nav:has(div.circle-link-4:hover)>div.circle-4:after{animation-play-state:paused}div.circle-link-5{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(225deg)*747px/2);left:calc(50% - 21px + sin(225deg)*747px/2);transform-origin:calc(21px + sin(225deg)*747px/-2) calc(21px + cos(225deg)*747px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both}div.circle-link-5:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(225deg)*747px/2);left:calc(50% - 38px + sin(225deg)*747px/2);transform-origin:calc(38px + sin(225deg)*747px/-2) calc(38px + cos(225deg)*747px/-2)}div.circle-link-5:hover>span{animation-play-state:paused;opacity:1}div.circle-link-5>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both reverse}div.circle-link-5>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-5:hover)>div.fade{opacity:.9}nav:has(div.circle-link-5:hover)>div.circle-link-4{animation-play-state:paused}nav:has(div.circle-link-5:hover)>div.circle-link-4>span{animation-play-state:paused}nav:has(div.circle-link-5:hover)>div.circle-4:after{animation-play-state:paused}div.circle-link-6{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(135deg)*897px/2);left:calc(50% - 21px + sin(135deg)*897px/2);transform-origin:calc(21px + sin(135deg)*897px/-2) calc(21px + cos(135deg)*897px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both reverse}div.circle-link-6:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(135deg)*897px/2);left:calc(50% - 38px + sin(135deg)*897px/2);transform-origin:calc(38px + sin(135deg)*897px/-2) calc(38px + cos(135deg)*897px/-2)}div.circle-link-6:hover>span{animation-play-state:paused;opacity:1}div.circle-link-6>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both}div.circle-link-6>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-6:hover)>div.fade{opacity:.9}nav:has(div.circle-link-6:hover)>div.circle-link-7{animation-play-state:paused}nav:has(div.circle-link-6:hover)>div.circle-link-7>span{animation-play-state:paused}nav:has(div.circle-link-6:hover)>div.circle-5:after{animation-play-state:paused}div.circle-link-7{display:block;position:absolute;width:36px;height:36px;border-radius:50%;background-color:var(--primary-color);border:3px solid var(--background-color);box-shadow:0 0 0 3px var(--secondary-color);box-sizing:border-box;top:calc(50% - 21px + cos(-45deg)*897px/2);left:calc(50% - 21px + sin(-45deg)*897px/2);transform-origin:calc(21px + sin(-45deg)*897px/-2) calc(21px + cos(-45deg)*897px/-2);transition:all .3s ease-in-out;cursor:pointer;animation:rotation 30s infinite linear both reverse}div.circle-link-7:hover{z-index:2;width:70px;height:70px;animation-play-state:paused;top:calc(50% - 38px + cos(-45deg)*897px/2);left:calc(50% - 38px + sin(-45deg)*897px/2);transform-origin:calc(38px + sin(-45deg)*897px/-2) calc(38px + cos(-45deg)*897px/-2)}div.circle-link-7:hover>span{animation-play-state:paused;opacity:1}div.circle-link-7>span{display:block;position:absolute;top:50%;left:calc(50% - 200px);width:400px;height:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none;animation:rotation 30s infinite linear both}div.circle-link-7>span>span{font-size:1.5rem;color:#fff;position:absolute;top:-.5rem}nav:has(div.circle-link-7:hover)>div.fade{opacity:.9}nav:has(div.circle-link-7:hover)>div.circle-link-6{animation-play-state:paused}nav:has(div.circle-link-7:hover)>div.circle-link-6>span{animation-play-state:paused}nav:has(div.circle-link-7:hover)>div.circle-5:after{animation-play-state:paused}div.circle-1{position:absolute;width:400px;height:400px;top:calc(50% - 200px);left:calc(50% - 200px);transform:rotate(45deg)}div.circle-1:after{content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid transparent;box-sizing:border-box;animation:30s linear infinite reverse both rotation;border-left:3px solid var(--secondary-color);border-bottom:3px solid var(--secondary-color)}div.circle-2{position:absolute;width:500px;height:500px;top:calc(50% - 250px);left:calc(50% - 250px);transform:rotate(-45deg)}div.circle-2:after{content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid transparent;box-sizing:border-box;animation:30s linear infinite both rotation;border-left:3px solid var(--secondary-color);border-bottom:3px solid var(--secondary-color);border-right:3px solid var(--secondary-color)}div.circle-3{position:absolute;width:600px;height:600px;top:calc(50% - 300px);left:calc(50% - 300px);transform:rotate(135deg)}div.circle-3:after{content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid transparent;box-sizing:border-box;animation:30s linear infinite reverse both rotation;border-left:3px solid var(--secondary-color);border-bottom:3px solid var(--secondary-color);border-right:3px solid var(--secondary-color)}div.circle-4{position:absolute;width:750px;height:750px;top:calc(50% - 375px);left:calc(50% - 375px);transform:rotate(-135deg)}div.circle-4:after{content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid transparent;box-sizing:border-box;animation:30s linear infinite both rotation;border-left:3px solid var(--secondary-color);border-bottom:3px solid var(--secondary-color);border-right:3px solid var(--secondary-color)}div.circle-5{position:absolute;width:900px;height:900px;top:calc(50% - 450px);left:calc(50% - 450px);transform:rotate(-45deg)}div.circle-5:after{content:"";display:block;width:100%;height:100%;border-radius:50%;border:3px solid transparent;box-sizing:border-box;animation:30s linear infinite reverse both rotation;border-left:3px solid var(--secondary-color);border-right:3px solid var(--secondary-color)}