body{margin:0;padding:0;height:100vh;background:linear-gradient(to bottom, #1a1a1a, white);background-repeat: no-repeat;overflow:hidden;transition:background .5s ease}body.light-mode{background:linear-gradient(to bottom, #f0f0f5, #e6e6ea)}.scene{position:relative;width:100vw;height:100vh;z-index:1}.vaisseau{width:250px;height:250px;background:url("sattelite.png") no-repeat center center;background-size:contain;position:absolute;top:25%;left:65%;z-index:0;border-radius:50%}body.light-mode .vaisseau{background:url("sattelite-clair.png") no-repeat center center;background-size:contain;filter:brightness(0.9);border-radius:50%}.planet{width:800px;height:800px;background:url("planete.png") no-repeat center center;background-size:cover;border-radius:50%;position:absolute;top:-60%;left:50%;transform:translateX(-50%);animation:rotate 40s linear infinite;box-shadow:0 0 100px 50px rgba(138,43,226,.7);z-index:0}body.light-mode .planet{background:url("planete-clair.png") no-repeat center center;background-size:cover;box-shadow:0 0 60px 30px rgba(0,164,175,.5)}.montagnes{position:fixed;bottom:0;width:100%;height:200px;background:url("montagne.png") no-repeat bottom center;background-size:100% auto;z-index:0}body.light-mode .montagnes{background:url("montagne-clair.png") no-repeat bottom center;background-size:100% auto;filter:brightness(1.1)}@keyframes rotate{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}.navbar{position:fixed;top:0;left:0;height:100%;width:80px;background-color:#343a40;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding-top:20px;z-index:2}body.light-mode .navbar{background-color:#e9ecef}.nav-link{color:#fff;display:flex;flex-direction:column;align-items:center;margin-bottom:20px;font-size:12px}.nav-link:hover{color:rgba(138,43,226,.7)}.nav-link:hover i{transform:scale(1.2);transition:transform .3s ease}.nav-link i{font-size:24px;margin-bottom:5px}body.light-mode .nav-link{color:#495057}.toggle-mode{margin-top:auto;margin-bottom:20px;font-size:20px;cursor:pointer;color:#fff}body.light-mode .toggle-mode{color:#495057}@media(max-width: 1100px){.navbar{position:fixed;top:0;left:0;width:100%;height:60px;flex-direction:row;justify-content:center;align-items:center;background-color:rgba(52,58,64,.8)}body.light-mode .navbar{background-color:rgba(245,245,245,.8)}.nav-link{flex-direction:row;justify-content:center;margin:0 15px;font-size:17px}.nav-link i{display:none}.nav-link span{display:inline}.toggle-mode{position:absolute;right:10px;top:15px;font-size:16px}}@media(max-width: 768px){.navbar{position:fixed;top:auto;bottom:0;left:0;width:100%;height:60px;flex-direction:row;justify-content:space-around;background-color:rgba(52,58,64,.8)}body.light-mode .navbar{background-color:rgba(245,245,245,.8)}.nav-link i{font-size:20px;display:block}.nav-link span{display:none}.toggle-mode{display:none}}