/* 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." */

@font-face {
  font-family: nintendoDS;
  src: url('etc/Nintendo-DS-BIOS.ttf');
}

* {
    cursor: url('etc/10553a.gif'), url('etc/10553a.gif'), default;
}


body {
  background: #000;
  background: rgba(0, 0, 0, 00);
  margin: 0;
  font: 18pt nintendoDS, "Consolas", "Courier New", Courier, monospace;
  line-height: 0.8;
 overflow-x: hidden;
 scrollbar-color: #00f6ff #e7c7fc;
  scrollbar-width: thin;
}

a {
  text-decoration: none;
  color: #FF29AE;
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a:hover {
 color: #0070FF;
 font-style: italic;
 cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a img {
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a img:hover {
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a h1 {
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a h1:hover {
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a h4 {
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

a h4:hover {
  cursor: url('etc/1869a.gif'), url('etc/1869a.gif'), default;
}

h1 {
  font-size: 28pt;
  color: #B129FF;
  margin: 20px 0 0 0;
  text-align: center;
  text-shadow: 2px 2px #ccc;
}

h2 {
  font-size: 26pt;
  color: #B129FF;
  margin: 10px 0 0 25px;
  text-shadow: 2px 2px #ccc;
  text-align: left;
}

h3 {
  font-size: 26pt;
  color: #B129FF;
  margin: 10px 25px 0 0;
  text-shadow: 2px 2px #ccc;
  text-align: right;
}

h4 {
  font-size: 26pt;
  color: #B129FF;
  margin: 10px 25px 0 0;
  text-shadow: 2px 2px #ccc;
  text-align: center;
}

b {
  color: #B129FF;
  text-shadow: 2px 2px #ccc;
  font-weight: bold;
}

main {
  margin: 20px auto auto auto;
}

.profile {
 color: #B129FF;
 font-weight: bold;
}

.greenbox {
 padding: 10px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #c0ff6d;
  box-shadow: 5px 5px 2px #aaa;
}

.orangebox {
 padding: 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #ffbb00;
  box-shadow: 5px 5px 2px #aaa;
}

.peachbox {
 padding: 15px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #ffb9ad;
  box-shadow: 5px 5px 2px #aaa;
}

.pinkbox {
 padding: 15px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 /* background: #fc4472; */
 background: #ff93c9;
  box-shadow: 5px 5px 2px #aaa;
}

.purplebox {
 padding: 15px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 /* background: #fc4472; */
 background: #e7c7fc;
  box-shadow: 5px 5px 2px #aaa;
}

.yellowbox {
 padding: 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #ffee70;
  box-shadow: 5px 5px 2px #aaa;
}

.bluebox {
 padding: 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #47f7f1;
  box-shadow: 5px 5px 2px #aaa;
}

.crazybox {
 padding: 15px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #000;
 background-image: url('images/yellow_bg.gif');
  box-shadow: 5px 5px 2px #aaa;
}

.plaidbox {
 padding: 15px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #000;
 background-image: url('images/plaid_bg.gif');
  box-shadow: 5px 5px 2px #aaa;
}

.hotpinkbox {
 padding: 15px 10px 20px 10px;
 font-size: 16pt;
 margin: 5px auto 5px auto;
 background: #000;
 background-image: url('images/pinkleop.gif');
  box-shadow: 5px 5px 2px #aaa;
}

.borderlessbox {
 border: 0;
 padding: 0;
 font-size: 16pt;
 margin: 5px;
 width: auto;
 text-align: center;
}

.divz {
 border: 0;
 padding: 0;
 margin: 5px 0 5px 0; 
 display: flex;
 justify-content: center;
}

.divz img {
 box-shadow: 5px 5px 2px rgba(220, 220, 220, 0.5);;
}

.divz div {
 box-shadow: 5px 5px 2px rgba(220, 220, 220, 0.5);
}

#buttons {
  padding: 20px;
  text-align: center;
}

.weblinks {
  list-style-image: url('images/bolt.gif');
  text-align: left;
}

.weblinks2 {
  list-style-image: url('images/yellow_sm.gif');
  text-align: left;
}

.weblinks3 {
  list-style-image: url('images/smolplant.gif');
  text-align: left;
}

.bullist {
  list-style-image: url('images/spinstar.gif');
  text-align: left;
}

#quizzes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#picrewsbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#picrewsbox img {
 width: 150px; 
}

#tower {
  background-image: url('images/tower/tower_bg.gif');
  background-repeat: no-repeat;
  background-position: center bottom;
  padding: 80px 0 2px 0;
  text-align: center;
  margin: 0 auto 0 auto;
  transform: rotate(2deg);
}

#tower img {
 margin: 0 0 -2px 0;
}

#updates {
 height: 120px;
 overflow: auto;
 font-size: 14pt;
}

/* SCROLLBAR STYLE */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(231, 199, 252, .50);
}

/* Track on hover */
::-webkit-scrollbar-track:hover {
  background: rgba(231, 199, 252, 1);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(0, 246, 245, .50);
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 246, 245, 1);
}