.nav {
      width: 200px;
    height: 100%;
    position: fixed;
    float: left;
    border-right: 1px dashed black;
    background-color: #ffffff85;
    padding: 15px;
    }
	.demo {
		border:1px solid #C0C0C0;
		border-collapse:collapse;
		padding:5px;
	}
	.demo th {
		border:1px solid #C0C0C0;
		padding:5px;
	}
	.demo td {
		border:1px solid #C0C0C0;
		padding:5px;
	}
    #azudiv {
      padding: 3px;
      background: white;
      border: 1px solid black;
      width: 20%;
      height: auto;
      margin-top: 70px;
      position: relative;
      z-index: 1;
      top: 14em;
      left: 70em;
      transform:rotate(-2deg);
      font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
    #azudiv2 {
      padding: 3px;
      background: white;
      border: 1px solid black;
      width: 20%;
      height: auto;
      margin-top: 100px;
      position: relative;
      z-index: 1;
      top: 19em;
      transform:rotate(3deg);
      left: 51em;
      font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
    
    #azucont {
      padding: 3px;
      background: white;
      border: 1px solid black;
      width: 20%;
      height: auto;
      margin-top: 189px;
      position: relative;
      z-index: 1;
      left: 28em;
      transform:rotate(-5deg);
      font-family: "Comic Sans MS", "Comic Sans", cursive;
    }
    
    #bg {
    background-color: #FBEFFF;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(/bg/chiyo.gif);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto;
    animation: animatedBackground 100s linear infinite;
    }
    @keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 10000px -10000px;
  }
}
    .main {
          width: 780px;
    height: 500px;
    float: right;
    border: 1px solid black;
    padding: 10px;
    margin: 25px;
    margin-right: 605px;
    overflow-y: scroll;
    background-color: #ffffff85;
        }
        .testimonial {
         position: absolute;
         left: -30em;
         width: 300%;
        }
        @font-face {
  font-family: love;
  src: url(https://files.catbox.moe/t6p56q.ttf);
}
@font-face {
  font-family: pixel;
  src: url(https://files.catbox.moe/x6s3um.ttf);
}
        .title{n
          font-family: love;
          }
      .blog {
    width: 700px;
    height: auto;
    border: 1px dashed black;
    margin: auto;
    padding: 5px;
    line-height: 125%;
    border-radius: 3px;
      }
  #mydiv {
    cursor: all-scroll;
    }
    .butn {
   font-size: 13px;
   }
 .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: auto;
  background-color: white;
  border: 1px solid black;
  text-align: center;
  padding: 5px;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  cursor: crosshair;
}
.tooltiptext:hover {
    cursor: crosshair;
}
  .socials {
    text-align: center;
    position: absolute;
    top: 50px;
    left: -169px;
    border: 1px solid black;
    background: white;
    width: 130px;
    height: auto;
    padding: 10px;
  }
   .st {
    text-align: center;
    position: absolute;
    top: 40px;
    left: -159px;
    width: 130px;
    height: auto;
    padding: 10px;
  }
  
 .funfact{
   font-size: 16px;
 }
 ::-webkit-scrollbar {
    width: 16px;
    height: 10px;
  }
 
  ::-webkit-scrollbar-thumb {
    background-color: #fff;
    background-image: url(https://i.imgur.com/Qtm9Z60.png);
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
 
  ::-webkit-scrollbar-track {
    background-color: #fff;
    background-image: url(https://i.imgur.com/IGXGYKz.png);
  }
 
  ::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://i.imgur.com/WhC8iy3.png);
    width: 14px;
    height: 16px;
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
 
  ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://i.imgur.com/fQ18mrR.png);
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    width: 14px;
    height: 16px;
  }
  
body {
  background-color: white;
  color: black;
  font-family: "ms pgothic";
    text-align: center;

}

h1 {
  line-height: 10px;
  height: 10px;
}
h3 {
  line-height: 10px;
  height: 10px;
}


.log {
  margin-top: -10px;
  overflow-y:scroll;
  overflow-x: none;
  height: 65px;
  font-family: "MS PGothic";
  font-size: 20px;
  width: 110px;
}

#header {
background-image: url("https://web.archive.org/web/20050518093117/http://www.geocities.com/grannywyo/IllinoisSingles/AnimatedBackGroundSky.gif");
background-color: white;
border: 1px solid black;
padding: 10px;
  width: 600px;
  height: auto;
}
#shrinehead {
  grid-template-columns: 10% 90%;
background-image: url("https://web.archive.org/web/20050518093117/http://www.geocities.com/grannywyo/IllinoisSingles/AnimatedBackGroundSky.gif");
background-color: white;
padding: 5px;
  width: 480px;
  border-left: 1px solid black;
   border-right: 1px solid black;
    border-top: 1px solid black;
  height: auto;
}
  p {
  margin: 0;
}

#page .left a {
      text-decoration: underline;
      cursor: help;
      color: #000;
     transition: 0.4s;
      }
      
#page .left a:hover {
      text-decoration: underline;
      font-style: italic;
      cursor: help;
      color: grey;
      }
      a:hover {
      
      cursor: help;
      
      }

.header {
  font-size: 50px;
  font-family: "MS PGothic", sans-serif;
  margin: 0px;
  text-align: center;
  color: white;
  text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
#page {
    grid-template-columns: 20% 60% 20%;
    background-color: #fff;
    margin: 0 auto;
    display: grid;
    width: 620px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}

#about {
    grid-template-columns: 50% 50%;
    background-color: #fff;
    margin: 0 auto;
    display: grid;
    width: 450px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    border-top: 1px solid black;
    padding: 10px;
}
#bfb {
    grid-template-columns: 50% 50%;
    background-color: #fff;
    margin: 0 auto;
    display: grid;
    width: 600px;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    padding: 10px;
}

#bfb .left{
    font-size: 20px;
    font-weight: bold;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}
#bfb .center{
    font-size: 20px;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}


#ysg {
    grid-template-columns: 50% 50%;
    margin: 0 auto;
    display: grid;
    padding: 10px;
    border: none;
}

#ysg .left{
    font-size: 20px;
    font-weight: bold;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}
#ysg .center{
    font-size: 20px;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}

#wrapper {
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#page .left{
    font-size: 20px;
    font-weight: bold;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    margin: 0px;
}
#page .center{
  text-align: center;
    font-size: 20px;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
    padding-left: 5px;
        border-right: 1px solid black;
    padding-top: 10px;
    overflow-y:scroll;
    overflow-x: none;
    height: 350px;
}
#page .right{
    font-size: 20px;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
    text-align: center;
    padding-left: 5px;
    padding-right: 7px;
    padding-top: 10px;
}
#about .left{
    font-size: 20px;
    font-weight: bold;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}
#about .center{
    font-size: 20px;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}

.stamps {
    width: 150px;
    position: absolute;
    left: 511px;
    top: 50px;
    padding: 10px;
    background: white;
    border: 1px solid black;
}
.mix {
    width: 180px;
    position: absolute;
    left: 495px;
    top: -80px;
    padding: 3px;
    background: white;
    border: 1px solid black;
}
.mix2 {
    width: 180px;
    position: absolute;
    left: 560px;
    top: -400px;
    padding: 3px;
    background: white;
    border: 1px solid black;
}
.etc {
    width: auto;
    position: absolute;
    left: 160px;
    top: 200px;
    padding: 3px;
    background: white;
    border: 1px solid black;
}
.note {
    width: 150px;
    position: absolute;
    left: 640px;
    top: 50px;
    padding: 10px;
    background: white;
    border: 1px solid black;
}

.note2 {
    width: 150px;
    position: absolute;
    left: 640px;
    top: 150px;
    padding: 10px;
    background: white;
    border: 1px solid black;
}

#about .center{
    font-size: 20px;
    font-family: "Ms PGothic";
    display: inline-block;
    background: white;
}