/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unica+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

body {
  background-color: white;

  text-align: center;
  color: #63535B;
  font-family: 'Fredoka One', cursive;
  cursor: url(images/cursor_point1a.gif), auto;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px; 
  height: 20px; 
  width: 50%;
  display: flex;
  justify-content: center;
  

  
  
}

ul {
  text-align: center;
  list-style-position: inside;
}

.myspace{
  max-width: 700px;
  width: 50%;
  height: auto;
}

.content {
  width: 60%;        /* how wide the text block is */
  margin: 0 auto;    /* centers the block */
  text-align: left;  /* keeps sentences left-aligned */
}

::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-thumb {
  background-image: url('images/11.png'); 
}

::-webkit-scrollbar-track {
  background: #fff0fc;
}

/*Hides item when in regular/PC view, shows when in media query view*/
.reverseHideme {
  display: none;

}

.enlarge {
  width: 40%;
}

.right {
  position: fixed;
  bottom: 0;
  right: 0;
}
.left {
  position: fixed;
  bottom: 0;
  left: 0;
  
}

.lefthang {
  position: fixed;
  top: 0;
  left: 0;
}

.righthang {
  position: fixed;
  top: 0;
  right: 0;
}

.rapper {
  width: 60%;
  overflow: hidden;
  text-align: center;
  margin: auto;
}
.rapper2 {
  width: 90%;
  overflow: hidden;
  text-align: center;
  margin: auto;
}


a:hover {
  cursor: url(images/cursor_point2d.gif), auto;
}

/*Content of any page with a table based lace border*/
.lacecontent{
  width: 900px;
  height: 600px;
  overflow:auto;

}
/*Media query sextion (this is where you change stuff to look good on phones*/
@media (max-width: 900px) {
 .busy {
  width: 90%;
}

/*Hides item when media query view, shows when in regular/PC view*/
.hideme {
  width: 10px;
  display: none;

}
/*Hides item when in regular/PC view, shows when in media query view*/
.reverseHideme {
  display: inline;
}

.right {
  width: 10px;
  display: none;
}
.left {
  width: 10px;
  display: none;
  
}

.lefthang {
  width: 10px;
  display: none;
}

.righthang {
  width: 10px;
  display: none;

}
.enlarge {
  width:100%;
}

 .rapper {
  width: 100%;
}

}

/*end of media query section*/