@font-face {
 font-family: sillypixel;
 src: url(sillypixel.woff)
}
@font-face {
  font-family: cutepixel;
  src: url(CutePixel.woff)
}
@font-face {
  font-family: daydream;
  src: url(Daydream.woff);
}
.choco {
  color: #f6d317;
  font-family: daydream;
  font-size: 60px;
  text-align: center;

}

.leftcircle {
  margin-left: -3px;
 font-family: cutepixel;
 position: relative;
 text-align: center;
 font-size: 15px;
 color: #fffae6;
}
.leftcircle h1 {
  font-size: 20px;
  font-family: daydream;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#leftbox span {
  font-size: 20px;
  font-family: sillypixel;
  color: #cc5c00;
  vertical-align: text-bottom;
  font-weight: bold;
}
#leftside {
  margin-left: 140px;
  width: 164px;
}
#leftbox ul{
  color: #ef9007;
  margin-left: -15px; 
  list-style-image: url("starslist.gif");
}
#leftbox {
  margin-top: -12px;
  height: 500px;
  border: 2px solid #cc5c00;
  box-shadow:   -2px 0 0 0 #cc5c00,
                 2px 0 0 0 #cc5c00,
                 0 -2px 0 0 #cc5c00,
                 0 2px 0 0 #cc5c00;
  background-color: #fffae6;
  overflow: auto;
  font-family: cutepixel;
  font-size: 25px;
}
b {
  color: turquoise;
}
.rightcircle {
  margin-left: -8px;
  font-family: daydream;
  position: relative;
  text-align: center;
  font-size: 15px;
  color: #dcf5ff;
}
.rightcircle h1 {
  font-size: 20px;
  font-family: daydream;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#rightside {
  float: right;
  margin-right: 140px;
  width: 164px;
}
.rightbox {
  margin-top: -15px;
  height: 500px;
  box-shadow:   -2px 0 0 0 #001488,
                 2px 0 0 0 #001488,
                 0 -2px 0 0 #001488,
                 0 2px 0 0 #001488;
  border: 2px solid #001488;
  background-color: #dcf5ff;
  overflow: auto;
  font-family: cutepixel;
  color: #1e3f54;
}
.rightbox h2 {
  margin-left: 10px;
}
#rightside, #leftside, #centerside {
  position: relative;
  display: inline-block;
}
#centerside {
  width: 730px;
  margin-left: 2px;
}
.centerbox {
  height: 500px;
  font-size: 20px;
  font-family: cutepixel;
  overflow: auto;
  background-color: #ffff;
  border: 2px solid #00885b;
  box-shadow:   -2px 0 0 0 #008868,
                 2px 0 0 0 #008868,
                 0 -2px 0 0 #008868,
                 0 2px 0 0 #008868;
}
#centerside ol {
  background-color: #fffae6;
  width: 360px

}
#centerside span {
  vertical-align: text-bottom;
  font-family: sillypixel;
  font-size: 30px;
  color: palevioletred;
}
#centerside p, #centerside ol, #centerside h1 {
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
#centerside h1 {
  color: #001488;
}
#centerside p, #centerside ol {
  color: #2d70af;
}
body {
  background: url("bg.gif") no-repeat fixed;
  background-size: cover;
}
#leftbox img {
  position: relative;
  vertical-align: text-bottom;
  width: 27px;
}
iframe {
  margin-left: 5px;
}
#rightside a:visited {
  color: #ef9007;
}
#rightside a {
  color: #45bcee;
}
#leftside a {
  color: #f6d317;
}
#leftside a:visited{
  color: #45bcee;
}
#rightside img {
 width: 150px;
 margin-left: 5px;
}
.status {
  margin-bottom: -2px;
}