body{
background: url(materials/img/backgrounds/background.png);
}
#wrapper {
  background: url(materials/img/backgrounds/hpf.png);
  width:1115px;
  height:fit-content;
  margin:30px auto 30px auto;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:center;
  border-radius:40px;
  box-shadow:inset 0px 0px 10px 3px white;
  filter:drop-shadow(0 0 5px #fa89b8);
  border:3px solid white;
}
header {
  order:1;
  width:1080px;
  height:185px;
  margin-top:10px;
  background:url(materials/img/backgrounds/erm.png);
  border-radius: 200px 20px 20px 100px;
  border:2px solid white;
  filter:drop-shadow(0 0 4px #fa89b8);
}
header h1 {
  margin-top:40px;
  margin-left:260px;
  padding:10px;
  font:4.9em "FOT-Abolon";
  color:#fcdd53;
  text-shadow:3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
  filter: drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead);
}
header h2 {
  position:absolute;
  top:20px;
  padding:10px;
  margin-left:520px;
  transform:rotate(-6deg);
  font:1.3em "FOT-Abolon";
  color:white;
  text-shadow: 2px 0 #ff6ead, -2px 0 #ff6ead, 0 2px #ff6ead, 0 -2px #ff6ead,
1px 1px #ff6ead, -1px -1px #ff6ead, 1px -1px #ff6ead, -1px 1px #ff6ead;
}
header p {
  margin:-90px 120px auto auto;
  padding:10px;
  text-align:right;
  font:1.9em "FOT-Abolon";
  color:#fffb7a;
  text-shadow: 3px 0 #ff6ead, -3px 0 #ff6ead, 0 3px #ff6ead, 0 -3px #ff6ead,
2px 2px #ff6ead, -2px -2px #ff6ead, 2px -2px #ff6ead, -2px 2px #ff6ead;
}
.main-container {
  order:2;
  background: url(materials/img/backgrounds/clover3.png);
  width:882px;
  height:fit-content;
  margin:10px;
  padding:10px;
  box-sizing: border-box;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  gap:10px;
  border-radius:10px;
  box-shadow:inset 0px 0px 6px 1px white;
  filter:drop-shadow(0 0 2px hotpink);
}
.title-container {
  background: url(materials/img/graphics/fuc17.png);
  background-size: cover;
  width:248px;
  height:223px;
  transform: rotate(5deg);
  position:absolute;
  top:-190px;
  left:-20px;
  z-index:1;
}
.title-container p {
  font-size:2.0em;
  margin:45px 45px auto auto;
  text-align:right;
  font:2.0em "FOT-Abolon";
  color:#ff6ead;
  text-shadow:3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
  filter: drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead);
}
.menu-bg {
  order:1;
  width:170px;
  height:450px;
  background: url(materials/img/backgrounds/gp03.png);
  padding:10px;
  margin:5px;
  border-radius:10px;
  border:2px solid white;
  z-index:-1;
  filter: drop-shadow(0 0 2px hotpink);
}
menu {
  height:420px;
  box-sizing: border-box;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:hotpink #f5e2e8;
  background: url(materials/img/backgrounds/c029-6.gif);
  text-align:left;
  padding:10px;
  margin:5px;
  border-radius:10px;
  border:2px solid white;
  outline-offset:0px;
  color:#4a3a34;
}
@font-face { 
font-family: "FOT-Abolon";
src: url(materials/fonts/FOT-Abolon.otf);
}
menu h1 {
  font:1.2em "FOT-Abolon";
  text-align:center;
  margin:0px;
  background-color: #fff785;
  padding:2px;
  color:white;
  text-shadow:2px 0 #ff6ead, -2px 0 #ff6ead, 0 2px #ff6ead, 0 -2px #ff6ead,
1px 1px #ff6ead, -1px -1px #ff6ead, 1px -1px #ff6ead, -1px 1px #ff6ead;
 border-radius:20px;
 border:2px solid white;
 filter: drop-shadow(0 0 1px #6c7b82);
}
li {
  font:1.0em "FOT-Abolon";
  background-color:#fcfce3;
  margin:6px;
  padding:4px;
  border-radius:4px;
  border:1px solid white;
  list-style: none;
  text-align:center;
  text-shadow: 2px 0 white, -2px 0 white, 0 2px white, 0 -2px white, 1px 1px white, -1px -1px white, 1px -1px white, -1px 1px white;
  filter: drop-shadow(0 0 1px #f53165);
}
li:hover {
background: url(materials/img/backgrounds/st001-6.gif);
letter-spacing:0.1em;
transition:.6s;
}
a {
text-decoration: none;
color: hotpink;
}
a:visited {
color:skyblue;
text-decoration: none;
}
.info-container {
  order:1;
  background:url(materials/img/backgrounds/gp03.png);
  width:640px;
  height:474px;
  display:flex;
  flex-direction:row;
  gap:10px;
  border-radius:5px;
  border:2px solid white;
  filter: drop-shadow(0 0 2px hotpink);
}
.box {
  width:644px;
  height:464px;
  margin:5px auto auto 190px;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-content:center;
  gap:10px 10px;
  padding:0px;
  border-radius: 0px 10px 10px 0px;
}
.box-top {
  order:1;
  width:47%;
  height:300px;
  background-color:white;
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  overflow: auto;
  scrollbar-width: none;
  z-index:1;
  outline:2px solid hotpink;
  outline-offset:0px;
  filter:drop-shadow(0 0 1px #68727a);
}
.box-top h3 {
  position:sticky;
  color:hotpink;
  background:hotpink;
  box-sizing:border-box;
  padding:3px;
  margin:0px;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
  font:1.2em "FOT-Abolon";
  text-shadow: 2px 0 #ffffff, -2px 0 #ffffff, 0 2px #ffffff, 0 -2px #ffffff,
1px 1px #ffffff, -1px -1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff;
}
.box-bottom {
  order:2;
  width:430px;
  height:140px;
  background-color:white;
  border-radius: 6px 6px 0px 0px;
  overflow: auto;
  scrollbar-width: none;
  z-index:1;
  outline:2px solid hotpink;
  outline-offset:0px;
  filter: drop-shadow(0 0 1px #68727a);
}
.box-bottom h3 {
  position: sticky;
  color: white;
  background:#fce25b;
  box-sizing: border-box;
  padding:3px;
  margin:0px;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
  font:1.2em "FOT-Abolon";
  text-shadow: 2px 0 #f5588a, -2px 0 #f5588a, 0 2px #f5588a, 0 -2px #f5588a,
1px 1px #f5588a, -1px -1px #f5588a, 1px -1px #f5588a, -1px 1px #f5588a;
}
.box-top p {
  margin:2px;
  padding:5px;
  font:400 0.9em "Cause", cursive;
  line-height:1.0em;
  text-align:justify;
  color:#474240;
  overflow:auto;
  scrollbar-width: none;
}
.box-bottom p {
  margin:2px;
  padding:5px;
  font:400 0.9em "Cause", cursive;
  line-height:1.0em;
  text-align:center;
  color:#474240;
  overflow:auto;
  scrollbar-width: none;
}
.artnupdates-container {
  order:3;
  width:860px;
  height:204px;
  display: flex;
  flex-direction:row;
  align-content:center;
  margin:30px auto auto auto;
}
marquee {
  order:1;
  position: absolute;
  margin:-37px -30px auto auto;
  width:880px;
  padding:3px;
  background: url(materials/img/backgrounds/c010-1.gif);
  color:white;
  font:600 1.1em "Cause", cursive;
  filter: drop-shadow(0 0 1px #68727a);
  border:1px dashed hotpink;
  border-radius: 10px 0px 0px 10px;
  text-shadow: 2px 0 #f5588a, -2px 0 #f5588a, 0 2px #f5588a, 0 -2px #f5588a,
1px 1px #f5588a, -1px -1px #f5588a, 1px -1px #f5588a, -1px 1px #f5588a;
}
.news-container {
  order:2;
  width:860px;
  display:flex;
  align-content:center;
  gap:10px;
}
.news-container a {
  color: hotpink;
}
.updates {
  border:1px solid white;
  width:320px;
  height:fit-content;
  border-radius:10px;
  background: url(materials/img/backgrounds/dot-02-03.gif);
  padding:10px;
  filter: drop-shadow(0 0 1px #68727a);
}
.inner-lace {
  border-image: url(materials/img/backgrounds/s512_lace16_15_2.png) 30 fill round;
  filter: drop-shadow(0 0 1px #e6607f);
  border-width:10px;
  border-style:solid;
}
.inner {
  box-sizing: border-box;
  height:170px;
  font:0.9em "Cause", cursive;
  text-align:left;
  padding:10px;
  border-radius:10px;
  border:1px dashed hotpink;
  filter: drop-shadow(0 0 1px white);
  background:white;
  overflow:auto;
  scrollbar-width: none;
  margin-top:1px;
}
hr {
    border: none;
    border-top: 1px dashed skyblue;
    color: #fff;
    background-color: transparent;
    width:90%;
}
mark {
  font-size:0.9em;
  font-weight:600;
  background:#fff785;
  padding:3px;
  width:fit-content;
  color:white;
  text-decoration:none;
  text-shadow: 2px 0 #f5588a, -2px 0 #f5588a, 0 2px #f5588a, 0 -2px #f5588a,
1px 1px #f5588a, -1px -1px #f5588a, 1px -1px #f5588a, -1px 1px #f5588a;
}
.inner-lace h1 {
  z-index:1;
  position:absolute;
  top:-50px;
  font-family: "FOT-Abolon";
  color:#fce25b;
  text-shadow: 2px 0 #f5588a, -2px 0 #f5588a, 0 2px #f5588a, 0 -2px #f5588a,
1px 1px #f5588a, -1px -1px #f5588a, 1px -1px #f5588a, -1px 1px #f5588a;
}
.artbanner {
  order:3;
  width:970px;
  height:204px;
  margin-top:10px;
}
.artbanner h1 {
  z-index:1;
  position:absolute;
  bottom:515px;
  font-family: "FOT-Abolon";
  color:white;
  text-shadow: 2px 0 #f5588a, -2px 0 #f5588a, 0 2px #f5588a, 0 -2px #f5588a,
1px 1px #f5588a, -1px -1px #f5588a, 1px -1px #f5588a, -1px 1px #f5588a;
}
.artbanner img {
 border-radius:20px; filter: drop-shadow(0 0 1px #68727a);
 outline:3px solid #fce25b;
 outline-offset:0px;
}
.artbanner p {
  font-family: "FOT-Abolon";
  color:white;
  width:fit-content;
  text-shadow: 2px 0 #f5588a, -2px 0 #f5588a, 0 2px #f5588a, 0 -2px #f5588a,
1px 1px #f5588a, -1px -1px #f5588a, 1px -1px #f5588a, -1px 1px #f5588a;
  background: url(materials/img/backgrounds/c010-1.gif);
  position:absolute;
  right:10px;
  bottom:326px;
  padding:8px;
  border-radius:20px 0px 20px 0px;
  z-index:1;
  border-top:2px solid #fce25b;
  border-left:2px solid #fce25b;
}
.erm {
  order:3;
  width:980px;
  height:fit-content;
  display:flex;
  align-content:center;
  gap:10px;
}
.erm-box {
  border:1px solid white;
  width:50%;
  height:290px;
  border-radius:10px;
  background: url(materials/img/backgrounds/candyrabitland.jpg);
  padding:15px;
  filter: drop-shadow(0 0 1px #68727a);
}
.erm-box h1 {
  z-index:1;
  position:absolute;
  bottom:260px;
  padding:5px;
  width:380px;
  font:0.8em "Cause", cursive;
  text-align:center;
  background: white;
  border-radius:10px;
  border:1px dashed hotpink;
  color: #474240;
}
.chat-title {
  background: url(materials/img/graphics/fumo13.png);
  background-size: cover;
  width:208px;
  height:188px;
  transform: rotate(5deg);
  position:absolute; 
  bottom:200px;
  left:-190px;
  z-index:-1;
}
.chat-title p {
  transform: none;
  margin:50px 25px auto auto;
  text-align:right;
  font:1.8em "FOT-Abolon";
  color:#ff6ead;
  text-shadow:3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
  filter: drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead);
}
.chat-inner {
  background-color: white;
  box-sizing:border-box;
  margin-top:40px;
  height:250px;
  padding:0px;
  border-radius:10px;
  border:1px dashed hotpink;
  overflow:hidden;
  filter: drop-shadow(0 0 2px white);
}
.chat-inner iframe {
  filter: none;
  border:none;
}
.microblog-inner {
  background-color: white;
  box-sizing:border-box;
  height:290px;
  padding:10px;
  border-radius:10px;
  border:1px dashed hotpink;
  filter: drop-shadow(0 0 2px white);
  overflow:auto;
  scrollbar-width: none;
}
.entry {
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  flex-flow:;
}
.entry h2 {
  order:1;
  width: fit-content;
  margin-top:10px;
  font:400 1.0em "Cause", cursive;
  height:fit-content;
}
.entry p {
order:3;
width:100%;
margin:5px;
padding:10px;
font:400 0.9em "Cause", cursive;
line-height:1.0em;
text-align:left;
color:#474240;
background:#cbeb8a;
border-radius:10px;
filter: drop-shadow(0 0 1px hotpink);
box-shadow:inset 0px 0px 6px 1px white;
border:1px solid white;
text-shadow: 2px 0 #ffffff, -2px 0 #ffffff, 0 2px #ffffff, 0 -2px #ffffff,
1px 1px #ffffff, -1px -1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff;
}
.microblog-inner hr {
  border:none;
  height:1px;
  background-color: #ccc;
  width:90%;
}
.post-time-short {
order:2;
font:400 0.9em "Cause", cursive;
color:skyblue;
width:fit-content;
text-align:right;
margin-left:10px;
margin-top:10px;
}
.entry img {
  order:1;
  width:8%;
  height:fit-content;
  margin:3px;
}
.visit-container {
  order:2;
  width:190px;
  height:fit-content;
  box-sizing: border-box;
  display:flex;
  gap:10px;
  flex-direction: column;
  justify-content:center;
  margin:0px;
  margin-top:10px;
}
.buttons-title {
  background: url(materials/img/graphics/fumo33.png);
  position:absolute;
  width:207px;
  height:190px;
  right:-170px;
  top:160px;
  transform:rotate(5deg);
  z-index:-1;
}
.buttons-title h1 {
font:2.5em "FOT-Abolon";
text-align:right;
margin-top:50px;
margin-right:70px;
color:#ff6ead;
text-shadow:3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
filter: drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead);
}
.buttons-title p {
font:0.9em "FOT-Abolon";
text-align:left;
color: #474240;
margin-top:-25px;
margin-left:40px;
text-shadow:3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
}
.buttons {  
  height:440px;
  width:170px;
  overflow:auto;
  scrollbar-width:none;
  padding:8px;
  background: url(materials/img/backgrounds/c029-6.gif);
  filter: drop-shadow(0 0 1px #68727a);
  border-radius:10px;
  border:1px dashed hotpink;
  text-align: center;
}
.buttons img {
  width:47%;
  border:1px solid white;
  filter: drop-shadow(0 0 1px #68727a);
}
.bottom {
  background-color:transparent;
  height:483px;
}
.bottom iframe {
  border-radius:4px;
  border:1px dashed white;
  filter: drop-shadow(0 0 1px #68727a);
}
.tv-title {
  background: url(materials/img/graphics/fumo14.png);
  width:175px;
  height:160px;
  position:absolute;
  bottom:200px;
  right:-15px;
  filter:drop-shadow(0 0 2px  hotpink);
  z-index:-1;
}
.tv-title p{
  margin:50px 10px 1px auto;
  text-align:right;
  font:1.5em "FOT-Abolon";
  color:#ff6ead;
  text-shadow:3px 0 #fff, -3px 0 #fff, 0 3px #fff, 0 -3px #fff, 2px 2px #fff, -2px -2px #fff, 2px -2px #fff, -2px 2px #fff;
  filter: drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead) drop-shadow(0px 0px 1px #ff6ead);
}
.tv {
  background: url(materials/img/graphics/tv.png);
  width:269px;
  height:240px;
  position:absolute;
  bottom:65px;
  right:-15px;
  z-index:1;
}
.tv iframe {
z-index:1;
width:187px;
height:137px;
margin-top:40px;
margin-left:35px;
transform:skew(0deg, 10deg) rotate(-2deg);
filter: drop-shadow(0 0 3px  #68727a);
}
footer {
  order:3;
  width:1050px;
  background-color:#fce25b;
  margin:0px;
  padding:10px;
  border-radius:0px 0px 40px 40px;
  box-shadow:inset 0px 0px 6px 1px white;
  filter: drop-shadow(0 0 3px  #68727a);
}
footer a {
  color: white;
}
footer a:hover {
color:skyblue;
text-decoration: none;
}
footer p {
  margin:0px;
  padding:4px;
  font:1.0em "FOT-Abolon";
  color:white;
  text-align: center;
  border: 1px dashed white;
  border-radius: inherit;
  text-shadow:2px 0 hotpink, -2px 0 hotpink, 0 2px hotpink, 0 -2px hotpink, 1px 1px hotpink, -1px -1px hotpink, 1px -1px hotpink, -1px 1px hotpink;
}
::selection {
  color: #189adb;
  background:transparent;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
@keyframes rotation {
from {
 transform: rotate(0deg);
}
to {
 transform: rotate(360deg);
}