body {
   background-image: url("https://i.pinimg.com/originals/3d/d3/c9/3dd3c9936600ba589042697322ab05c9.gif");
     background-size: cover;
  color: white;
 font-family: 'Play', sans-serif; 
  text-align: center; 
  }
  
  .manifesto { 
    background-image: url("https://i.pinimg.com/originals/97/b3/12/97b312409fbcabc96d97ef45bf8f852b.gif");
     border-radius: 8px;     /* Optional: rounds the corners */ position: relative;
  width: 730px;           
  height: 600px; /* <--- ADD THIS! Match it to your GIF height */
  margin: 50px auto; /* This centers the WHOLE thing on your screen */
  background-size: 100% 100%;
  border: 2px solid #333;
  margin-bottom: 30px;
  }
  
  .inner {
     position: absolute;  
  width: 420px; /* You can now change this to whatever you want! */
  top: 100px;    /* Distance from the top of the GIF */
  left: 50%;
  transform: translateX(-50%);
  background-color: #0A1C0A;
  opacity: 0.85; /* Pro-tip: use 0.85 instead of 75% for better text visibility */
  padding: 20px; /* Add some padding so text doesn't touch the borders */
  border: 1px groove #2E8C33;
  box-shadow: 0 0 20px #2E8C33; 
  height: auto;      /* Tells the box: "Only be as tall as the text" */
  padding: 7px 10px;
  }
  
  
  .urban {
     position: absolute;  
  
  /* 1. MAKE IT WIDE */
  width: 800px;           /* Increased from 420px to make it wide */
  max-width: 90%;        /* Safety: stops it from breaking on small screens */

  /* 2. MAKE IT TALL */
  min-height: 1000px;      /* Sets a "floor" so it's always tall, even with little text */
  height: auto;           /* Allows it to grow even taller if you write a lot */

  /* 3. STAY IN THE MIDDLE */
  left: 50%;
  transform: translateX(-50%);
  top: 50px;              /* Distance from the top of the page */

  /* LOOKS (Your current styles) */
  background-color: #0A1C0A;
  opacity: 0.85; 
  padding: 30px;          /* Increased padding for a "cleaner" look */
  border: 1px groove #2E8C33;
  box-shadow: 0 0 20px #2E8C33;
  box-sizing: border-box; /* Essential so padding doesn't mess up the width */
  }
  
  
  
  
  
  
  .app-row {
   position: absolute; 
  top: 100px;         
  right: 360px;       
  
  display: flex;       
  flex-direction: column; /* Stacks them Top to Bottom */
  align-items: center;    
  gap: 150px;             /* This will now push the bottom icon DOWN */
  
  width: 200px;           /* Give the tray enough room */
  height: auto;           
}




#theory1, #theory2 {
  position: static;       /* This "un-ghosts" them so they follow the gap */
  width: 50px;
  height: 50px;
}

.app-icon {
  display: flex;
  flex-direction: column; /* Stacks image on top, text on bottom */
  align-items: center;    /* Centers them horizontally */
  width: 64px;            /* Standard icon size */
  cursor: pointer; /* Changes mouse to a hand */
  transition: transform 0.2s; /* Makes the movement smooth */
}

.app-icon img {
  cursor: pointer; /* Changes mouse to a hand */
  transition: transform 0.2s; /* Makes the movement smooth */
  width: 50px;            /* Control icon size here */
  height: 50px;
  margin-bottom: 5px;     /* Space between icon and label */
}

.app-icon span {
  font-size: 12px;        /* Small "app label" look */
  color: #0f0;            /* Mad Scientist green? */
  text-shadow: 0 0 5px #0f0;
}

  
  
  #theory1 { 
    width:50px;
     cursor: pointer; /* Changes mouse to a hand */
  transition: transform 0.2s; /* Makes the movement smooth */
  }
  
  
  #theory1, #alienreal {
  cursor: pointer; /* Changes mouse to a hand */
  transition: transform 0.2s; /* Makes the movement smooth */
}
  
  
  
  
  
  
  
  .manifesto, .inner {
  box-sizing: border-box; /* This is a life-saver! */
}

  
  .geostar-regular {
  font-family: "Geostar", serif;
  font-weight: 700;
  font-style: normal;
  color: white;
  border: green;
   text-shadow: 0 0 10px #2E8C33, 0 0 20px #2E8C33;
    font-size: 27px;        /* Increased from 22px */
  margin-bottom: 30px;    /* Pushes the paragraph below it DOWN */
  display: block;  
  margin-top:60px;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}