@import url('/static/rumirum/base.css');

body {
  margin: 0;
  padding: 0;
  background-image: url(nasa_batlowK_infinite_div2.png);
  background-size: 350%;
  background-position: 0% 0%;
  animation: bgShift 900s linear infinite;
  overflow: hidden;
}

@keyframes bgShift {
  0% {
    background-position: 100% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.room {
  display: flex;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: hover 5s ease-in-out infinite;
}

@keyframes hover {
  0% {transform: translateY(-0.7vh);}  
  50% {transform: translateY(0.7vh);}
  100% {transform: translateY(-0.7vh);}
}

svg path {
  transition: 0.3s;
  filter: blur(20px);
}

.image-container {
  position: relative; 
  display: inline-block;
  min-width: 650px;
}

.image-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.guestbook-text {
  position: absolute;
  top: 81%;    
  left: 27%;   
  transform: rotate(32deg); 
  width: inherit;
  height: inherit;
  font-size: min(7vw, 45px);
  color: white;   
  white-space: nowrap;
  transition: 0.3s;
  z-index: 3;
  
}

.art-text {
  position: absolute;
  top: 38.5%;    
  left: 72.5%;   
  transform: rotate(96deg); 
  width: inherit;
  height: inherit;
  font-size: min(7vw, 45px);
  color: white;   
  white-space: nowrap;
  transition: 0.3s;
  z-index: 4;
}

.blog-text {
  position: absolute;
  top: 1.8%;    
  left: 33%;   
  transform: rotate(-15.5deg); 
  width: inherit;
  height: inherit;
  font-size: min(7vw, 45px);
  color: white;   
  white-space: nowrap;
  transition: 0.3s;
  z-index: 3;
}

.guestbook-text.hovered {
  text-shadow: 0 0 5px #ece9eb;
}
.art-text.hovered {
  text-shadow: 0 0 5px #ece9eb;
}
.blog-text.hovered {
  text-shadow: 0 0 5px #ece9eb;
}

.asteroid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  pointer-events: none;
}

.asteroid-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asteroid-container #webring img {
  position: relative;
  width: max(300px, 23vw);
  object-fit: contain;
  left: -50%;
  transform: rotate(-11deg); 
}

.asteroid-container p {
  position: absolute;
  top: 5%;
  left: 5%;
  font-size: min(7vw, 45px);
  color: white;
  z-index: 1;
  text-shadow: 0 0 2px #000000;
  pointer-events: none;
}

.asteroid-container .asteroid {
  position: absolute;
  width: max(10vw, 100px);
  transition: filter 0.3s;
  z-index: 3;
  pointer-events: auto;
  filter: drop-shadow(10px 10px 20px rgba(255, 255, 255, 0));
}

.asteroid-container .asteroid:hover {
  filter: drop-shadow(10px 10px 20px rgba(255, 255, 255, 0.3));  
  cursor: pointer;
}

.asteroid-container #status {
  top: 5%;
  left: min(60vw, 400px);
}

.asteroid-container #about {
  top: min(80%, 600px);
  left: 10%;
}

.asteroid-container #webring {
  height: 20vh;
  width: 150px;
  top: 70%;
  left: 70%;
  justify-content: center;
}

.asteroid-container #webring p {
  top: -5vh;
}

.asteroid-container #under-construction {
  width: max(20vw, 200px);
  top: 2%;
  left: max(-40px, -5%);
  transform: rotate(-25deg); 
  pointer-events: none;
}

.asteroid-container #about img {
  animation: rotate2 9s ease-in-out infinite;
}

.asteroid-container #status img {
  animation: rotate1 10s ease-in-out infinite;
}

@keyframes rotate1 {
  0% {transform: rotate(-5deg);}  
  50% {transform: rotate(5deg);}
  100% {transform: rotate(-5deg);}
}

@keyframes rotate2 {
  0% {transform: rotate(5deg);}  
  50% {transform: rotate(-5deg);}
  100% {transform: rotate(5deg);}
}