styles.css

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  overflow: hidden; 
}

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

/* --- Celestial Bodies --- */

.sun {
  background-color: #ffbb33; 
  border-radius: 50%;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -520px); /* Adjusted position */
  animation: orbit 1s linear infinite; /* Slower orbit */

  box-shadow: 0 0 50px #ffbb33; 
}

.orbiting-sun {
  background-color: #ff5500; 
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-440%, -520px); /* Adjusted position */
  animation: orbit 0.000021s linear infinite; /* Slower orbit */
}

.black-hole {
  background-color: black;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 120px;
  left: 140px; 
  box-shadow: 22px 22px 4 30px #000; 
  animation: warp 2s ease-in-out infinite alternate; /* New animation */
}

.black-hole4 {
    background-color: rgb(220, 47, 47);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 110px;
    left: 140px; 
    box-shadow: 22px 22px 4 30px #000; 
    animation: warp2s ease-in-out infinite alternate;
 cubic-bezier(0.39, 0.575, 0.565, 1) ease-in-out infinite alternate; /* New animation */
  }

@keyframes orbit {
  0% { transform: rotate(0deg) translate(100px, 0); }
  100% { transform: rotate(360deg) translate(100px, 0); }
}

@keyframes warp { /* Black hole warp effect */
  0% { transform: scale(1); }
  100% { transform: scale(0.8); }
}

/* ... (Other styles for orbs, spaceship, etc.) ... */

/* --- New System --- */

.left-system {
  position: absolute; 
  left: 5%; 
  top: 60%; 
  transform: translateX(-100%); 
}

.left-system .sun { /* Smaller, faster sun */
  width: 60px;
  height: 60px;
}

.left-system .orbiting-sun { /* Faster orbit */
  animation: orbit 6s linear infinite; 
  transform: translate(-50%, -80px); /* Adjusted position */
}

/* --- Giraffe with Legs --- */

.giraffe {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 20px;
  height: 60px;
  background-color: orange;
  transform: rotate(45deg); 
}

.giraffe::before { /* Head */
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background-color: orange;
  border-radius: 50%;
}

.giraffe::after { /* Neck */
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 30px;
  background-color: orange;
}

.giraffe .leg { /* Leg style */
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 15px;
  background-color: orange;
}

.giraffe .leg:nth-child(1) { left: 10%; }
.giraffe .leg:nth-child(2) { left: 40%; }
.giraffe .leg:nth-child(3) { left: 60%; }
.giraffe .leg:nth-child(4) { left: 90%; }

/* ... (Your existing styles) ... */

/* Golden Octopus */
.octopus {
  position: absolute;
  right: 5%; /* Adjust right position */
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
  width: 150px;
  height: 120px;
}

.octopus .head {
  width: 60px;
  height: 60px;
  background-color: rgba(212, 175, 55, 0.8);
  border-radius: 60% 60% 40% 40%;
  transform: rotate(20deg);
}

.octopus .eye { 
    width: 15px;
    height: 15px;
    background-color: #111; /* Very dark, almost black eyes */
    border-radius: 50%;
    position: absolute;
    top: 25px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7); /* Subtle eye shine */
  }  

.octopus .eye.left {
  left: 15px;
}

.octopus .eye.right {
  right: 15px;
}

.octopus .arm {
    width: 120px; /* Longer arms */
    height: 12px; /* Thicker at the base */
    background-color: rgba(212, 175, 55, 0.8); /* Matching translucency */
    border-radius: 50% 50% 0 0;
    position: absolute;
    bottom: 10px; /* Start lower for more head prominence */
    transform-origin: 50% 100%;
    animation: tentacle-wave 4s linear infinite alternate; /* Slower wave */
  }
  

.octopus .arm-1 { left: 0;  transform: rotate(-45deg); animation-delay: 0.1s; }
.octopus .arm-2 { left: 15%; transform: rotate(-30deg); animation-delay: 0.2s; }
.octopus .arm-3 { left: 30%; transform: rotate(-15deg); animation-delay: 0.3s; }
.octopus .arm-4 { left: 45%; transform: rotate(0deg);   animation-delay: 0.4s; }
.octopus .arm-5 { left: 55%; transform: rotate(15deg);  animation-delay: 0.5s; }
.octopus .arm-6 { left: 70%; transform: rotate(30deg);  animation-delay: 0.6s; }
.octopus .arm-7 { left: 85%; transform: rotate(45deg);  animation-delay: 0.7s; }
.octopus .arm-8 { left: 100%; transform: rotate(60deg); animation-delay: 0.8s; }

/* Tentacle Wave Animation */
@keyframes tentacle-wave {
    0% { transform: rotate(0deg) translateY(0); }
    50% { transform: rotate(10deg) translateY(-5px); } /* Upward curve */
    100% { transform: rotate(-5deg) translateY(0); } /* Slight backswing */
  }

  /* ... (Your existing styles) ... */
  
 /* Big House */
 .house {
   position: absolute;
   right: 5%; 
   top: 60%; 
   transform: translateY(-50%); 
   width: 320px; /* Width is 4 times larger */
   height: 240px; /* Height is 4 times larger */
 }
 
 .house .roof {
   width: 0;
   height: 0;
   border-left: 160px solid transparent; /* Border size increased 4x */
   border-right: 160px solid transparent; /* Border size increased 4x */
   border-bottom: 120px solid brown; /* Border size increased 4x */
   position: absolute;
   top: 0;
   left: 0;
 }
 
 .house .walls {
   width: 320px; /* Width increased 4x */
   height: 120px; /* Height increased 4x */
   background-color: beige; 
   position: absolute;
   bottom: 0;
   left: 0;
 }
 
 .house .door {
   width: 60px; /* Width increased 4x */
   height: 80px; /* Height increased 4x */
   background-color: saddlebrown; 
   position: absolute;
   bottom: 5px;
   left: 120px; /* Adjusted position for larger house */
 }
 
 .house .window {
   width: 40px; /* Width increased 4x */
   height: 40px; /* Height increased 4x */
   background-color: lightblue; 
   position: absolute;
   top: 40px; /* Adjusted position for larger house */
 }
 
/* ... (Your other styles) ... */

.house .window.left { 
  left: 60px; 
  width: 60px; /* Adjust size as needed */
  height: 60px;
  background-color: black; /* Base color for space */
  border-radius: 50%; /* Make it circular */
  overflow: hidden; /* Hide content that overflows */
}

.house .window.left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px; /* Slightly larger than the window */
  height: 70px;
  background: radial-gradient(
    circle, 
    rgba(0, 0, 255, 0.8), /* Blue-ish center */
    rgba(0, 0, 0, 0) 70% /* Fades to transparent */
  );
  filter: blur(10px); /* Add a blur effect */
}

 
 .house .window.right {
   right: 60px; /* Adjusted position for larger house */
 }
 
 /* ... (Your other CSS styles) ... */
 
 /* Spaceship Docked */
 .spaceship {
   width: 50px;
   height: 20px;
   background-color: #ccc;
   position: absolute;
   top: 50%; /* Align with house vertically */
   right: 380px; /* Adjust based on house position */
   transform: translateY(-50%) rotate(90deg); /* Rotate for landing */
   animation: none; /* Remove flying animation */
 }
 
 /* Optional: Landing Gear */
 .spaceship::after {
   content: '';  background-color: rgb(37, 16, 223);

   position: absolute;
   bottom: -5px;
   left: 50%;
   transform: translateX(50%);
   width: 10px;
   height: 5px;
   background-color: rgb(37, 16, 223);
 }.spaceship::before {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 5px;
  background-color: rgb(37, 16, 223);
}

 

 /* ... (Your existing styles) ... */
 
 /* Chase Scene */
 .chase-scene {
   position: absolute;
   bottom: 20px; /* Position above the bottom */
   left: 0;
   width: 100%;
   height: 80px; /* Adjust height as needed */
   overflow: hidden; /* Hide elements that move outside */
 }
 
 /* Cat */
 .cat {
   width: 40px;
   height: 30px;
   background-color: orange;
   position: absolute;
   right: -50px; /* Start off-screen to the right */
   bottom: 10px;
   animation: run 5s linear infinite; /* Adjust speed as needed */
 }
 
 /* Dog */
 .dog {
   width: 50px;
   height: 40px;
   background-color: brown;
   position: absolute;
   right: -80px; /* Start further off-screen */
   bottom: 5px;
   animation: run 4s linear infinite; /* Slightly faster than the cat */
 }
 
 /* Running Animation */
 @keyframes run {
   0% { transform: translateX(0); }
   100% { transform: translateX(-120vw); } /* Move across the screen */
 }
 
 .blog-post {
   border: 1px solid #ccc;
   padding: 20px;
   margin-bottom: 20px;
 }
 
 .blog-post h2 {
   color: blue;
 }
 
 /* ... (Your other styles) ... */
 
 nav {
   background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
   padding: 10px;
   position: fixed; /* Keep it at the top */
   top: 0;
   left: 0;
   width: 100%;
 }
 
 nav a {
   color: white;
   text-decoration: none;
   margin-right: 20px;
 }