@keyframes floating {
  0%{
        transform: translateY(0);
    }
  50%{
        transform: translateY(var(--distance))
  }
  100%{
        transform: translateY(0);
    }
}

body {
  background: #424242 url(/MS_Paint_Webmasters/stars.webp) repeat center;
  font-family: XTW;
  background-size: 70%;
}

.container {
  width: 1200px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  position: relative;
  justify-content: center; 
}

.nav-buttons {
  width: fit-content;
  height: fit-content;
  flex-direction: row;
  margin: 10px 50px;
  animation: floating 1s infinite normal;
}

.nav-buttons p {
  color: #a4a4a4;
  position: relative;
  text-shadow: none;
  font-size: 22px;
}

.member-container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: fit;
}

.planet {
  z-index: 1;
  position: relative;
  width: 200px;
  height: 180px;
  margin: 10px 96px;
  padding: 2px 4px 3px 4px;
}

a {
  text-decoration: none;
}

.planet img {
  z-index: 1;
  animation: floating 1s infinite normal;
}

.member-container p {
  z-index: 10;
  position: relative;
  width: fit-content;
  height: auto;
  font-size: larger;
  margin-top: -20px;
  text-shadow: 0.08em 0 #222222, 0 0.08em #222222, -0.08em 0 #222222, 0 -0.08em #222222, -0.08em -0.08em #222222, -0.08em 0.08em #222222, 0.08em -0.08em #222222, 0.08em 0.08em #222222;
  text-decoration: none;
}

p:hover {
  filter: invert(1);
}