/* -------------------------------------- body */
body {
    background: #fff3f3;
}

/* -------------------------------------- container */
.container-outer {
    width: 770px;
    height: 360px;
    border-radius: 3px;
    border: 1px solid;
    border-image-source: url(/graphics/0_sweet-pea/border_1.gif);
    border-image-repeat: round;
    border-image-slice: 5;
    border-image-width: 4px;
    background: white;
    padding: 2.4px;
}

.container {
    border: 1px dashed;
    height: -webkit-fill-available;
}

.container-flex {
    display: flex;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    flex-direction: row;
    padding: 5px;
    gap: 5px;
}

/* -------------------------------------- nav */
.credits-nav {
    min-width: 190px;
    border: 1px solid;
    border-radius: 3px;
}

.credits-h2 {
    display: flex;
    border-bottom: 1px dotted;
    padding: 5px 3px;
    background: linear-gradient(to bottom, #fcfafa 0%, #faeaeb 50%, #f3d2d4 51%, #fdf5f5 100%);
    border-radius: 3px 3px 0px 0px;
    font-size: 12px;
    text-transform: uppercase;
    justify-content: space-between;
    letter-spacing: 4px;
}

.credits-h2::before {
    content: url(/graphics/foollovers/icon_034.gif);
}

.credits-buttons {
    display: flex;
    height: 206px;
    overflow: auto;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
}

.credit-button {
    height: 35px;
    letter-spacing: 2px;
    border: 1px dotted;
    border-radius: 3px;
    background: url(/graphics/fancyparts/bg_005.gif);
    box-shadow: inset 2px 2px 0px white, inset -1px -1px 0px #9eadb994;
    cursor: pointer;
}

.credit-button:hover {
    box-shadow: inset -2px -2px 0px white, inset 1px 1px 0px #9eadb994;
}

.credit-button2 {
    height: 35px;
    letter-spacing: 2px;
    border: 1px dotted;
    border-radius: 3px;
    background: url(/graphics/fancyparts/bg_003.gif);
    box-shadow: inset 2px 2px 0px white, inset -1px -1px 0px #a7b99e94;
    cursor: pointer;
}

.credit-button2:hover {
    box-shadow: inset -2px -2px 0px white, inset 1px 1px 0px #a7b99e94;
}

/* -------------------------------------- main */
.credits-main {
    border: 1px solid;
    border-radius: 3px;
    width: -webkit-fill-available;
}