:root {
    --site-width: 700px;
    --primary: #00a2ff;
    --secondary: #e62e00;
    --tertiary: #65d100;
    --bg-base: #0f1013;
    --bg-primary: #18181d;
    --bg-secondary: #191a24;
    --bg-tertiary: #575757;
    --link: #595cff;
    --hover: #ff7b00;
    --nav-width: 290px;
    --nav-margin: 290px;
    --text-color: #ffffff;
    --global-margin: 5px;
    --sidebar-left-width: 161px;
    --middle-content-width: 516px;
    --sidebar-right-width: 300px;
}

html {
    background: -webkit-linear-gradient(270deg, #100720, #0f1236);
    background-attachment: fixed;
    background-position: center top; /* Adjust this value based on your layout */

    color: var(--text-color);
    font-family: Bahnschrift;
    font-weight: 100;
    padding: 0px;
    margin: 0px;
    cursor: url(images/catto_stand.gif), default;
    height: 100%;
}

body {
    background-image: url("images/stars.gif");
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center top; /* Adjust this value based on your layout */
}


/* text styles */

p, h1, h2, h3, h4, h5 {
    padding: 1px 15px 1px 15px;
}

ul, ol, li {
    list-style: none;
    padding: 1px 15px 1px 15px;
}

a {
    text-decoration: none;
    color: var(--link);
}

a:hover {
    color: var(--hover);
}


/* text colors */

h1, h2 {
    color: var(--primary);
}
h3 {
    color: var(--secondary);
}
h4 {
    color: var(--tertiary);
}

#small {
    font-size: 11px;
}


/* page container */

.base-container {
    margin: 0px auto;
    width: var(--site-width);
}


/* site container */

.main-container:after {
    content: "";
    display: table;
    clear: both;
}


/* banner */

.top-banner {
    height: 120px;
    background-color: var(--primary);
    background-image: url(images/funny.html\ web\ banner.png);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--global-margin);
    margin: var(--global-margin);
}


/* left sidebar */

.sidebar-left-main {
    width: var(--sidebar-left-width);
    float: left;
}

.sidebar-left {
    background-color: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--global-margin);
    width: var(--sidebar-left-width);
    float: left;
    margin: var(--global-margin);
}

.sidebar-left img {
    margin: 5px 10px 10px 15px;
}

.sidebar-left button {
    margin: 0px 15px 20px 15px;
}

.sidebar-left h3 {
    margin: 15px 0px 5px 0px;
    padding: 0px 15px;
}

.sidebar-left ul {
    margin: 0px 0px 5px 0px;
}

.sidebar-left li {
    padding: 0px 0px 6px 0px;
}


/* Status cafe */

#statuscafe-username {
    font-size: 13px;
    padding: 0px 0px 5px 0px;
    margin: 0px 15px;
}
#statuscafe-content {
    padding: 0px 0px;
    margin: 0px 15px;
}

#mango-ki {
    background: -webkit-linear-gradient(45deg ,#e62e00, #ff7b00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* middle */

.middle-content {
    clear: right;
    background-color: var(--bg-primary);
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--global-margin);
    width: var(--middle-content-width);
    float: right;
    margin: var(--global-margin);
}

.mainImg {
    margin: 10px 20px;
    display: inline;
}


/* wiki info box */

.infoBox {
    clear: both;
    float: right;
    display: inline;
    width: 140px;
    border: 1px solid var(--bg-tertiary);
    border-radius: 5px;
    margin: 20px;
}

.infoBox img {
    padding: 0px;
    width: 140px;
}

.infoBox p, .infoBox h4 {
    padding: 0px 8px;
    margin: 3px 0px;
}

.infoBoxSection {
    border-top: 2px solid var(--bg-tertiary);
}


/* footer */

.footer {
    clear: both;
	background: #000;
    color: #fff;
    border: 1px solid var(--bg-tertiary);
    border-radius: var(--global-margin);
    margin: var(--global-margin);
    width: 690px;
    margin: var(--global-margin) auto;
}

.footer p {
    font-size: 11px;
}


/* scrollbar */

/* width */
body::-webkit-scrollbar, iframe::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
  
/* Track */
body::-webkit-scrollbar-track, iframe::-webkit-scrollbar-track {
    background: #161616; 
}
   
/* Handle */
body::-webkit-scrollbar-thumb, iframe::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, rgb(0, 153, 255), rgb(100, 97, 255));
    border-radius: 10px;
}
  
/* Handle on hover */
body::-webkit-scrollbar-thumb:hover, iframe::-webkit-scrollbar-thumb:hover {
    background: var(--hover); 
}


/* code styling */

pre {
    font-size: 13px !important;
    background-color: var(--bg-color);
    padding: 5px 20px !important;
    margin: 20px 20px !important;
    text-align: left;
    border: 1px solid var(--text-outline);
    border-radius: 6px;
}

code {
    font-size: 13px !important;
}


/* post entries */

.post-nav {
    padding: 10px;
    margin-top: 10px;
    text-align: left;
    border: 1px solid var(--dark-primary);
    border-radius: 5px;
}

.post-nav a {
    margin: 10px;
}

.entry {
    background-color: var(--bg-color);
    padding: 10px;
    margin: 15px;
    text-align: left;
    border: 1px solid var(--bg-tertiary);
    border-radius: 5px;
}

.entry p {
    margin: 0px;
    padding-left: 5px;
}

#title {
    display: block;
}

#date {
    color: var(--hover);
    font-size: 14px;
}

#content p {
    display: inline;
}

#post img {
    max-width: 92%;
    margin: 0px 15px;
    border: 1px solid var(--primary);
    border-radius: 5px;
}

#video {
    max-width: 100%;
    margin: 5px 15px;
    border: 1px solid var(--primary);
    border-radius: 5px;
}

#HCB_comment_box {
    background-color: var(--bg-base);
    margin: 15px;
    padding: 10px 15px;
    border: 1px solid var(--bg-tertiary);
    border-radius: 8px;
}

#HCB_comment_box #hcb_form_content,
#HCB_comment_box #hcb_form_email,
#HCB_comment_box #hcb_form_name,
#HCB_comment_box #hcb_form_website {
    background-color: var(--bg-secondary);
}

#HCB_comment_box h3 {
    margin: 0;
    padding: 0;
}

#HCB_comment_box #hcb_msg {
    margin: 0;
    padding: 0;
}

#postSummaryTitle {
    margin: 0px 4px;
    padding: 0px;
}

#postList {
    height: 300px;
    overflow-y: auto;
}

#changeList {
    height: 200px;
    overflow-y: auto;
}

.postButtons {
    margin: 0px 0px 0px 15px;
}

.shareButton {
    display: inline;
}

.shareButton button {
    color: #fff;
    background-color: var(--link);
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px;
}

.shareButton button:hover {
    color: var(--bg-primary);
    background-color: var(--hover);
    border-color: #ffffff;
}

/* shoutbox */
#shoutbox {
    border-radius: 10px;
    margin: 10px;
    padding: 0px;
} 

#shoutbox iframe {
    margin: 0px;
    padding: 0px;
    border-radius: 10px;
}

/* FAQ navigation */
#faq-nav {
    position: sticky;
    top: 0px;
}

#faq-nav a {
    padding: 2px;
}

#internets {
    padding: 15px;
}