p, li, h5 {  
  color:#3E8FB8;
}
/*the blue color of the paragraph and bulletpoints */
h1,
h2,
h3 { 
  color:indianred;
}
/*the headings are red, ok idk why theyre called indian red that seems kinda racist*/
/*h5 {
text-shadow:-1px -1px 0 white, 3px -1px 0 white, -1px 3px 0 white, 3px 3px 0 white;
}*/ 
a:link {
  color:hotpink;
}

a:visited {
  color:purple;
}
/*a:link is the normal link color (pink), but when you've click on the link before it turns purple*/
a:hover {
  color:pink;
  font-weight:bold;
}
/*o ya when u hover over the link it turns lighter*/
.img, h6, h5 {
  text-decoration: none;
  font-weight:normal;
}
body {
  text-align: center;
  background-color: skyblue;
  overflow:auto;
  /*overflow just means when things are overflowing out of the screen or their borders, you have the option to hide it, show it, have a scroller, or put it on auto*/
background-image: url("/bgs/water.gif");
}

html {
cursor: url(/cursors/cursor.png), default;
}
/*custom cursor*/
.parent {
  text-align: center;
}
/*the dot infront of 'parent' means its a class*/
.parent > ul {
  display: inline-block;
  padding-left: 0;
  margin-left: 0;
  list-style-position: inside;
  text-align: left;
}
/*the '>' means that we are specifying every ul element that has the class: 'parent'*/
h1,
h3,
p { margin-bottom: 0;
}

ul, 
p,
h1 {
margin-top: 0;
}
h2 {
  margin-top: 0;
  margin-bottom: 0;
  margin: 0;
}
/*i was changing the margins bc there were weird random gaps*/
a {
 cursor: url("/cursors/clicker.png"), pointer; 
}
/*this is custom cursor stuff*/
/*-------------------------------------------------------------------box n border stuff------------------------------------------------------------------------*/
/*shouts out to https://foollovers.com/mat/t-frame21.html*/
/*u will need a translator cus its in japanese lol*/
.box21 {
margin:auto; /* 中央寄せは0をautoに変更 */
width:60%; /* 幅 */
margin-bottom:25px;
}
.u01 {
background:url(/borders/t-lace.gif) repeat-x;
height:23px;
margin:0 23px
}
.s01 {
background:url(/borders/b-lace.gif) repeat-x;
height:23px;
margin:0 23px
}
.box-top {
background-image:url(/borders/t-l-lace.gif), url(/borders/t-r-lace.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:23px
}
.box-center {
background-image:url(/borders/r-lace.gif), url(/borders/l-lace.gif);
background-position:top right, top left;
background-repeat:repeat-y, repeat-y;
}
.box-inner {
background:#fff; /* 背景色 */
margin:0 23px;
}
.box-bottom {
background-image:url(/borders/b-l-lace.gif), url(/borders/b-r-lace.gif);
background-position:top left, top right;
background-repeat:no-repeat, no-repeat;
height:23px
}
@media screen and (max-width:700px) {
  .box-center,
  .box-inner {
    height:auto;
  }
  /*this makes the box fit the text when the screen isn't wider then 700px*/
}
/*-----------------------------------------------------------end------------------------------------------------------------------*/
.box1 {
 border:solid lightblue; 
 margin:10px;
 overflow:auto;
}

.box {
 border:solid lightblue; 
 margin:10px;
 overflow:scroll;
 overflow-x:hidden;
 height:60px;
 font-size:20px;
 line-height:100%;
}

button {
  font-family:"Indie Flower";
  cursor: url("/cursors/clicker.png"), pointer;
  margin-top:0;
  text-align:center;
  
}


html, body {
      overflow: scroll;
      overflow-x: hidden;
    }
.nospace, body {
 margin:0;
 padding:0;
}

   html::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }
    
    body::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

  /*  html::-webkit-scrollbar-thumb {
      background: transparent;
    } */
    
            /* user styles */

            /* styles are what change the color and sizes of stuff on your site. */

            /* these are variables that are being used in the code
    these tended to confuse some people, so I only kept 
    the images as variables */

            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: #241445;
                width: 17%;
                 position: fixed;
                 z-index: 1;
                top: 20px;
                left: 10px;
                background: #eee;
                 overflow-x: hidden;
                padding: 8px 0;
                border-radius:15px;
                /* this makes the sidebar text slightly smaller */
                
            }


            /* this is the color of the main content area,
    between the sidebars! */

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

            #leftSidebar {
                order: 1;
                margin-bottom: 10px;
                margin-top: 50px;
                margin-left:10px;
                margin-right:10px;
                position:static;
                float:left;
            }
            
            #rightSidebar {
                order:2;
                margin-bottom: 10px;
                margin-top: 50px;
                margin-left:10px;
                margin-right:10px;
                position:static;
                float:right;
            }

            main {
                order: 3;
            }
            
            aside {
                order:1;
            }

            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

                /* the order of the items is adjusted here for responsiveness!
      since the sidebars would be too small on a mobile device.
      feel free to play around with the order!
      */
      
      /* Page content. The value of the margin-left property should match the value of the sidebar's width property */
/*div.content {
  margin-left: 17%;
  padding: 1px 16px;
  height: 1000px;
}*/
      
      /* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {
  aside {
    width: 90%;
    height: auto;
    position: relative;
    margin:0px;
    padding:0;
  }
  #leftSidebar, #rightSidebar {
    margin:0px;
    margin-left:auto;
    margin-right:auto;
    float:none;
  }
  .box21 {
   width:95%;
  }
}

  ::-webkit-scrollbar-thumb:hover,
  ::webkit-scrollbar-thumb,
  overflow,
  overflow:hover,
  overflow:scroll,
  overflow:scroll:hover {
  cursor:url("/cursors/clicker.png"), pointer;
  }
  
  img[src="/pictures/horse.png"] {
    margin-top:10px;
    margin-bottom:5px
    }