body{
  background: url(materials/img/backgrounds/a07-bg-frill.gif);
}
#wrapper {
  width:1000px;
  height:fit-content;
  margin:60px auto 10px auto;
  padding:10px;
  display:flex;
}
header {
  background:url(materials/img/graphics/A52533-C6-3-A54-4-DA3-98-F2-3-A5084-F620-E6.gif);
  height:20px;
  position:absolute;
  z-index:99999;
  top:32px;
  left:580px;
  font:1.9em "FOT-Abolon";
  color:white;
  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;
filter: drop-shadow(0 0 2px hotpink);
}
footer {
  position:absolute;
  bottom:80px;
  margin:0px;
  padding:10px;
  border-radius:0px 0px 40px 40px;
  font:1.0em "FOT-Abolon";
  color:white;
  text-align: center;
  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;
}
footer a {
  color: white;
text-decoration: underline dotted;
}
footer a:hover {
color:skyblue;
text-decoration: none;
}
@font-face { 
font-family: "FOT-Abolon";
src: url(materials/fonts/FOT-Abolon.otf);
}
.directory-container { 
background:url(materials/img/backgrounds/dot-02-48.gif);
width:550px;
height:fit-content;
border-radius:10px;
border:1px solid white;
filter: drop-shadow(0 0 2px #e6607f);
z-index:2;
}
.inner-bg { 
  width:90%;
  height:fit-content;
  margin:20px auto 20px auto;
  border-radius: inherit;
  padding:10px;
background:url(materials/img/backgrounds/r008-6.gif);
  filter: drop-shadow(0 0 1px #2b424f);
  box-shadow: inset 0px 0px 2px 1px white;
  border:1px solid white;
}
.lace {
  border-image: url(materials/img/backgrounds/s512_lace16_15_2.png) 30 fill round;
  border-width:10px;
  border-style:solid;
  filter: drop-shadow(0 0 1px #e6607f);
}
.directory-inner {
  background-color:white;
  background-image:url(materials/img/backgrounds/lined-paper.png);
  width:auto;
  height:640px;
  box-sizing:border-box;
  margin:10px;
  border-radius:10px;
  padding:20px;
  text-align: center;
  overflow:auto;
  overflow-x:hidden;
  scrollbar-width: none;
  border:3px solid #bde1f7;
  z-index:1;
}
.directory-inner h1 {
font:1.5em FOT-Abolon;
margin:auto;
padding:4px;
color:#ff8c00;
background:rgba(255, 255, 181, 0.6);
text-align:right;
}
.directory-inner p {
padding:5px;
margin:5px;
color:#3659d9;
font:0.96em "Jua", sans-serif;
}
.inner-top {
height:50px;
width:455px;
border-radius:10px 10px 0 0;
background:url(materials/img/backgrounds/dot-02-45.gif);
position: sticky;
top:-20px;
color:white;
box-sizing:border-box;
padding:3px;
margin:-21px auto auto -20px;
z-index:1;
box-shadow: 0px 1px 5px 1px #69a5c9;
}
.inner-top p {
color:#ff4f8d;
font-size:1.2em;
width:100px;
border:2px dotted skyblue;
margin:5px 20px auto auto;
height:fit-content;
text-align:;
background:white;
padding:3px;
border-radius:20px;
}
menu {
  width:100px;
  position:absolute;
  top:60px;
  right:-52px;
  display:flex;
  gap:55px;
  flex-direction:column;
  z-index:-2;
}
menu button {
  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;
  background:url(materials/img/backgrounds/c026-5.gif);
  font-family: "Jua", sans-serif;
  font-size:1.1em;
  border-radius:8px 8px 0px 0px;
  padding:6px;
  margin:4px;
  border:2px solid white;
  color:hotpink;
  transform:rotate(90deg);
  box-shadow: 0px 0px 0px 1px #69a5c9;
  cursor:crosshair;
}
.bubble {
  background: url(materials/img/graphics/fuc17.png);
  background-size: cover;
  width:208px;
  height:188px;
  position:absolute; 
  top:50px;
  right:-250px;
  z-index:-4;
}
.bubble p {
  margin:75px 26px auto auto;
  text-align:center;
  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);
}
dl {
color:hotpink;
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;
font-size:1.4em;
font-family: "Jua", sans-serif;
text-align:left;
margin:5px;
}
dl a {
  color:hotpink;
  text-decoration:none;
}
dl a:visited {
  text-decoration:none;
}
dl a:hover {
  color:skyblue;
}
dd {
  color: #3d3732;
  font-size:0.7em;
  font-family: "Cause", cursive;
}
::selection {
  color: #189adb;
  background:#f7ef79;
  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);
}