body {
  background: #000;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: #fff;
}

main {
  all: initial;
  display: block;
  max-width: 45em;
  margin: 0 auto;
  padding: 3em;
  color: #fff;
}

ul {
  list-style: none;
  padding-left: 1.5em;
}

ul, li {
  color: #fff;
  font-family: sans-serif;
}

li::before {
  content: '';
  position: absolute;
  margin-left: -1.2em;
  margin-top: 0.6em;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #fff;
}

.main {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background: #fff;
  border-radius: 50%;
  box-shadow: -42vw -4vh 0 0 #fff,25vw -41vh 0 0 #fff,-20vw 49vh 0 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0 #fff,-44vw -13vh 0 0 #fff,46vw 41vh 0 1px #fff,-3vw -45vh 0 1px #fff,47vw 35vh 1px 0 #fff,12vw -8vh 1px 0 #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0 #fff,-14vw -49vh 1px 0 #fff,-12vw 45vh 0 1px #fff,-44vw -33vh 0 1px #fff,-13vw 41vh 0 0 #fff,-36vw -11vh 0 1px #fff,-23vw -24vh 1px 0 #fff,-38vw -27vh 0 1px #fff,16vw -19vh 0 0 #fff,28vw 33vh 1px 0 #fff,-49vw -4vh 0 0 #fff,16vw 32vh 0 1px #fff,36vw -18vh 1px 0 #fff,-25vw -30vh 1px 0 #fff,-23vw 24vh 0 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0 0 #fff,-15vw -34vh 0 0 #fff,-8vw -19vh 1px 0 #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0 1px #fff,-32vw 10vh 1px 0 #fff,-23vw -17vh 0 0 #fff,44vw 15vh 1px 0 #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0 0 #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0 0 #fff,-31vw 50vh 1px 0 #fff,36vw -38vh 0 1px #fff,-7vw 48vh 0 0 #fff,15vw -32vh 0 0 #fff,29vw -41vh 0 0 #fff,2vw 37vh 1px 0 #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0 0 #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0 0 #fff,23vw -9vh 1px 0 #fff,50vw 12vh 0 1px #fff,45vw 2vh 0 0 #fff,14vw -48vh 1px 0 #fff,23vw 43vh 0 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0 0 #fff,33vw -6vh 0 0 #fff,0vw 7vh 0 1px #fff,-10vw -18vh 0 1px #fff,-19vw 5vh 1px 0 #fff,1vw 42vh 0 0 #fff,22vw 48vh 0 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0 #fff,-47vw 34vh 0 0 #fff,-46vw 19vh 0 1px #fff,-12vw -32vh 0 0 #fff,-45vw -38vh 0 1px #fff,-28vw 18vh 1px 0 #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0 #fff,-16vw 17vh 0 0 #fff,18vw 27vh 0 1px #fff,-8vw -10vh 1px 1px #fff,24vw 9vh 1px 0 #fff,12vw -24vh 0 1px #fff,-45vw -22vh 0 0 #fff,-37vw -40vh 0 1px #fff,29vw 19vh 0 1px #fff,4vw -8vh 0 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0 1px #fff,-43vw -27vh 0 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0 0 #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0 #fff,-16vw -6vh 0 0 #fff,5vw 26vh 0 0 #fff,-34vw 41vh 0 0 #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0 #fff,22vw -15vh 0 0 #fff,45vw 49vh 0 0 #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0 0 #fff,8vw 22vh 0 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0 1px #fff,-40vw 45vh 0 1px #fff,11vw -30vh 1px 0 #fff,26vw 30vh 1px 0 #fff,45vw -29vh 0 1px #fff,-2vw 18vh 0 0 #fff,-29vw -45vh 1px 0 #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0 0 #fff,45vw -48vh 1px 0 #fff,-36vw -18vh 0 0 #fff,-44vw 13vh 0 1px #fff,36vw 16vh 0 1px #fff,40vw 24vh 0 0 #fff,18vw 11vh 0 0 #fff,-15vw -23vh 1px 0 #fff,-24vw 48vh 0 1px #fff,27vw -45vh 1px 0 #fff,-2vw -24vh 0 1px #fff,-15vw -28vh 0 0 #fff,-43vw 13vh 1px 0 #fff,7vw 27vh 1px 0 #fff,47vw 5vh 0 0 #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0 #fff,5vw 0vh 1px 0 #fff,49vw 13vh 0 0 #fff,48vw 10vh 0 1px #fff,19vw -28vh 0 0 #fff,4vw 7vh 0 0 #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0 1px #fff,-6vw -42vh 1px 0 #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0 1px #fff,-31vw -19vh 0 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0 0 #fff,3vw -25vh 0 1px #fff,-39vw 14vh 0 1px #fff,-40vw 31vh 0 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0 0 #fff,6vw 39vh 0 0 #fff,3vw -35vh 0 1px #fff,-44vw -2vh 1px 0 #fff,-6vw 21vh 1px 0 #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0 #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0 0 #fff;
  animation: rotate 510s linear infinite;
  z-index: 1;
  will-change: transform;
}

.home-planet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66vh;
  height: 66vh;
  background: url('./img/_home.gif') center/contain no-repeat;
  z-index: 2;
  animation: float 8s ease-in-out infinite;
  text-decoration: none;
  display: block;
  transition: transform .8s ease-in-out;
}

.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 4;
  pointer-events: none;
}

.nav-button {
  position: absolute;
  width: 80px;
  height: 99px;
  padding: 60px 11px 5px;
  background: top center/contain no-repeat;
  color: #fff;
  font: bold 12px sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.nav-about { 
  background-image: url('./img/_about.gif');
  animation: drift-about 45s ease-in-out infinite;
}
.nav-news { 
  background-image: url('./img/_news.gif');
  animation: drift-news 60s ease-in-out infinite;
}
.nav-contact { 
  background-image: url('./img/_contact.gif');
  animation: drift-contact 50s ease-in-out infinite;
}

.nav-button:hover { transform: scale(1.2); }

.content-page .nav-menu {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 45em;
  margin: 0 auto;
  padding: 0 3em;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: auto;
  z-index: 10;
}

.content-page .nav-button {
  position: static;
  flex-shrink: 0;
  height: 99px !important;
}

.content-page .nav-about { animation: nav-float 6s ease-in-out infinite; }
.content-page .nav-news { animation: nav-float 7s ease-in-out infinite 1s; }
.content-page .nav-contact { animation: nav-float 9s ease-in-out infinite 2s; }

.content-page .home-planet {
  position: static;
  animation: nav-float 8s ease-in-out infinite;
  width: 99px;
  height: 99px;
  transform: none;
  margin-bottom: 10px;
}

.content-page main {
  margin-top: 120px;
  position: relative;
}

.content-page main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 160px;
  background: linear-gradient(to bottom, #000 0%, #000 75%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}

h1, h2, p {
  color: #fff;
  font-family: sans-serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  z-index: 100;
}

h1, h2 {
  text-align: left;
}

p {
  text-align: justify;
  letter-spacing: 0.5px;
}

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
  50% { transform: translate(-50%, -50%) translateY(-5px) rotate(1deg); }
}

@keyframes nav-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

@keyframes drift-about {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(15vw, -10vh) rotate(2deg); }
  50% { transform: translate(-12vw, 8vh) rotate(-1deg); }
  75% { transform: translate(10vw, -5vh) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes drift-news {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-12vw, 8vh) rotate(-2deg); }
  40% { transform: translate(6vw, -10vh) rotate(1deg); }
  60% { transform: translate(-8vw, 4vh) rotate(-3deg); }
  80% { transform: translate(9vw, -6vh) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes drift-contact {
  0% { transform: translate(0, 0) rotate(0deg); }
  30% { transform: translate(20vw, 10vh) rotate(1deg); }
  60% { transform: translate(-15vw, -12vh) rotate(-2deg); }
  90% { transform: translate(5vw, 8vh) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.newsletter-footer {
  max-width: 45em;
  margin: 0 auto;
  padding: 3em;
  color: #fff;
  font-family: sans-serif;
  display: none;
}

.content-page .newsletter-footer {
  display: block;
}

.newsletter-footer h4 {
  color: #fff;
  font-family: sans-serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  text-align: left;
}

.newsletter-footer span,
.newsletter-footer .inf-rgpd {
  color: #fff;
  font-family: sans-serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.newsletter-footer input[type="email"] {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px;
  border-radius: 0;
  width: 300px;
  max-width: 100%;
}

.newsletter-footer input[type="email"]::placeholder {
  color: #fff;
  opacity: 0.7;
}

.newsletter-footer input[type="submit"] {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0;
  cursor: pointer;
}

.newsletter-footer input[type="submit"]:hover {
  background: rgba(255,255,255,0.1);
}

.newsletter-footer .inf-success {
  color: #fff;
  font-family: sans-serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.newsletter-footer .inf-success h4 {
  color: #fff;
  font-family: sans-serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  text-align: left;
}

.newsletter-footer .inf-btn {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
  display: inline-block;
  border-radius: 0;
  font-family: sans-serif;
}

.newsletter-footer .inf-btn:hover {
  background: rgba(255,255,255,0.1);
}

/* ALTCHA captcha popup styling */
altcha-widget {
  --altcha-color-base: #000 !important;
  --altcha-color-text: #fff !important;
  --altcha-color-border: #fff !important;
  --altcha-color-accent: #fff !important;
  --altcha-border-width: 1px !important;
  --altcha-border-radius: 0px !important;
}

altcha-widget::part(dialog) {
  background: #000 !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  color: #fff !important;
}

altcha-widget::part(button) {
  background: transparent !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  color: #fff !important;
}

altcha-widget::part(button):hover {
  background: rgba(255,255,255,0.1) !important;
}

@media (max-width: 768px) {
  .home-planet { width: 90vw; height: 90vw; }
  .main { animation-duration: 300s; }
  .content-page .nav-menu { max-width: calc(100vw - 6em); }
  main { padding: 2em; }
  .newsletter-footer { padding: 2em; }
}