:root {
  /*global css*/
  --bg:url(https://user.uploads.dev/file/1b0881acd281727cf493117aae8c3983.png);
  --bg-size:52%;
  --font:auto;
  --font-size:auto;
  --font-color:;
  --a-color:#cc02d0;
  /* #main */
  --main-width:60%;
  --main-background:rgb(255, 213, 150);
  --main-background-size:20%;
  --main-border:ridge 15px #7d3603;
  --main-border-radius:9px;
  --main-margin:auto;
  --main-box-shadow:inset 0px 0px 37px -3px rgb(196, 127, 26), 25px 26px 10px -7px rgba(0,0,0,0.5);
  --main-padding:9px;
  --header-color:white;
  /* main-c-right */
  --main-c-right-border-radius:14px;
  --main-c-right-border:ridge 13px #7d3603;
  --main-c-right-background:#f7c67c;;
  /*navbar*/
  --navbar-border-radius:4px;
  --navbar-border:solid 5px #7d3603;
  --navbar-background:#f7c67c;
  /* main-c-left */
  --main-c-left-background:black; 
  --main-c-left-border-radius:10px;
  
  -for-chat-main-c-left-bg:none;
  
  --list-item-color:black;
  --list-item-decor:underline;
  --list-item-boxshadow:none;
  --list-item-font-size:1.5rem;

  --chatnavbar-border-radius:10px;
  --chatnavbar-border:solid 10px #7d3603;
  --chatnavbar-background:#f7c67c;
  
  --chatnavbar-h1-color:white;
  --chatnavbar-h1-bg:#7d3603;
  
  /*--notebox-*/
  --notebox-border-radius:3px;
  --notebox-font-family: cursive;
  --notebox-background: url(https://user.uploads.dev/file/8897b08f4bdb68c83d67caf550686123.png);
  --notebox-background-size: 400px;
  --notebox-background-attachment: local;
  --notebox-background-repeat:repeat;
  --notebox-box-shadow:none;
  
  --article-bg:#ffeb9f;
  --article-border:var(--article-border-color) solid 7px;
  --article-boxshadow:0px 15px 15px -7px rgba(0,0,0,0.5);;
  --article-textshadow:none;
  --article-active-border:var(--article-border-color-active) solid 7px;
  --article-active-boxshadow:0px 15px 15px 0px rgba(0,0,0,0.7);
  --article-h1-color:black;
  --article-border-color:#ffeb9f;
  --article-border-color-active:#ffeb9f;
  --article-border-radius:0px;
  --article-bodybg:url(https://imgc.allpostersimages.com/img/posters/eugene-sergeev-empty-bulletin-board-background-texture-natural-cork-board_u-l-q104sgb0.jpg?artHeight=550&artPerspective=n&artWidth=550&background=ffffff);
  /*navbar them switcher*/
  --themebtn1-display:flex;
  --themebtn2-display:none;
  --themebtn3-display:none;
  --themebtn4-display:none;
  
  --theme1divs-display:inline-block;
  --theme2divs-display:none;
  --theme3divs-display:none;
  --theme4divs-display:none;
}

:root[data-theme="windows98"] {
  /*global css*/
  --bg:#08898c;
  --bg-size:52%;
  --font:auto;
  --font-size:auto;
  --font-color:;
  --a-color:#cc02d0;
  /* #main */
  --main-width:60%;
  --main-background:#cccccc;
  --main-background-size:20%;
  --main-border:outset 5px;
  --main-border-radius:0px;
  --main-margin:auto;
  --main-box-shadow:25px 26px 10px -7px rgba(0,0,0,0.5);
  --main-padding:9px;
  --header-color:white;
  /* main-c-right */
  --main-c-right-border-radius:0px;
  --main-c-right-border:outset 5px;
  --main-c-right-background:#cccccc;
  /*navbar*/
  --navbar-border-radius:0px;
  --navbar-border:outset 5px;
  --navbar-background:#cccccc;
  /* main-c-left */
  --main-c-left-background:black; 
  --main-c-left-border-radius:0px;
  
  -for-chat-main-c-left-bg:none;
  
  --list-item-color:black;
  --list-item-decor:underline;
  --list-item-boxshadow:none;
  --list-item-font-size:1.5rem;

  --chatnavbar-border-radius:0px;
  --chatnavbar-border:outset 5px;
  --chatnavbar-background:#cccccc;
  
  --chatnavbar-h1-color:white;
  --chatnavbar-h1-bg:#000099;
  
  /*--notebox-*/
  --notebox-border-radius:0px;
  --notebox-font-family: cursive;
  --notebox-background: white;
  --notebox-background-size: 400px;
  --notebox-background-attachment: local;
  --notebox-background-repeat:repeat;
  --notebox-box-shadow:none;
  
  --article-bg:#cccccc;
  --article-border:var(--article-border-color) solid 2px;
  --article-boxshadow:none;
  --article-textshadow:none;
  --article-active-border:var(--article-border-color-active) solid 2px;
  --article-active-boxshadow:none;
  --article-h1-color:white;
  --article-border-color:#000099;
  --article-border-color-active:#000099;
  --article-border-radius:0px;
  --article-bodybg:var(--bg);
  /*navbar them switcher*/
  --themebtn1-display:none;
  --themebtn2-display:flex;
  --themebtn3-display:none;
  --themebtn4-display:none;
  
  --theme1divs-display:none;
  --theme2divs-display:inline-block;
  --theme3divs-display:none;
  --theme4divs-display:none;
}

:root[data-theme="aliengreen"] {
  /*global css*/
  --bg:url(https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/stars%20%26%20space/bgnebula.gif);
  --bg-size:52%;
  --font:auto;
  --font-size:auto;
  --font-color:#62ed2e;
  --a-color:#fa02ff;
  /* #main */
  --main-width:60%;
  --main-background:black;
  --main-background-size:20%;
  --main-border:solid #62ed2e 7px;
  --main-border-radius:4px;
  --main-margin:auto;
  --main-box-shadow:0px 0px 17px 7px rgba(98, 237, 46, 0.5);
  --main-padding:9px;
  --header-color:white;
  /* main-c-right */
  --main-c-right-border-radius:10px;
  --main-c-right-border:solid #6c4def 10px;
  --main-c-right-background:black;
  /*navbar*/
  --navbar-border-radius:0px;
  --navbar-border:outset 5px;
  --navbar-background:black;
  /* main-c-left */
  --main-c-left-background:black; 
  --main-c-left-border-radius:10px;
  
  -for-chat-main-c-left-bg:none;
  
  --list-item-color:#62ed2e;
  --list-item-decor:underline;
  --list-item-boxshadow:none;
  --list-item-font-size:1.5rem;

  --chatnavbar-border-radius:10px;
  --chatnavbar-border:solid #6c4def 10px;
  --chatnavbar-background:black;
  
  --chatnavbar-h1-color:#62ed2e;
  --chatnavbar-h1-bg:#6c4def;
  
  /*--notebox-*/
  --notebox-border-radius:0px;
  --notebox-font-family: cursive;
  --notebox-background: white;
  --notebox-background-size: 400px;
  --notebox-background-attachment: local;
  --notebox-background-repeat:repeat;
  --notebox-box-shadow:none;
  
  --article-bg:black;
  --article-border:var(--article-border-color) solid 7px;
  --article-boxshadow:0px 0px 20px 0px rgba(250, 2, 255,0.7);
  --article-textshadow:0px 0px 3px #62ED2E;
  --article-active-border:var(--article-border-color-active) solid 7px;
  --article-active-boxshadow:0px 0px 30px 0px var(--article-border-color-active);
  --article-h1-color:black;
  --article-border-color:#fa02ff;
  --article-border-color-active:#62ED2E;
  --article-border-radius:7px;
  --article-bodybg:var(--bg);
  /*navbar them switcher*/
  --themebtn1-display:none;
  --themebtn2-display:none;
  --themebtn3-display:none;
  --themebtn4-display:flex;
  
  --theme1divs-display:none;
  --theme2divs-display:none;
  --theme3divs-display:none;
  --theme4divs-display:inline-block;
}


body {
        image-rendering:pixelated;
        width:100%;
        height:100%;
        background:var(--bg);
        background-size:var(--bg-size);
        overflow-x:hidden;
        overflow-y:auto;
        text-align:center;
		font-family:var(--font);
		font-size:var(--font-size);
		color:var(--font-color);
        margin-left:-100px;
      }
      
      article img {
        max-width:97%;
      }
      
      article {
    position:absolute;
    background:var(--article-bg);
    border:var(--article-border);
    padding:0px;
    width:25%;
    max-height: 350px;
    box-shadow: var(--article-boxshadow);
    overflow:scroll;
    text-shadow:var(--article-textshadow);
    transition: transform ease-in-out 0.5s, border ease-in-out 0.5s, box-shadow ease-in-out 0.5s;
    border-radius: var(--article-border-radius);
    -webkit-user-select: none;
  }
  
  article h2 {
    background:var(--article-border-color);
    color:var(--article-h1-color);
    margin-top:0px;
  }
  
  article:hover {
    transform: scale(1.2);
    object-fit: contain;
    z-index:99;
  }

article:active {
  border:var(--article-active-border);
  box-shadow: var(--article-active-boxshadow);
  z-index:99;
}
      
      #main {
        width:var(--main-width);
        background:var(--main-background);
        background-size:var(--main-background-size);
        border:var(--main-border);
        border-radius:var(--main-border-radius);
        margin:var(--main-margin);
        box-shadow:var(--main-box-shadow);
        padding:var(--main-padding);
      }
      
      #header {
        font-size:4.5rem;
        font-weight:250;
        color:var(--header-color);
        margin:0;
      }
      
      .navbar {
        max-width:100%;
        height:50px;
        border-radius:var(--navbar-border-radius);
        border:var(--navbar-border);
        background:var(--navbar-background);
        display:flex;
        justify-content:center;
        overflow:hidden;
      }
      
      .navbar img {
        height:100%;
        cursor:pointer;
        transition: filter 0.3s ease-in-out;
      }
      
      .navbar img:hover {
        animation: pulse-brightness 1.3s ease-in-out infinite;
      }
      
      @keyframes pulse-brightness {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5); /* Boosts brightness by 70% */
  }
  100% {
    filter: brightness(1);
  }
}
      
      .main-content {
        width:100%;
        display:flex;
        justify-content:center;
        gap:10px;
        margin-top:10px;
      }
      
      .main-c-right {
        width: 65%;
        border-radius:var(--main-c-right-border-radius);
        border:var(--main-c-right-border);
        background:var(--main-c-right-background);
        height:460px;
        overflow:scroll;
      }
      
      .main-c-left {
        flex-grow:1;
        background:var(--main-c-left-background); 
        padding:10px;
        border-radius:var(--main-c-left-border-radius);
      }
      
      #for-chat-main-c-left {
        background:var(-for-chat-main-c-left-bg);
        padding:0px
      }
      
      #zo-floating {
        width:30%;
        height:750px;
        position:absolute;
        top:50px;
        left:1175px;
        transform:rotate(3deg);
        animation: float 4s ease-in-out infinite;
        pointer-events:none;
      }
      

@keyframes float {
  0% {
    transform: translateY(0px)rotate(5deg);;
  }
  50% {
    transform: translateY(-25px)rotate(5deg);; /* Adjust this number for a higher/lower float */
  }
  100% {
    transform: translateY(0px)rotate(5deg);;
  }
}

@keyframes float2 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-25px); /* Adjust this number for a higher/lower float */
  }
  100% {
    transform: translateY(0px);
  }
}

#main-thingy {
  display:nonne;
}

.chatbox-iframe {
  width:100%;
  height:100%;
  border:none;
  overflow:hidden;
}

#online-users {
  line-height:0.1;
  
}
                      
.list-item {
  font-size:var(--list-item-font-size);
  color:var(--list-item-color);
  cursor:pointer;
  text-decoration:var(--list-item-decor);
  box-shadow:var(--list-item-boxshadow);
}

.chatnavbar {
  max-width:100%;
  border-radius:var(--chatnavbar-border-radius);
  border:var(--chatnavbar-border);
  background:var(--chatnavbar-background);
  overflow:scroll;
}

.chatnavbar button {
  width:85%;
  display:block;
  margin:auto;
  margin-top:15px;
}

.chatnavbar h1 {
  background:var(--chatnavbar-h1-bg);
  margin:0;
  color:var(--chatnavbar-h1-color);
}

#cbox, #onioclub {
  display:none;
}

.notebox {
  border-radius:var(--notebox-border-radius);
  padding: 0px;
  border: none;
  font-family: var(--notebox-font-family);
  background:var(--notebox-background);
  background-attachment:var(--notebox-background-attachment);
  background-size:var(--notebox-background-size);
  background-attachment: local;
  background-repeat:var(--notebox-background-repeat);
  height:465px;
  overflow:hidden;
  box-shadow:var(--notebox-box-shadow);
}

.button {
  width:88px !important;
  height:31px !important;
}

#theme1btns {display:var(--themebtn1-display);}

#theme2btns {display:var(--themebtn2-display);}

#theme3btns {display:var(--themebtn3-display);}

#theme4btns {display:var(--themebtn4-display);}



.theme1divs {display:var(--theme1divs-display);}

.theme2divs {display:var(--theme2divs-display);}

.theme3divs {display:var(--theme3divs-display);}

.theme4divs {display:var(--theme4divs-display);}



a:link, a:visited {
  color: var(--a-color);
  text-shadow: var(--main-box-shadow);
}

a:hover, a:active {
  filter:brightness(120%);
}