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

::-webkit-scrollbar {
  width: 16px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #fff;
  background-image: url(https://i.imgur.com/Qtm9Z60.png);
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
::-webkit-scrollbar-track {
  background-color: #fff;
  background-image: url(https://i.imgur.com/IGXGYKz.png);
}
::-webkit-scrollbar-button:vertical:increment {
  background-image: url(https://i.imgur.com/WhC8iy3.png);
  width: 14px;
  height: 16px;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
::-webkit-scrollbar-button:vertical:decrement {
  background-image: url(https://i.imgur.com/fQ18mrR.png);
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 14px;
  height: 16px;
}

body {
  background: #000 url('misc-imgs/backgrounder.png') no-repeat center fixed;
  background-size: cover;
  color: #f2f2f2;
  font-size: 12px;
  font-family: 'Consolas', monospace;
}


h1 {
  font-family: 'Lucida Console', monospace;
  font-size: 26px;
  padding: 5px 0px;
  background-color: #2e093c;
  color: #d3fbff;
  border: dashed 3px #0fa71c;
  text-align: center;
}

h2 {
  color: #ccffcc;
  font-size: 20px;
  letter-spacing: 2px;
  font-family: 'Space Mono', monospace;
}

h3 {
  color: white;
  font-size: medium;
  padding: 5px;
  border-bottom: solid 1.5px #afffb82e;
}

b, strong, em, i {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
}

b, strong {
  font-weight: 500;
    color: #00f700;
}

em, i {
  color: #f270ff;
}

a {
  text-decoration: none;
  font-weight: 600;
  color: #85ff8e;
}

@keyframes links {
  from {color: #85ff8e; font-size: 12px;}
  to {color: #f7d7ff; font-size: 13px;}
}
  
a:hover {
  color: #f7d7ff;
  font-size: 13px;
  animation-name: links;
  animation-duration: 0.5s;
  text-decoration:  underline dotted #e807ff;
}

li {
  text-align: left;
  padding-left: 5px;
}

hr {
  border: none;
  border-top: 1px dashed #0fa71c;  
}

/* LI AND IDEA STYLING */
li::marker {
  content:"\2605";
}

li.complete::marker {
  color: #ff00a2;
}

li.inprogress::marker {
  color: #00ff95;
}

.inprogress {
  color: #00eaff;
}

.important {
  color: #ffff00;
}

li.important::marker {
  color: #ff9d00;
}

.indent {
  margin-left: -15px;
}

/* MAIN CONTENT */ 
.header {
  width: 100%;
  height: 150px;
  background: #000000 url('misc-imgs/header2.png') no-repeat center;
  background-size: contain;
}

.header2 {
  width: 96%;
  height: 150px;
  background: #000000 url('misc-imgs/header2.png') no-repeat center;
  background-size: contain;
}

header img.imooder {
  width: 80px;
  margin-bottom: -5px;
}

.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: auto;
}

#sidebar-test {
  height: 0;
  width: 225px;
  background-color: #004c20;
  padding: 0 5px 0 20px; 
  overflow: hidden;
  border: none;
}

#sidebar-test iframe {
  border:  8px ridge #8e049c;
  width: 225px;
  height: 1020px;
  top: 25px;
  left: 25px;
  position: absolute;
}

header {
  max-width: 700px;
  width: 80vw;
  height: auto;
  text-align: center;
  margin-top: 25px;
  color: #f2f2f2;
  background-color: #00000061;
  margin-bottom: 20px;
}

header h1 {
  font-family: 'Lucida Console', monospace;
  font-size: 26px;
  padding: 5px 0px;
  background-color: #0000ff00;
  color: #ff00d4;
  border: none;
  text-align: center;
}

header img {
  max-width: 700px;
  width: 80vw;

}
#winamp-container {
  width: 280px;
  height: 380px;
  position: fixed;
  top: 20px;
  right: 50px;
  padding: 0px;
  margin: 0px;
  z-index: -1;
}

#container {
  max-width: 1000px;
  width: 90vw;
  height: 1000px;
  margin: 50px auto 0;
  background-color: #000000;
  padding: 0;
  padding-bottom: 10px;
  text-align: center;
  border: 8px ridge #8e049c;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: space-between;
}

#contentfull {
  width: 100%;
  height: 100%;
  padding: 20px;
}

#sidebar {
  height: 0;
  width: 300px;
  background-color: #004c20;
  padding: 0 5px 100% 10px;
  overflow: hidden;
  border: none;
  position: relative;
}

iframe {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0.5vw;
}


.content {
  max-width: 1000px;
  width: 90vw;
  padding-bottom: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content p {
  padding: 0 20px 0 20px;
}

.break {
  padding: 5px;
  margin: auto;
}

.forceblinkie {
  width: 150px;
}

.diary {
  font-size: 20px;
  padding: 5px 25%;
  border: dashed 3px #690b73;
}

.updatebox {
  width: 95%;
  border: dashed 2px #690b73;
  margin-top: 20px;
  height: 500px;
}

.updatebox .updates  {
  height: 200px;
  overflow: auto;
  margin: 10px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}

.centerimg {
  margin: 1vw auto;
  width: 468px;
  height: auto;
}

.smbanner {
  width: 200px;
}

.centerimg img {
  width: 100%;
  height: 100%;
}

.site-buttons img {
  height: 31px;
}

.button-page {
  height: 500px!important;
}

footer {
    height: 50px;
    position: relative;
    width: 100%;
    margin: 50px 0 0 0;
    bottom: -10px;
    padding: 3px 3px 15px 3px;;
    background-color: #000;
    text-align: right;
}

.write-menu {
  max-width: 1200px;
  width: 90vw;
  min-height: 560px; 
  margin: 10px auto 0;
  padding: 0;
  padding-bottom: 10px;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

.story {
  width: 300px;
  height: 350px;
  border: 8px ridge #8e049c;
  background-color: #000000;
  padding: 10px;
  margin: 10px;

}

.story .tags a {
  color: inherit;
  text-decoration: underline;
}

#s-m-t-tooltip {
  z-index: 9999;
  background: #fff;
  font-size: 12px;
  line-height: 13px;
  font-family:lucida console;
  letter-spacing: 1px;
  border:solid 1px;
  moz-border-radius-bottom-right: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  text-transform: normal;
  color: black;
  max-width: 150px;
  word-wrap: break-word;
  padding: 2px 5px 2px 6px;
  display: block;
  margin: 24px 14px 7px 12px;
  }

@media screen and (max-width: 1024px) {

 #sidebar {
    padding-bottom: 109%;
  }
  
}

@media screen and (max-width: 982px) {

  body {
    font-size: 14px;
  }
}

@media screen and (max-width: 770px) {
  body {
    font-size: 14px;
  }

}

.hide {
  display: none;
}

#mobile-menu {
  position: absolute;
  left: 1em;
  z-index: 99999;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #e807ff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}