:root{
    --accent: #9eb9cf;
    --primary: #ffd2b4;
    --secondary:#d1ff9d;
    --white: #f7f3f3;
    --white2: #fdfdfd;
    --fontsize-p: 12px;
    background-color:var(--white);
}
@font-face {
  font-family: NostaruDot;
  src: url(Nosutaru-dotMPlusH-10-Regular.ttf);
}
    .lang-block {
      display: none;
    }

    html:lang(en) .lang-block[lang="en"],
    html:lang(jp) .lang-block[lang="jp"] {
      display: inline;
    }

.colored{
    color:var(--secondary);
}
.col-centered {
  float: none;
  margin-right: auto;
  margin-left: auto;
  margin-top:20px;
  width: fit-content;
}
body{
    margin:0px;
    padding:0px;
    font-size:var(--fontsize-p);
    font-family: NostaruDot;

}
button{
    font-size:var(--fontsize-p);
    font-family: NostaruDot;
}
.zero-padding{
    padding:0px;
}
.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

#counter{
    margin-top:3px;
    margin-bottom:0px;
}
#counter:hover{
        margin-top:0px;

    margin-bottom:3px;
}
#path{
    height: 20px;
    bottom:0px;
    background-color: var(--accent);
    position:relative;
}
#path-text{
    bottom: 0; 
    position:absolute
}
#mainscreen1{
    height: 100%; 
    max-height: 500px;
    overflow: hidden; 
    max-width: 420px;
    width: 420px;
    float:left
}

#mainscreen2{
    height:480px; 
    overflow:auto;
    background-color: var(--white);
}
#mainscreen3{
    height: auto; 
    margin: auto;
    min-height: 100%;
    position:relative;
}
#mainscreen-content{
    font-size: 10px; 
    text-align: center;
    /*padding-top:20px; */
    margin:auto
}
#changelog1{
    height: 100px;
    width:100%;
    max-width:150px;
    margin:auto;
    position: absolute;
    bottom: 0;

}
#changelog2{
    height:100%;
    overflow:auto;
}
#changelog2:hover{
    color: var(--white);
    background-color: var(--accent);

}
#changelog3{
    padding: 0;
    margin: 0;
    font-size:var(--fontsize-p);
}
#sidebar{
    width: 105px;
    height: 500px;
    float:left;    
    position: relative;
    background-color: var(--white);
}
#sidebar-block2{
    height: 95px;
    width:100%;
    max-width:150px;
    margin:auto;
    position: absolute;
    bottom: 0;
}
 @media only screen and (max-width: 600px) {
    #sidebar{
    width: 100%;
    height: fit-content;
    float:none;
    background-color: var(--accent);
    display:none;
    }
    #sidebar-block2{
        width: 105px;
        right: 0;
    }
    #mainscreen1{
        max-width: 100%;
        width: 100%;
        height: 100%;
        position:absolute;
        /*top:100px;*/
        max-height: fit-content;
    }
    #mainscreen2{
        height: 100%;
    }
    .col-centered {
    width: auto;
    margin-top:0px;
    }
    .menu_button{
        background-color: var(--accent)!important;
    }
    #gallery_images{
    column-count: 1!important;
    }
    #lang-selected{
    color:var(--secondary)!important;
}
#banners{
  margin:auto;
  bottom:auto!important;
      position: relative!important;

}
#expand{
    display: block!important;
}
 }
#wrapper{
    overflow: hidden;
}

.menu_button{
    background-color: var(--white);
    width:100%;
    text-align: left;
    font-size:var(--fontsize-p);
    height: 20px;
    display: block;
    margin:0px;
    padding: 0px;
    border: 0px;

}
.menu_button:hover{
    background-color: var(--accent);
    color: var(--white);

}


/*gallery*/
#gallery-tags{
    text-align: left;
}
.gallery-preview{
    width: 100%;
}
#gallery-image{
  height: 100%;
  overflow: hidden;
  max-width: 420px;
  max-height: 500px;
  /*width: 420px;*/
  width:0px;
  float: right;
}
.gallery_image{
    max-width: 100%;
    max-height: 100%;
}
#gallery_images{
    column-count: 2;
}
.gallery_button{
    background-color: var(--white);
    width:100%;
    text-align: left;
    font-size:var(--fontsize-p);
    display: block;
    margin:0px;
    padding: 0px;
    border: 0px;
}
.gallery_button_text:hover{
    background-color: var(--secondary);
}
#lang-selected{
    color:var(--accent)
}
#lang-selector:hover #lang-selected{
    color:var(--secondary)
}
#banners{
    position: absolute;
  bottom: 0;
  margin:auto
}
.links{
    text-align: center;
}
#expand{
    background-color: var(--accent);
    display: none;
    position:fixed;
    right:0px;
    margin:0px;
    padding: 0px;
    padding-top:1px;
    padding-right: 3px;
    padding-left: 3px;
    border: 0px;

}
#expand:action #sidebar{
    display: block;
}