:root {
     --dk-color:#bf776b;
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
      --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:15px;
     padding:0;
     height:100%;
     background-image:url('/images/1-babyblue1.gif');
     background-repeat:repeat;
     color:var(--dkest-color);
     padding:1px;
     overflow-y:auto;
font-family: zen-maru-gothic,sans-serif;
font-style: normal;
    font-size: 11px;
cursor: url('/images/catmouse.png'), auto;
}

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: azure;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: pink; /* color of the scroll thumb */
border: 2px lavender solid
}
    
body a {
  color: saddlebrown;
  font-weight:bold;
  }


 #container {
     max-width:800px;
     margin:0 auto;
     padding-top:15px;
     height:100%;
     
}

#containerbg {
      background-image: url(/images/0084.png);
     border-radius: 25px;
     border:5px white;
     border-style: ridge;
    
   
}
 h1, h3, h5 {
     color:var(--dk-color);
      font-family: 'Gaegu', cursive;
}
 h2, h4, h6 {
     color:var(--accent);
      font-family: 'Gaegu', cursive;
  }

h1 a {
    text-decoration: none;
    color: white;
}
 #headerhp {
     max-width:800px;
     height:105px;
     margin-top: -54px;
     background-image: url(/images/titleheader.png);
     background-position: center center;
     border-radius: 25px 25px 0px 0px;

}




 .title {
     font-size:80px;
     text-align:center;
     font-style:italic;
      font-family: 'Gaegu', cursive;
 text-shadow: 4px 4px 4px #aaa;
     color: white;
}
 #wrapper {
     margin:0 auto;
     max-width:790px;
   
}

#topmarquee {
    height: 50px;
    max-width: 100%;
    margin-right: 5px;
    font-size:20px;
      font-family: 'Gaegu', cursive;
     text-shadow: 4px 4px 4px #aaa;
    color: hotpink;
    background-color: aliceblue;
   border:2px pink;
    border-style: solid;
    margin:0 auto;
    padding: 5px;
    
    
}

* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 5px;
    
   
   /* Should be removed. Only for demonstration */
}

.left, .right {
  width: 25%;
    height: auto;
    border-radius: 0px 0px 25px 25px;
    
}

.middle {
  width: 73%;
    height: auto;
    padding: 10px;
}

.wide {
    width: 75%;
    padding: 10px;
    float: left;
}

.childpage {
    width: 70%;
    padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/*contents*/



.description {
    box-shadow: 4px 4px 4px #000000;
    height: 535px;
    width: auto;
    overflow: hidden;
    margin: 5px;
}

.yellow {
    background-color: lemonchiffon;
}

.azure {
    background-color: azure;
}

.lavender {
    background-color: lavender;
}

.invisible {
    background-color: transparent;
    
}
.paper {
    background-image: url(/images/paperback1.gif);
    background-size:repeat;
    box-shadow:2px 2px 5px #000;
box-sizing:border-box; /* 中央寄せは0をautoに変更 */
    height: 1000px;

position:relative;
width:100%
}

.textbox::-webkit-scrollbar {
  width: 12px;   /* width of the entire scrollbar */
}

.textbox::-webkit-scrollbar-track {
  background: lemonchiffon;
    /* color of the tracking area */
}

.textbox::-webkit-scrollbar-thumb {
  background-color: pink; /* color of the scroll thumb */
border: 2px lavender solid;
   
}

.doublecontainer {
    width: 100%;
    height: auto;
    float: none;
}

.updatelog {
    height: 130px;
    width: 48.3%;
    border: 3px;
    padding:5px;
    float: left;
    margin: 3px;
    margin-top: 10px;
     border-style: ridge;
    border-radius: 25px;
    box-shadow: 4px 4px 4px #000000;
}

.illust {
    width: auto;
    height: auto;
    overflow-y: hidden;
    float: left;
    margin: 5px;
    border: 3px dotted pink;
    border-radius: 25px;
    box-shadow: 4px 4px 4px #000000;
}

.illust img {
    max-width: 100%;
}
.navbar {
    
}

.profile {
    border: 2px solid pink;
    padding: 5px;
    margin-bottom: 5px;
    background-color: aliceblue;
}

.profile img {
    max-width: 100%;
}

.profile ul {
    list-style-type:none;
    padding: 0;
}
.ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  background-image: url(images/witchpw.jpeg);
  border:3px white;
    border-style: ridge;
    border-radius: 25px;
    box-shadow: 4px 4px 4px #000000;
}

.li a {
  display: block;
  color: hotpink;
  padding: 2px 16px;
  text-decoration: none;
}

.li {
  text-align: left;
  border-bottom: 1px solid pink;
    background-color: aliceblue;
}

.li:first-child {
    border-radius: 25px 25px 0px 0px;
}

.li:last-child {
  border-bottom: none;
border-radius: 0px 0px 25px 25px;
}

.li a.active {
  background-color: lemonchiffon;
  color: white;
}

.li a:hover:not(.active) {
  color: skyblue;
}
/* Widgets */
#statuscafe {
    padding: .5em;
    background-color: azure;
    border: 1px solid midnightblue;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}

.chatbox {
    background-color: lavender;
    padding: 10px;
    
    
}

.textbox {
    width: auto;
    max-height: inherit;
    padding: 10px;
    overflow-y: scroll;
}

.blinkies {
    width: 100%;
    margin: 10px;

    float: left;
}
/*deco*/

#mewmint img{
    float: right;
    margin-right: -10%;
    margin-top: -10%;
    max-width: 150px;
}


.floatleft {
    float:left;
    max-width: 200px;
}

.floatright {
    float:right;
    max-width: 200px;
}

.boxheading {
    background-image: url(/images/check_004.gif);
   border-radius: 25px 25px 0px 0px;
    text-align: left;
}

.boxheading img{
    
}

/*About Page*/
.aboutboxtext {
    width: auto;
    height: 450px;
    overflow: hidden;
    border: 5px;
    border-style:ridge;
    margin: 5px;
    border-radius: 25px;
    background-image: url(images/f-naka.gif);
    box-shadow: 4px 4px 4px #000000;}
    
/*fahsion*/
    
.fashion {
    width:auto;
    text-align: center;
    overflow: hidden;
     border: 5px;
    border-style:ridge;
    margin: 5px;
    border-radius: 25px;
    box-shadow: 4px 4px 4px #000000;}


.fashiontextbox {
    overflow: hidden;
    width: auto;
    max-height: inherit;
    padding: 10px;
    border: 0px;
}
    
.fashion img {
    max-width: 40%;
    margin: 5px;
    border: 
}

.caption {
    background-color: rgba(255, 255, 255, .4);
     border: 4px dotted lemonchiffon;
    border-radius: 15px;
}


.blogcontainer
{
    width: auto;
    max-height: 1000px;
    padding: 2%;
    border: 10px red solid;
    
}
.blogbox
{ 
overflow: auto;
    height: inherit;
    padding: 5%;
    font-size: 15px;
}

.blogbox h1
{font-size:20px;
      font-family: 'Gaegu', cursive;
     text-shadow: 4px 4px 4px #aaa;
    font-size: 25px;
    color: hotpink;
}

.blogbox h2
{ font-family: zen-maru-gothic,sans-serif;
font-style: bold;
    font-size: 11px;}

.icon01 {
background:url(images/icon01.png) no-repeat;
height:62px;
position:absolute;
right:10px;
top:-13px;
width:27px
}

hr {
    border:0; 
    height:20px; 
    background:url("images/roseline01middlegg.gif") 0 0; 
}