/* --- USER STYLES --- */

/* --- Variables --- */
:root {
    /*--header-image: url('images/sitegraphics/bg_.png');*/
    --body-bg-image: url('images/sitegraphics/bg.gif');
    --content: #43256E;
}

/* --- Custom Font --- */
@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: Nunito;
    src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
    font-weight: bold;
    font-style: italic;
}

/* ----=--------------------------------*/
/*--------------dark mode-(test!)-------*/
/* -------------------------------------*/
body {
	background-size: 400% 400%;
	animation: gradient 60s ease infinite;
	height: 100vh;
}

@keyframes gradient{
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* Apply to nested elements if needed */
.dark-mode main,
.dark-mode .aside,
.dark-mode .leftSidebar,
.dark-mode header,
.dark-mode section,
.dark-mode div,
.dark-mode p,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode body, 
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode a,
.dark-mode li,
.dark-mode ul,
.dark-mode ol,
.dark-mode blockquote,
.dark-mode span,
.dark-mode label,
.dark-mode input,
.dark-mode textarea,
.dark-mode button,
.dark-mode a,
.dark-mode ul {
  border: white;
  color-scheme: white;
  color: white;
  background-color: rgb(0, 0, 0); /* or set specific bg if needed */
}
.dark-mode aside{
    background-color: #000000;
}
/* -------------------------------------*/
/* ----------------end------------------*/
/* -------------------------------------*/

/* --- Body Styling --- */
body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    background-color: #08031A;
    background-image: var(--body-bg-image);
    background-repeat: repeat;
    background-size: 200px 150px;
    color: white;
}
button {
    background-color: #43256E;
    font-family: 'Nunito', sans-serif;
    color: white;
    border: none;
    display: inline-block;
    cursor: pointer;

}
/* Make sure everything includes padding/borders in size calculations */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

/* --- Main Layout --- */
#container {
    max-width: 1050px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures full height */
    padding: 6px;

}


#flex {
    display: flex;
    flex: 1;
}

/* --- Header --- */
#header {
    height: 75px;
    background-image: linear-gradient(#647ff58e, black, black, rgb(0, 0, 0));    
    border: 1px outset #007bff2c;
    background-size: 100%;
    border-radius: 50px 50px 1px 1px;    
}
#header h1 {
    font-size: 35px;
    text-align: left;
    margin-bottom: auto;
    margin-left: 10px;
}
.banner {
    width: 100%;
    border: inset black;
    max-height: 100%;
}

.banner2 {
    text-align: center;
    margin: auto;
}
.menu {
    display: none;
}
/* --- Navigation --- */
#navbar {
    height: 40px;
    background-color: #000000;
    border: outset #007bff2c;
    width: 100%;
}

#navbar ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    padding-top: 10px;
}

#navbar li a {
    color: #647ff5;
    font-weight: 800;
    text-decoration: none;
    transition: color 0.001s ease, text-decoration 0.001s ease; /* Smooth transition */
}

#navbar li a:hover {
    color: #34d0ff;
    text-decoration: underline;
}

/* --- Sidebar (Left) --- */
#leftSidebar {
    width: 250px;
    background-image: linear-gradient(rgb(0, 0, 0), #647ff57a);
    padding: 20px;
    flex-shrink: 0; /* Prevents shrinking */
    display: flex;
    height: 100%;
    flex-direction: column;
    min-height: 755px;
    max-height: 799px;
}
/* --- Box Styling --- */
.box {
    background-image: linear-gradient(rgb(0, 0, 0), #647ff57a);
    border: 3px outset #647ff5;
    padding: 10px;
}
.navbox {
    margin-bottom: 10px;
}

.navbox button {
    background-image: linear-gradient(#647ff57a,black, black, rgb(0, 0, 0));
    border: inset #a8b8ff6b;
    width: 100%;
    height: 40px;

}

.updates {
    background-image: linear-gradient(rgb(0, 0, 0), #647ff57a);
    border: 3px outset #647ff5;
    padding: 10px;
    overflow: scroll;
    max-height: 90px;
    width: 100%;
}
/* --- Main Content --- */
main {
    background-color: #00000077;
    flex: 1;
    padding: 10px;
    overflow: scroll;
    min-height: 755px;
    max-height: 799px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.158), #647ff527);

}
main h1, h2, h3 {
    margin: 0 auto;
    background-image: linear-gradient(#647ff57a, black, rgb(0, 0, 0));
    border-radius: 15px;
    text-align: center;
}

.nav-link {
    border-radius: 15px 15px 1px 1px;
}

/*------*/

/*------*/
.nav-link2 {
    margin: 0 auto;
    background-image: linear-gradient(#647ff57a, black, rgb(0, 0, 0));
    border-radius: 1px;
    text-align: center;   
    font-size: 95%;
    transition: all 0.1s ease-in-out;

}
.nav-link2:hover {
    transform: scale(1.1);  
    -webkit-box-shadow:0px 0px 18px 2px rgba(52,208,255,0.9);
    -moz-box-shadow: 0px 0px 18px 2px rgba(52,208,255,0.9);
    box-shadow: 0px 0px 18px 2px rgba(52,208,255,0.9);
    border-radius: 15px 15px 15px 15px;

}
main p {
    background-image: linear-gradient(#000000);
    border-radius: 15px;

}

/* --- Footer --- */
footer {
    background-image: linear-gradient(rgb(0, 0, 0), #647ff57a);
    border: outset #007bff2c;
    position: sticky;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 60px;
    padding: 10px;
    text-align: center;
    margin-bottom: auto;
    border-radius: 1px 1px 20px 20px;
}

/* --- Typography --- */
h1, h2, h3 {
    color: #647ff5;
}

h1 {
    font-size: 25px;
}

p {
    color: white;
    flex: 1; /* Ensures the text takes up the remaining space */
}

strong {
    color: #647ff5;
}

/* --- Global Link Styling --- */
body a {
    color: #647ff5;
    text-decoration: none;
    transition: all 0.1s ease-in-out;

}

body a:hover {
    color: #34d0ff !important;
    text-decoration: underline;
    transform: scale(1.1);

}

dl a {
    color: #34d0ff !important;
    text-decoration: underline;
}

dl a:hover {
    color: #34d0ff !important;
}

/* --- Top Bar --- */
#topBar {
    width: 100%;
    height: 30px;
    padding: 10px;
    font-size: smaller;
    background-color: #0a092d;
}



/* --- Profile Picture --- */
.divpfp button {
    position:fixed;
    flex-direction: column;  /* Stack items vertically */

}
.pfp {
    width: 120px;
    height: 120px;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 5px;
    margin-right: 10px;
    flex-direction: column;  /* Stack items vertically */
}
/*-comic box-*/
.comicbox {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    cursor: zoom-in;
}

.comicbox-content {
    position: relative;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}

.comicbox-content.scroll-mode {
    overflow: auto;
    padding: 2rem;
    cursor: zoom-out;
}

.comicbox-content.scroll-mode img {
    max-width: none;
    height: auto;
    width: auto;
    display: block;
    margin: 0 auto;
}

.comic-description {
    color: white;
    margin-top: 1rem;
    font-size: 1rem;
}

/* --- Lightbox Styling --- */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;  /* Ensure flex layout is enabled */
    display: none; /* Start hidden */
    flex-direction: column;  /* Stack items vertically */
    align-items: center;  /* Center horizontally */
    justify-content: center;  /* Center vertically */
    backdrop-filter: blur(10px);
    padding: 20px;
}

.lightbox .content {
    display: flex;
    flex-direction: column;
    align-items: right;
    justify-content: right;
    text-align: center!important; /* Center text in description */
}

.description {
    color: white;
    margin-top: 10px;
    font-size: 1rem;
}

.lightbox img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    text-align: right;
}

/* Blur background when lightbox is open */
.blurred #container {
    filter: blur(10px);
    pointer-events: none;
}
/* --- Gallery Styling --- */
.gallery-container {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

/* Make the grid scrollable inside a fixed-height box */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;

    /* Add these lines ↓ */
    max-height: 650px;        /* set your desired visible height */
    overflow-y: auto;          /* enables vertical scrolling */
    padding-right: 5px;        /* small spacing so scrollbar doesn't cover images */
}

/* Image styling stays the same */
.gallery-container img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.2s ease;
    border-radius: 5px;
}

.gallery-container img:hover {
    transform: scale(0.9);
    box-shadow: 0 0 10px 1px #34d0ff; /* x-offset y-offset blur-radius spread-radius color */
}

/*--------------------*/
/* Blog Post Previews */
/*--------------------*/
.post-preview {
    display: flex;
    align-items: column;
    justify-content: flex-start; /* Make sure content is aligned to the left */
    gap: 10px; /* Keeps the gap between the image and text consistent */
    padding: 10px; /* Optional: Adds uniform padding */
    width: 100%; /* Ensure they take up full available width */
    box-sizing: border-box; /* Ensures padding doesn't mess with the layout */
    border: solid #647ff5af;
    border-radius: 15px;
    background-color: #000000;
}
.post-preview a:hover {
    color: #34d0ff !important;
}
.post-info p {
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
}

.post-info small {
    display: inline; /* Make sure the date stays on the same line */
    white-space: nowrap; /* Prevent the date from breaking into two lines */
}

.post-preview {
    display: flex;
    flex-direction: column;  /* Stack title and preview text */
    align-items: flex-start;
    padding: 10px;
    margin-bottom: 20px;  /* Space between posts */
    
}

.post-info h1 {
    font-size: 25px;
    margin-bottom: 10px;  /* Space between title and preview text */
    max-width: 100%;
}

.post-info .preview-text {
    font-size: 16px;
    margin-bottom: 10px;  /* Space between preview text and footer */
    
}

.post-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* Align items to the left */
    font-size: 14px;
    margin-top: 10px;
    gap: 5px;  /* Add small gap between date and tags */
}

.post-footer .post-date {
    color: #b0b0b0;
}

.post-footer .post-tags {
    display: flex;
    gap: 5px;  /* Reduced the gap between tags */
}

.post-footer .post-tags .tag {
    color: #007bff;
    text-decoration: none;
}
/*--------------------*/
/*--------------------*/
/*--------------------*/

.post-footer .post-tags .tag:hover {
    text-decoration: underline;
}

/* --- Sidebar Image Styling --- */
#leftSidebar img {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}


/* --- Sidebar Icon Styling --- */
.mini-icon {
    width: 30px;
    height: 24px;
}

/* --- Button Styling (Square and Rectangular) --- */
.square-buttons-container {
    display: flex;
    flex-wrap: wrap;
}
.button-container {
    margin-bottom: 20px;
}

.square-button, .mini-icon-container {
    display: flex;
    overflow: hidden;
    background-color: transparent;
}

.square-button {
    width: 44px;
    height: 44px;
    margin: 0;
}

.square-button img, .mini-icon img {
    display: block;
}

.square-button img {
    width: 88px;
    height: 90px;
}

.mini-icon-container {
    width: 88px;
    height: 31px;
}

.mini-icon img {
    width: 20px;
    height: 50px;
}
.eightyeightthirtyone {
    width: 88px;
    height: 31px;
    margin: 0;
    object-fit:cover;
}
.divider {
    min-width: 100%;
    height: 20px;
}
/* --- Hide the Show Updates link by default (on desktop) --- */
#toggleSidebarLink.mobile-only {
    display: none;
}

/* --- Quote Styling --- */
.blockquote {
    padding: 60px 80px 40px;
    position: absolute;
}

.blockquote p {
    font-family: "Utopia-italic";
    font-size: 28px;
    font-weight: 700;
    text-align: center;
}

.blockquote:before {
    position: absolute;
    font-family: 'FontAwesome';
    top: 0;
    content: "\f10d";
    font-size: 160px;
    color: rgba(0, 0, 0, 0.1);
}

.blockquote::after {
    content: "";
    top: 20px;
    left: 50%;
    margin-left: -100px;
    position: absolute;
    border-bottom: 3px solid #bf0024;
    height: 3px;
    width: 200px;
}

blockquote {
  font-size: 1.12em; /* 20% smaller than 1.4em */
  width: 80%;
  margin: 50px auto;
  font-family: Open Sans;
  font-style: italic;
  color: #ffffff;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid #34d0ff;
  line-height: 1.6;
  position: relative;
  background: #0a092d;
}

blockquote::before {
  font-family: Arial;
  content: "\201C";
  color: #34d0ff;
  font-size: 3.2em; /* 20% smaller than 4em */
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote::after {
  content: '';
}

blockquote span {
  display: block;
  color: #ffffff;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em;
}

/* --- END OF QUOTE STYLING --- */
/* --- image styling --- */
.emote {
    width: 20px;
    height: 20px;
}
.blog-img {
    min-width: 100%;
    padding: 2px;
    margin-block: 2px;
    max-width: 100%;
}

.blog-img2/* this is the same as blog-img, just no minimum width, 
and I set it to float left! this is when I have a pic I want to be smaller, and I want the text to be on the side. */
 {
    padding: 10px;
    max-width: 50%;
    max-height: 50%;
    display:inline;
    float: left;
    background-color: black;
}
.blog-cover-img {
    max-width: 100px;  
    max-height: 100px;
    object-fit: cover;        /* Crop the image to fit inside the 100x100 box */
    object-position: center;  /* Ensure the image is centered within the box */
  }

.downloadpage {
    background-color:#0a092d;
    width: 80%;
    padding: 15px;
}
.downloadpage img {
    width: 500px;
}

/* --COMMENT BOX-- */



#HCB_comment_box textarea {
    background-color: #0a092d;
}

/* the entire html comment box container. applies to everything */
#HCB_comment_box {
  background-color: #0a092d;
    width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

#HCB_comment_box blockquote{
    background-color: black;
}
#HCB_comment_box p.error {
  border: 4px solid #34d0ff;
  background-color: #5e4e8c;
  color:#34d0ff;
}

#HCB_comment_box textarea, #HCB_comment_box input.text {
  border: 1px solid #34d0ff;
  border-left: 1px solid #336699;
  border-top: 1px solid #336699;
    color: #34d0ff;
  background: url(bg.png) repeat-x;
}

#HCB_comment_box .hcb-wrapper-half {
  display:block;
  width:50%;
  float:left;
}
#HCB_comment_box .hcb-wrapper {
  clear:both;
  margin-bottom:0.5em;
}
#HCB_comment_box input.text {
  display:block;
  width:97%;
  
}
/* the submit button */
#HCB_comment_box input.submit {
    margin:0 7px 3px 0;
    background-color:#43256E;
    border:1px solid #34d0ff;
    border-top:1px solid #336699;
    border-left:1px solid #336699;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#34d0ff;
    cursor:pointer;
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
#HCB_comment_box input.submit:hover{
    background-color:#34d0ff;
    border:1px solid #34d0ff;
    color:#34d0ff;
}

#HCB_comment_box span.home-desc {
  opacity:0.4;
}

/* the individual comment display containers */
#HCB_comment_box div.comment {
  border-top:1px solid #34d0ff;
  margin-bottom:0.5em;
  color: black;

}

/* the moderator message */
.hcb-mod  b{
  color:rgb(108, 171, 255);
}

/* next, prev, ok and x link style */
.hcb-link {
  color:#34d0ff;
  text-decoration:underline;
}
/* mini blog */
.mini-blog {
    background-color: #000000;
    max-height: 87%;
    min-height: 50%;
    overflow: scroll;
}
/* --- Mobile Responsiveness --- */
@media only screen and (max-width: 800px) {
    #header {
        height: auto; /* whatever crop height looks nice */
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        order: 1;
        position: sticky;
        width: 100%;
    }
    .menu {
        display: inline;
        height: 20px;
    }
    #header h1 {
        font-size: 20px;
    }
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 images per row on mobile */
        gap: 10px;
    }
    
    #flex {
        flex-direction: column; /* Stack the content and sidebar on mobile */
    }

aside {
    order: 2;
    width: 100%;
    background-image: linear-gradient(rgb(0, 0, 0), #647ff57a);
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
    flex-direction: column;
    display: none; /* Set default display */
}

aside.hidden {
    display: flex; /* Toggle this class to hide */
    position: fixed;
}

    main {
        order: 1; /* Ensure main content stays at the top */
    }
    img {
        max-width: 100%;
        height: auto;
    }
/* --- Quote Styling --- */
blockquote {
    padding: 30px 40px 20px;
    position: absolute;
}

blockquote p {
    font-family: "Utopia-italic";
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

blockquote:before {
    position: absolute;
    font-family: 'FontAwesome';
    top: 0;
    content: "\f10d";
    font-size: 160px;
    color: rgba(0, 0, 0, 0.1);
}

blockquote::after {
    content: "";
    top: 20px;
    left: 10px;
    margin-left: -10px;
    position: absolute;
    height: 3px;
    width: 200px;
}

blockquote {
  font-size: 1.12em; /* 20% smaller than 1.4em */
  width: 100%;
  margin: 10px auto;
  font-family: Open Sans;
  font-style: italic;
  color: #ffffff;
  padding: 1.2em 5px 1.2em 30px;
  border-left: 8px solid #34d0ff;
  line-height: 1.6;
  position: relative;
  background: #0a092d;
}

blockquote::before {
  font-family: Arial;
  content: "\201C";
  color: #34d0ff;
  font-size: 3.2em; /* 20% smaller than 4em */
  position: absolute;
  left: 5px;
  top: -10px;
}

blockquote::after {
  content: '';
}

blockquote span {
  display: block;
  color: #ffffff;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em;
}
    /* Show the Show Updates link only on mobile */
    #toggleSidebarLink.mobile-only {
        display: inline-block; /* Show on mobile */
    }

    /* Adjust other elements to fit the screen */
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Prevent horizontal scrolling */
    }

    #container {
        min-width: 100%!important; /* Make sure the container fits the screen */
        padding: 0 10px; /* Add some padding to avoid touching the edges */
    }

    #flex {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    main {
        width: 100%; /* Ensure main content is full-width */
        order: 1; /* Keep the main content on top */
    }

    footer {
        width: 100%; /* Ensure footer is full-width */
        order: 3; /* Footer goes at the bottom */
        position: sticky;
        height: auto;
    
    }

    /* --- Navbar Styles for Mobile --- */
    #navbar {
        width: 100%; /* Ensure navbar is full width */
        background-color: #0a092d;
        overflow: scroll;
        height: auto;
    }

    #navbar ul {
        display: flex;
        padding: 0;
        margin: 0;
        list-style-type: none;
        justify-content: flex-start; /* Align the navbar items to the left */
        overflow-x: auto; /* Allow horizontal scrolling */
        white-space: nowrap; /* Prevent wrapping of nav items */
    }

    #navbar li {
        padding: 5px; /* Adjust padding for touch devices */
    }

    #navbar li a {
        color: #647ff5;
        font-weight: 800;
        text-decoration: none;
        display: block;
        padding: 10px 15px;
    }

    #navbar li a:hover {
        color: #34d0ff;
        text-decoration: underline;
    }
    #dvd {
        display: none; /* Hide the DVD image on screens smaller than 768px */ 
    }

    /* Adjust font size for readability on mobile */
    h1, h2, h3 {
        font-size: 20px;
    }
    /*-----------------------------------------*/
    /*---------post preview styling------------*/
    /*-----------------------------------------*/
    .post-preview {
        display: flex;
        flex-direction: column;  /* Stack title and preview text vertically */
        align-items: flex-start;
        padding: 10px;
        margin-bottom: 20px;  /* Space between posts */
    }
    
    .post-info h1 {
        font-size: 25px;
        margin-bottom: 10px;  /* Space between title and preview text */
        max-width: 100%;  /* Allow h1 to take full width */
    }
    
    .post-info .preview-text {
        font-size: 16px;
        margin-bottom: 10px;  /* Space between preview text and footer */
    }
    
    /*-----------------------------------------*/
    /*-----------------------------------------*/
    /*-----------------------------------------*/

    .otro-blockquote {
  font-size: 1.2em; 
  width: 100%; /*this makes it fit on the screen on mobile :)*/
  margin: 50px auto;
  font-family: Open Sans;
  font-style: italic;
  color: #ffffff;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 8px solid #34d0ff;
  line-height: 1.6;
  position: relative;
  background: #0a092d;
}
}
.comicbox-content.scroll-mode img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
/*-pls load-*/