@font-face {
    font-family: 'romance';
    src: url(/credits/RomanceB.ttf);
}

@font-face {
    font-family: 'emoji';
    src: url(/credits/EmojiFont.ttf);
}

@font-face {
    font-family: 'Mademoiselle';
    src: url(/Mademoiselle.ttf);
}

@font-face {
    font-family: 'gothic pixels';
    src: url(/GothicPixels.ttf);
}

@font-face {
    font-family: 'cherish';
    src: url(/Cherish.ttf);
}

body {
    background: url(/credits/main-background.png);
}

#content {
    line-height: 25px;
    padding-left: 15px;
    width: 535px;
    border-right: 10px solid transparent;
    border-top: 10px solid transparent;
    border-image: url(/credits/content-border.png) 10 fill round;
    margin-left: -15px;
    margin-top: -10px;
}

.content {
    background-image: url(/credits/content-background.gif);
    padding: 5px;
    border-top: 1px dotted #e2aaab;
    border-right: 1px dotted #e2aaab;
}

#content h2 {
    font-family: 'romance';
    font-weight: normal;
    color: #ea9193;
    margin: 0px;
    padding: 0px;
}

li {
    line-height: 20px;
    margin-left: 30px;
    list-style-type: 'w';
    font-family: 'emoji';
  padding-inline-start: 1ch;
    color: #ea9193;
}

li b {
    font-family: 'Mademoiselle';
    font-weight: normal;
    color: rgb(83, 83, 83);
}

#content a, #content a:visited {
    color: #A29CF0;
    text-decoration: none;
}

#content a:hover {
    color: #ea9193;
}

.content {
    z-index: 6;
}

#banner {
    color: #ea9193;
    font-family: 'gothic pixels';
    font-size: 50px;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.one {
    width: 500px;
}

#float1 {
    background-image: url(/credits/float1.png);
    height: 540px;
    width: 540px;
}

#title {
    font-family: 'Mademoiselle';
    font-size: 80px;
    color: #ea9193;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

#float2 {
    width: 400px;
    height: 400px;
    background-image: url(/credits/float2.png);
}

#float3 {
    width: 540px;
    height: 386px;
    background-image: url(/credits/float3.png);
}

#float4 {
    width: 400px;
    height: 454px;
    background-image: url(/credits/float4.png);
}

#float5 {
    width: 458px;
    height: 458px;
    background-image: url(/credits/float5.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#menu {
    width: 390px;
    height: 100px;
    border: 10px solid transparent;
    border-image: url(/credits/menu-border.png) 12 fill round;
    color: #ea9193;
    font-family: 'Mademoiselle';
    padding-left: 10px;
}

#menu h1 {
    font-family: 'cherish';
    margin: 0px;
    text-align: center;
}

#menu a, #menu a:visited {
    color: #ea9193;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    text-decoration: none;
}

#menu a:hover {
    color: #fff;
    text-shadow: -1px -1px 0 #ea9193, 1px -1px 0 #ea9193, -1px 1px 0 #ea9193, 1px 1px 0 #ea9193;
}

hr {
    background-image: url(/credits/divider.png);
    background-position: center;
    background-repeat: no-repeat;
    height: 20px;
    border: none;
}