@font-face {
    font-family: "basiic";
    src: url("/assets/fonts/basiic.ttf") format("truetype");
}
@font-face{
    font-family:'tiny';
    src: url(https://cinni.net/fonts/Basiic%20Sans%2012pt.ttf);
}
@font-face{
    font-family:'bold';
    src: url(https://cinni.net/fonts/Basiic%20Sans%2018pt.ttf);
}
@font-face{
    font-family:'title';
    src: url(https://cinni.net/fonts/Basiic%20Style%20Sans.ttf);
}
@font-face{
    font-family:'epson';
    src: url("/assets/fonts/EPKAISHO.TTF") format("truetype");
}
@font-face {
  font-family: 'bebop';
  src: url("/assets/fonts/Cheltenham\ Condensed\ Bold.ttf") format("truetype");
}


:root {
  /* --bg-color:#594e42;
  --border-color:#8e6b43;
  --font-color:#d1d1a1; */
  --bg-color:#4e7768;
  --border-color:#324a41;
  --font-color:#d1d1a1;
  --link-color:;
  --bold-color:;
  --bg-image:url('/assets/images/backgrounds/raingbg.gif');
  --bar-img:url('/assets/images/bars/goblintp.png');
  --divider-img:url('/assets/images/flair/divider-mushrooms.gif');
  --list-img:url('/assets/images/flair/tiny-sprout-rc.gif');
  --cursor-img:url('/assets/images/cursor/Hu Tao Normal Select.cur'), auto;
  --divider-height:65px;
  --divider-position:center center;
  --header-img:url('/assets/images/Daviidetp.gif');
  --max-width:800px;
  --bar-height:25px;
  --footer-height:25px;
  --sidebar-width:20%;
  --content-width:80%;
  --header-height:200px;
  --header-bg-position:center center;
  --header-bg-size:contain;
  --header-bg-repeat:no-repeat;
  --row-padding:5px;
  --font-size:13px; /*default 11px*/
  --font-family:'basiic';
  --bold-dark:;
  --bg-size:cover;
  --top-bar-1:url('/assets/images/flair/mushrooms.gif');
  --top-bar-2:url('/assets/images/flair/mushrooms2.gif');
  --top-bar-height:50px;
  --top-bar-width:50px;
  
}


* {
  box-sizing:border-box;
  scrollbar-color:var(--link-color) var(--bg-color);
  scrollbar-width:thin;
  cursor:var(--cursor-img);
}

body {
  background-image:var(--bg-image);
  background-repeat:repeat;
  background-attachment:fixed;
  background-size:var(--bg-size);
  font-family:var(--font-family);
  font-size:var(--font-size);
  color:var(--font-color);
  background-color:var(--bg-color);
}
body a {
  font-weight:bold;
  color:var(--link-color);
  text-decoration:none;
}
body a:hover {
  text-decoration:underline;
}
strong {
  color:var(--bold-color);
}
#container {
  max-width:var(--max-width);
  margin:0 auto;
}
.bar, .sidebar, .section, section, #footer {
  background-color:var(--bg-color);
}
.section-clear {
  
}
.section, section {
  flex-grow:1;
}
#header {
  height:var(--header-height);
  background-image:var(--header-img);
  background-size:var(--header-bg-size);
  background-position:var(--header-bg-position);
  background-repeat:var(--header-bg-repeat);
  position:relative;
  z-index:99;
  
}
.row {
  margin-bottom:var(--row-padding);
}
.bar {
  height:var(--bar-height);
  border:1px solid var(--border-color);
  background-image:var(--bar-img);
  background-repeat:repeat-x;
  position:relative;
  z-index:-99;
}
.flex {
  display:flex;
}
.sidebar {
  padding:10px;
}
#themeDiv {
  padding-top:25px;
}
.content {
  width:var(--content-width);
  flex:1;
}

/* experimental */
.section, section {
  background-image:var(--bar-img);
  background-color:var(--bg-color);
  background-repeat:repeat-x;
  border:1px solid var(--border-color);
  padding:10px;
}
.section:not(:first-child), section:not(:first-child) {
  margin-top:var(--row-padding);
}


.centerText {
  text-align:center;
}

marquee {
  font-size:20px;
  font-weight:bold;
  color:var(--link-color);

}

.sidebar {
  width:var(--sidebar-width);
  border:1px solid var(--border-color);
  background-image:var(--bar-img);
  background-repeat:repeat-x;
  padding-top:25px;
}
.sidebarLeftButtons {
  display:block;
  margin: auto;
  text-align: center;
  margin-top:5px;
}
.left {
  margin-right:var(--row-padding);
}
.right {
  margin-left:var(--row-padding);
}
#footer {
  border:1px solid var(--border-color);
  height:var(--footer-height);
  background-image:var(--bar-img);
  background-repeat:repeat-x;
}
.intro {
  background-color:var(--font-color);
  color:var(--bg-color);
  padding:5px;
  margin:10px;
  border:4px ridge var(--link-color);
  background-image:url('/assets/images/flair/paper-texture.png');
  font-style:italic;
}
.copyButton {
width: 88px;
  font-size: 10px;
  background-color: var(--bg-color);
  color: var(--font-color);
  height: 35px;
  margin-bottom: 10px;
  overflow:hidden;
  border:1px solid var(--font-color);
}

.buttons img {
  display:block;
  margin:0 auto;
}

h1, h2 {
 text-decoration-line:underline;
 text-decoration-style:wavy;
 text-decoration-color:var(--link-color);
 text-underline-offset:5px;
}

h2 {
  font-size:20px;
  margin-top:20px;
}

/* flair begin */

.flair {
  position:absolute;
}

#topBarFlair {
  margin-top:-40px;
  right:0;
}
#topBarFlair2 {
  margin-top:-40px;
  left:0;
}

.divider {
  background-image:var(--divider-img);
  height:var(--divider-height);
  background-repeat:no-repeat;
  background-position:var(--divider-position);
  margin-bottom:20px;
  margin-top:10px;
}
/* flair end */

/* navigation begin */

nav ul {
  list-style-image:var(--list-img);
}
nav ul a {
  color:var(--link-color);
  text-decoration:none;
}
nav ul li {
  padding-bottom:2px;
}
/* navigation end */

/* homepage only */

.changelog {
  height:150px;
  overflow:auto;
}

summary {
  font-weight:bold;
  color:var(--bold-color);
  cursor:pointer;
  list-style-image:var(--list-img);
}
.center {
  width:200px;
  margin:0 auto;
}
.fullImage {
  max-width:100%;
  padding-top: 15px;
}
.updates {
  overflow:auto; 
  height:150px;
}
/* flair images */
#topBarFlair {
  content:'';
  height:var(--top-bar-height);
  width:var(--top-bar-width);
  background-image:var(--top-bar-1);
  background-repeat:no-repeat;
}
#topBarFlair2 {
  content:'';
  height:var(--top-bar-height);
  width:var(--top-bar-width);
  background-image:var(--top-bar-2);
  background-repeat:no-repeat;
}




@media screen and (max-width: 600px) {
  .flex {
    display:block;
  }
  .sidebar, .content {
    width:100%;
    margin-left:0;
    margin-top:var(--row-padding);
  }
  #header {
    height:200px;
  }
  nav ul li{
    display:inline;
    padding-left:20px;
  }
  #themeDiv {
    display:block;
    margin:0 auto;
    text-align:center;
    padding-top:0;
  }
}


  
@supports (-moz-appearance:none) {
  select
  {
  -moz-appearance:none !important;
  background: var(--font-color) url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
  background-position: calc(100% - 5px) center !important;
  height:17px;
  /* color:var(--font-color); */
  border:1px solid var(--font-color);
  padding-right:15px;
  font-family:var(--font-family);
  font-size:var(--font-size);
  color:var(--bg-color)!important;
  border:1px solid var(--bg-color);
  /*font-style:italic;*/
  }

}

select
{
-moz-appearance:none !important;
background: var(--font-color) url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
background-position: calc(100% - 5px) center !important;
height:17px;
/* color:var(--font-color); */
border:1px solid var(--font-color);
padding-right:15px;
font-family:var(--font-family);
font-size:var(--font-size);
color:var(--bg-color)!important;
border:1px solid var(--bg-color);
/*font-style:italic;*/
}