:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
     --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family:'0xProto';
     font-size:12px;
     background-image:url('inne/backgroundimg.png');
     background-repeat:repeat;
     color:#e9e3fa;
     padding:1px;   
     
}

@font-face {                  
font-family: '0xProto';
src: url(https://humantooth.neocities.org/fonts/0xProto-Regular.woff2) format('woff2');
font-weight: normal;
font-style: normal;
} 


 body a {
     color:#bf776b;
     font-weight:bold;
}
 .list li {
     padding-bottom:5px;
}
 #container {
     max-width:900px;
     margin:0 auto;
     height:auto;
     background-color:#05030a;
     margin-top:15px;
}
 h1, h3, h5 {
     color:#e9e3fa;
}
 h2, h4, h6 {
     color:#bf776b;
}
 #headerx {
     max-width:1000px;
     height:auto;
     margin:0 auto;
     background-color:#05030a;
     border:1px solid #e9e3fa;
}
 .navbar li a {
     text-decoration:none;
}
 .navbar ul {
     list-style-type:none;
     padding:0;
     padding-left:20px;
     padding-right:20px;
}
 .navbar {
     background-color:#05030a;
     max-width:1000px;
     border:1px solid #e9e3fa;
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:italic;
     color:#e9e3fa;
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:#05030a;
     color:#e9e3fa;
     font-size:12px;
     border-bottom:1px solid #e9e3fa;
}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:100%;
}
 #left-sidebar {
     width:197px;
     border:1px solid #e9e3fa;
     height:100%;
     border-right:none;
     background-color:#05030a;
}
 .content {
     padding:10px;
}
 .main-content {
     border:1px solid #e9e3fa;
     width:700px;
     height:auto;
}
 p {
     padding:5px;
}
 p a {
     color:#e9e3fa;
     font-weight:bold;
}
 .scroll::-webkit-scrollbar-track {
     background-color: #05030a;
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: #05030a;
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: #05030a;
}
 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:#e9e3fa;
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:13px;
     margin-right:40px;
}
 .navbar a:hover{
     background:#05030a;
     color:#a199de;
     transition:0.2s all linear;
     z-index:1;
}
 .navbar li > ul {
     background:#05030a;
     display:none;
     position:absolute;
     margin-left:0;
     border:1px solid #e9e3fa;
}
 .navbar li > ul a {
     padding-left:0;
     padding-right:0;
     padding-top:5px;
     padding-bottom:5px;
}
 .navbar li > ul li{
     display:block;
}
 .navbar li:hover > ul{
     display:block;
}
 .navbar ul ul ul {
     position:absolute;
     left:100%;
     top:0;
}
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
     
     
}

 


 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:#05030a;
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:#bf776b;
     color:#bf776b;
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}

/*gallery */
   
 * {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation 
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
} */



/*koniec */
     
 
/* CHANGE BELOW TO max-width:1000px for TWO SIDEBARS. It is max-width:914px for ONE SIDEBAR */
 @media only screen and (max-width: 917px) {
     #left-sidebar {
         order:2;
         width:100%;
         border-right:1px solid var(--dkest-color);
    }
     .main-content {
         order:1;
         width:100%;
         border-bottom:none;
         border-right:1px solid var(--dkest-color);
    }
     .navbar a {
         padding-bottom:10px;
    }
 }