/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

         body {
         margin: 0;
         padding: 20px;
         background-image: url('/bg_space2.jpg');
         background-repeat: repeat;
         background-color: black;
         color: white;
         font-family: 'Verdana', sans-serif;
         text-align: center;
         line-height: 1.5;
         }
         h1 {
         font-size: 3em;
         margin-bottom: 0.1em;
         text-shadow: 0 0 5px #0bb, 0 0 10px #0bb;
         font-family: 'Orbitron', monospace;
         }
         p.byline {
         margin-top: 0;
         margin-bottom: 2em;
         font-style: italic;
         color: #aaddff;
         }
         h2 {
         text-decoration: underline;
         margin-bottom: 1em;
         color: #77ccff;
         }
         /* Container for your image links */
         .link-grid {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 30px;
         max-width: 900px;
         margin: 0 auto 40px;
         }
         /* Each linked image wrapper */
         .link-item {
         display: inline-block;
         width: 180px;
         height: 180px;
         border: 2px solid #0ff;
         border-radius: 12px;
         box-shadow: 0 0 10px #0ff;
         overflow: hidden;
         background-color: #111;
         cursor: pointer;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         .link-item:hover {
         transform: scale(1.1);
         box-shadow: 0 0 20px #0ff;
         }
         .link-item img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         }
         .caption {
         color: #aaddff;
         margin-top: 0.5em;
         font-weight: bold;
         font-size: 1em;
         font-family: 'Courier New', Courier, monospace;
         }
         a {
         color: #66ccff;
         text-decoration: none;
         }
         a:hover {
         text-decoration: underline;
         }
         
         .infobox {
  background-color: #111;
  border: 2px solid #0ff;
  border-radius: 10px;
  padding: 15px 20px;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 0 10px #0ff;
  font-family: 'Courier New', Courier, monospace;
  color: #aaddff;
  line-height: 1.6;
}

.infobox div {
  margin-bottom: 5px;
}

.infobox strong {
  color: #66ccff;
  display: inline-block;
  min-width: 160px;
}

.planetbox {
  background-color: var(--bg, #121); /* fallback: dark green */
  border: 2px solid var(--accent, #0fc);
  border-radius: 10px;
  padding: 15px 20px;
  margin: 20px auto;
  max-width: 1000px;
  box-shadow: 0 0 10px var(--accent, #0fc);
  font-family: 'Courier New', Courier, monospace;
  color: var(--text, #aaffcc);
  line-height: 1.6;
}

.planetbox div {
  margin-bottom: 5px;
}

.planetbox strong {
  color: var(--label, #66ffcc);
  display: inline-block;
  min-width: 160px;
}

.planetbox .planet-header {
  text-align: center;
  margin-bottom: 15px;
}

.planetbox .planet-name {
  font-size: 1.8em;
  font-weight: bold;
  color: var(--label, #66ffcc);
  text-shadow: 0 0 5px var(--accent, #0fc);
}

.planetbox .planet-designation {
  font-size: 1.2em;
  font-style: italic;
  color: var(--text, #aaffcc);
  text-shadow: 0 0 3px var(--accent, #0fc);
}

.planetbox p {
  margin-top: 1em;
  text-align: justify;
}


hr {
  height: 2px;
  background-color: #0cf;
  border: none;
}

.imgbox {
  max-width: 600px;
  margin: 30px auto;
  border: 2px solid #0ff;
  background-color: #111;
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 0 10px #0ff;
  text-align: center;
}

.imgbox img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

.imgbox figcaption {
  margin-top: 10px;
  font-size: 0.95em;
  color: #aaddff;
  font-style: italic;
  font-family: 'Courier New', Courier, monospace;
}

.page-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap; /* responsive fallback */
  margin-top: 30px;
}

.main-content {
  max-width: 600px;
  flex: 1 1 600px;
}

.site-news {
  max-width: 300px;
  background-color: #111;
  border: 2px solid #0ff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 10px #0ff;
  color: #aaddff;
  font-family: 'Courier New', Courier, monospace;
}

.site-news h2 {
  color: #66ccff;
  margin-top: 0;
  font-size: 1.4em;
  text-align: center;
  border-bottom: 1px solid #0ff;
  padding-bottom: 5px;
}

.site-news ul {
  list-style-type: none;
  padding-left: 0;
  font-size: 0.9em;
}

.site-news li {
  margin-bottom: 10px;
}