/* 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 {
  
  
  
  /* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



 /* new layout */
  background-image: url(myspacered.jpg);
  background-color: black;
  font-family: "courier new";
  font-size: 13px;
  color: #000;
  line-height: 1.5;
  padding: 10px;
}

a {
  cursor: crosshair;
}

img {
  vertical-align: middle;
  max-width:100%;
  max-height:100%
}

img {
  max-width: 100%;
  height: auto;
}

iframe {
  overflow:auto;
  display: block;
  width: 100%;
}

/* Container */
.container {
  max-width: 1000px;
  margin: 0 auto;
  background-color: gray;
  /* NOTE:: I THINK THIS ONE CHANGED THE BIG BOX TO PINK!!! */
  background-image: url(myspacered.jpg');
  border: 2px solid darkred;
  padding: 20px;
  box-shadow: 0 0 5px black;
}

/* Header */
header {
  text-align: center;
  background-color: darkred;
  padding: 24px;
  border-radius: 8px;
}

header h1 {
  color: black;
  font-size: 2.5em;
}

nav {
  margin-top: 10px;
}

nav a {
  margin: 0 10px;
  text-decoration: none;
  color: darkred;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
}

/* Content Area */
.content-area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 20px;
  align-items: flex-start; /* ✅ Add this line */
}

aside {
  flex: 0 0 300px;
  background-color: black;
  padding: 15px;
  border: 1px solid black;
  border-radius: 8px;
}

/* Main (remaining space) */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: black;
  /* BACKGROUND OF INTRO TEXT*/
  padding: 15px;
  border: 1px solid black;
  border-radius: 8px;
}

/* Make windows fill vertical space */
aside .window,
main .window {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

aside .window:not(:last-child),
main .window:not(:last-child) {
  margin-bottom: 15px;
}

/* Footer */
footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 2px dashed darkred;
  font-size: 0.9em;
}

/* Responsive */
@media (max-width: 700px) {
  .content-area {
    flex-direction: column;
  }

  aside,
  main {
    width: 90% !important;
    max-width: 90% !important;
    flex: none !important;
  }

  nav a {
    display: inline-block;
    margin: 5px;
  }

  header h1 {
    font-size: 2em;
  }
}

/* Header styling */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: black;
  padding: 20px 20px;
  border-bottom: 2px solid darkred;
}

.hamburger {
  font-size: 28px;
  cursor: pointer;
  display: none;
  color: darkred;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 15px;
  background-color: black;
  gap: 15px;
  border: 1px solid darkred;
  border-radius: 8px;
  margin-top: 15px;
}

.mobile-menu .window {
  width: 100%;
}

.mobile-menu.show {
  display: flex;
}

/* Responsive layout */
@media (max-width: 768px) {
  
  
  
  .hamburger {
  font-size: 28px;
  cursor: pointer;
  display: red;
}

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: 15px;
  background-color: black;
  gap: 15px;
  border: 1px solid #a3bbe5;
  border-radius: 8px;
  margin-top: 15px;
}

.mobile-menu .window {
  width: 100%;
}

.mobile-menu.show {
  display: flex;
}

/* Responsive layout */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  aside {
    display: none;
  }

  

  /* main content stays visible on mobile */
}

/* Center header image + text */
.header-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex-grow: 1;
}

.header-left img {
  max-width: 100%;
  height: auto;
}

.tagline {
  font-size: 13px;
  color: red;
  margin-top: 5px;
}

/* Shrink on mobile */
@media (max-width: 768px) {
  .header-left img {
    width: 80%;
  }

  .tagline {
    font-size: 14px;
  }

}

/* onionring.js is made up of four files - onionring-widget.js, onionring-index.js, onionring-variables.js and onionring.css (this one!)
// it's licensed under the cooperative non-violent license (CNPL) v4+ (https://thufie.lain.haus/NPL.html)
// it was originally made by joey + mord of allium (蒜) house, last updated 2020-10-24 */

/* === ONIONRING.CSS === */
/* this file affects the style of the widget. remember to replace all instances of #wbl2 with whatever value you have for ringID in the onionring-widget.js file. make sure it still has the # at the front, though! probably easiest to use find+replace to do it */

#wbl2 a:link {text-decoration: none; color: #7fcae6;}
#wbl2 a:visited {text-decoration: none; color: #7fcae6;}
#wbl2 a:hover {text-decoration: none; color: #404040;}
#wbl2 a:active {text-decoration: none; color: #7fcae6;}

#wbl2 {
  margin: 0 auto;
  padding: 0px; /* creates some space around the widget */
}

#wbl2 table {
  background-color: #ffffff; /* makes the background pure white */
  margin: 0 auto; /* centers the widget */
  font-size: 13px;
  font-family: verdana;
  color: #404040;
  border: 2px solid darkred;
}

#wbl2 table tr td {
  padding: 5px; /* creates some space between the links and text inside the widget */
}

#wbl2 .webring-prev {
  text-align:right;
}

#wbl2 .webring-info {
   text-align:center;
}

#wbl2 .webring-next {
  text-align:left;
}

#wbl2 .webring-links {
  font-size:small;
}

    .window {
      border: 2px solid darkred;
      background-color: #e8effe;
      box-shadow: inset 0 0 0 1px #fff;
      font-family: verdana;
      font-size: 13px;
      width: 100%;
    }

    .window-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: darkred;
      border-bottom: 2px solid darkred;
      padding: 5px 10px;
    }

    .window-title {
      font-size: 18px;
     
    }

    .window-buttons {
      display: flex;
      gap: 5px;
    }

    .btn {
      width: 24px;
      height: 24px;
      text-align: center;
      line-height: 22px;
      background-color: #b8caf1;
      border: 2px solid darkred;
      color: #01144a;
      font-weight: bold;
      font-size: 16px;
      box-shadow: 2px 2px 0 darkred;
      border-radius: 2px;
    }

    .window-content {
      background: repeating-linear-gradient(
        to bottom,
        #f1f5fe,
        #f1f5fe 23px,
        #d9f4fa 24px
      );
      padding: 17px;
    }

  a:link { text-decoration: none; color: #00104a; }
  a:visited { text-decoration: none; color: #00104a; }
  a:hover { text-decoration: underline; color: #6075C7; }
  a:active { text-decoration: none; color: #00104a; }
  
  a.special-link:link    {text-decoration: none; color: #6075C7;}
  a.special-link:visited {text-decoration: none; color: #6075C7;}
  a.special-link:hover   {text-decoration: underline; color: #00114c;} /* custom hover */
  a.special-link:active  {text-decoration: none; color: #6075C7;}

.padded-right .window-content {
  padding: 0px 0px 0px 15px;
}

  
}