/* 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." */

/*Custom Font*/
@font-face {
  font-family: "space-mono";
  src: url(/space-mono/spacemono-regular.tff) format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: "space-mono";
  src: url(/space-mono/spacemono-bold.tff) format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: "space-mono";
  src: url(/space-mono/spacemono-italic.tff) format('truetype');
  font-style: italic;
}

@font-face {
  font-family: "space-mono";
  src: url(/space-mono/spacemono-bolditalic.tff) format('truetype');
  font-weight: bold;
  font-style: italic;
}

:root {
  --accent-light: #fafcfd;
  --accent-dark: #188efc;
  --accent-muted: #afafaf;
}

/* General styles (applies to all pages) */

/* ... (your existing @font-face, :root, and general body styles remain the same) ... */

body {
    background-image: url("/Time Twister Layout/images/background.jpg");
    background-color: #CAEAFD;
    background-repeat: repeat-y;
    background-position: center top;
    margin: 0;
    padding: 0;
    font-family: "space-mono", monospace;
    font-size: 14px;
    letter-spacing: 1px;
    color: #158dc5;
    min-height: 100vh;
    /* Removed display: flex, flex-direction, align-items from body
       as we're centering the main-layout-container directly now */
}
strong {
  color: var(--accent-dark);
}
em {
  color: var(--accent-light);
}
u {
  color: var(--accent-dark);
}
a {
  color: var(--accent-dark);
  text-decoration: none;
}

/* Homepage-specific background */
.homepage 
{
background-color: #C8E8FE;
background-repeat: repeat-y;
font-family: "space-mono", monospace;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
color: #158dc5;
}

/* Not Found-specific background */
.notfound
{
background-image: none;
background-color: #C8E8FE;
background-repeat: repeat-y;
font-family: 'space-mono', monospace;
font-size: 14px;
font-weight: 500;
text-align: center;
letter-spacing: 1px;
color: #158dc5;
}

/* --- H1/H2 and other generic text styles --- */
h1 {
    font-family: "space-mono", monospace;
    font-size: 14px;
    color: #4bb4fc;
    font-weight: bold;
    border-bottom: #FFFFFF 2px dotted;
    letter-spacing: 2px;
    text-align: center;
    text-transform: lowercase;
}

h2 {
    font-family: "space-mono", monospace;
    font-size: 12px;
    color: #4bb4fc;
    font-weight: bold;
    border-bottom: #FFFFFF 2px dotted;
    letter-spacing: 2px;
    text-align: center;
    text-transform: lowercase;
}

blue { /* do not really use except for guide */
    font-size: 12px;
    font-family: "space-mono", monospace;
    color: #4bb4fc;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-transform: lowercase;
    font-style: italic;
    border-bottom: none;
}

/* Specific h1 style for the special heading */
.special-heading {
    font-family: "space-mono", monospace;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: bold;
    border-bottom: #FFFFFF 2px dotted;
    letter-spacing: 2px;
    text-align: center;
    text-transform: lowercase;
}

/*Centering */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* --- MAIN LAYOUT CONTAINER --- */
.main-layout-container {
    width: 780px; /* Max width of your content blocks */
    min-height: 800px; /* Adjust this height to encompass all content from top to bottom,
                          start with a large value and reduce it.
                          Your header image is 600px, content might go below that. */
    margin: 0 auto; /* This centers the container horizontally on the page */
    position: relative; /* VERY IMPORTANT: This makes children positioned absolutely relative to this container */
    /* No flexbox properties here for the container itself, as children are absolute */
}

/* --- ABSOLUTELY POSITIONED ELEMENTS WITHIN main-layout-container --- */

#header-image {
    position: absolute; /* Position relative to .main-layout-container */
    left: 0; /* Align to the left edge of .main-layout-container */
    top: 0; /* Align to the top edge of .main-layout-container */
    width: 780px; /* Use the exact width of your image */
    height: 600px; /* Use the exact height of your image */
    /* Ensure the image within this div fills it */
}
#header-image img {
    width: 100%;
    height: 100%;
    display: block;
}


#content {
    position: absolute; /* Position relative to .main-layout-container */
    left: 86px; /* Your original left offset */
    top: 510px; /* Your original top offset, adjust this for desired overlap */
    width: 434px; /* Your desired content width */
    /* Add padding/margin as needed for internal spacing, but not for positioning */
    box-sizing: border-box; /* Ensures padding/border are included in the 434px width */
}

#navigation {
    position: absolute; /* Position relative to .main-layout-container */
    left: 572px; /* Your original left offset for navigation */
    top: 120px; /* Your desired top offset for navigation (-470px relative to image top,
                  so this might need adjustment from your original 120px) */
    width: 170px; /* Your desired navigation width */
    /* Add padding/margin as needed for internal spacing */
    box-sizing: border-box;
}

#navigation {
    position: absolute; /* Keep this to control its precise placement */
    left: 572px; /* Your original left offset for navigation */
    top: 120px; /* Your desired top offset for navigation (fine-tune this if needed) */
    width: 200px; /* Your desired navigation width */
    box-sizing: border-box;
    /* You might want to add some padding here if you had it before the absolute positioning */
    padding: 10px;
}

/* --- MENU SPECIFIC STYLES (refined for absolute context) --- */
/* These styles should now work better as #navigation is explicitly positioned */

#navigation h1 {
    font-size: 14px; /* Bumped up font size for menu H1s, matching general H1s */
    color: #4bb4fc; /* Color from your general H1s */
    font-weight: bold;
    border-bottom: #FFFFFF 2px dotted; /* Bring back the dotted border */
    letter-spacing: 2px;
    text-align: center; /* Keep centered for headings like "cyber.sunshine" */
    text-transform: lowercase;
    margin-top: 10px; /* Adjust spacing as needed */
    margin-bottom: 5px; /* Adjust spacing as needed */
    padding: 0; /* Reset padding if necessary */
}

#navigation p {
    font-size: 14px; /* Bumped up font size for menu paragraphs/links */
    margin: 0; /* Keep margin reset for compact list */
    padding: 0; /* Keep padding reset for compact list */
    line-height: 1.7; /* Adjust line height for closer text */
    text-align: left; /* Align text within the paragraph to the left */
}

#navigation a {
    font-size: 14px; /* Ensure links in navigation are also larger */
    display: inline; /* Make links inline again to be on the same line as the image */
    color: #158dc5; /* Your desired link color */
    text-decoration: none; /* No underline by default */
    /* No padding here, as they are inline */
}

#navigation img {
    vertical-align: middle;
    margin-right: 5px;
}

#statuscafe {
    padding: .5em;
    background-color: #c8e7fd;
    border: 1px dotted #ffffff;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

A{cursor:alternate}
a:active, a:link {text-decoration:none; font-size:14px; color: #158dc5;}
a:VISITED {text-decoration:underline; font-size: 14px; color:#158dc5;}
A:hover{color:#FFFFFF;
}

/* --- Banner Gallery Styles --- */
.banner-gallery {
    display: flex; /* Use flexbox to arrange banners */
    flex-wrap: wrap; /* Allow banners to wrap to the next line */
    justify-content: center; /* Center banners horizontally within the gallery */
    align-items: flex-start; /* Align banners to the top of their row */
    gap: 15px; /* Space between banner thumbnails */
    padding: 10px 0; /* Optional padding around the entire gallery */
    margin-bottom: 20px; /* Space below the banner gallery */
}

.banner-gallery a {
    display: block; /* Make the entire link block-level for sizing */
    line-height: 0; /* Remove extra space below images */
}

.banner-thumbnail {
    max-width: 180px; /* Set your desired thumbnail width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Important for removing extra space and consistent sizing */
    border: 2px solid #158dc5; /* Example border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Example shadow */
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out; /* Smooth hover effect */
    object-fit: contain; /* Ensures the image fits within its box without cropping */
}

.banner-thumbnail:hover {
    transform: scale(1.05); /* Slightly enlarge thumbnail on hover */
    border-color: #FFFFFF; /* Change border color on hover */
}

/* --- Signature Gallery Styles (similar, but potentially smaller thumbnails) --- */
.signature-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px; /* Space between signature thumbnails */
    padding: 10px 0;
    margin-bottom: 20px;
}

.signature-gallery a {
    display: block;
    line-height: 0;
}

.signature-thumbnail {
    max-width: 120px; /* Adjust for smaller signature thumbnail size */
    height: auto;
    display: block;
    border: 1px solid #4bb4fc; /* Example border for signatures */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
    object-fit: contain;
}

.signature-thumbnail:hover {
    transform: scale(1.1);
    border-color: #FFFFFF;
}

/* You might want to remove the general .center class from these images as flexbox/grid handles centering */
/* .center { /* Existing .center class */
/* display: block; */
/* margin-left: auto; */
/* margin-right: auto; */
/* text-align: center; */
/* } */

/* Styles for a single clickable feature image that links to a page */
.clickable-image-wrapper {
    text-align: center; /* Centers the image and text */
    margin: 30px auto; /* Adds space above/below and centers the wrapper */
    max-width: 400px; /* Adjust this to your desired max width for the feature image */
    display: block; /* Ensures it takes its own line and can be centered with margin: auto */
}

.clickable-image-wrapper a {
    display: block; /* Make the whole link block-level */
    line-height: 0; /* Remove extra space below image */
    text-decoration: none; /* Remove underline from the link */
    border: none; /* No default border on the link */
}

.feature-image-thumbnail {
    max-width: 100%; /* Ensures the image scales within its wrapper */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Prevents extra space below image */
    margin: 0 auto; /* Centers the image within its wrapper */
    border: 3px solid #4bb4fc; /* Example: A blue border */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* More prominent shadow */
    transition: all 0.3s ease-in-out; /* Smooth transitions for hover effects */
}

.feature-image-thumbnail:hover {
    border-color: #FFFFFF; /* Change border color on hover */
    transform: translateY(-5px); /* Slightly lift the image on hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.4); /* More prominent shadow on hover */
}

.clickable-image-wrapper p {
    margin-top: 10px; /* Space between image and text */
    font-size: 1.1em;
    color: #158dc5; /* Text color */
    font-weight: bold;
}