* {
    scrollbar-color: #c6a6b6 #e6d6db;
    cursor: url("./images/cursor.png"), default;
}
/*** Imported Fonts ***/
@font-face {
    font-family: basiic;
    src: url(./fonts/basiic.ttf);
}

/*** Text Customisation ***/
body {
    font-family: "basiic";
    letter-spacing: 1px;
    line-height: 22px;
    color: #0c0c0c;
    font-size: 17px;
    background-color: #778f9e;
    background-image: url("images/backgrounds/gray-floral.png");
    background-size: 6vw;
}
h2 {
    font-family: "basiic";
    color: #0c0c0c;
    font-size: 20px;
    text-decoration: underline wavy #e6b3cc 2px;
    text-underline-offset: 3px;
}

/*** Main Box ***/

.page-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 1vw;
    margin: 6vh auto;
}

.main-content {
    border: solid 2px black;
    background-image: repeating-linear-gradient(to bottom, #ebe0e0, #ebe0e0 20px, #b8b6b6 21px, #ebe0e0 22px);
    background-attachment: local;
    padding: 28px;
    width: 35vw;
    height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.main-paragraphs p {
    margin-bottom: 1.3em;
    position: relative;
    top: 14px;
}

.main-paragraphs h2 {
    position: relative;
    top: 10px;
}

/* Character Profile */
.character-profile {
    display: flex;
    padding: 1px 5px;
    position: relative;
}

.character-profile p {
    margin: 0;
    line-height: 1.3;
}

.profile-image img {
    max-width: 150px;
    background: #e6d6db;
    border: solid 1px black;
    padding: 3px;
    margin-right: 1vw;
}
.picrew-link {
    position: absolute;
    transform-origin: left top;
    background-color: rgba(255, 255, 255, 0.5); /* light pink with 50% opacity */
    top: 120px;
    left: 117px;
    z-index: 2;
    font-size: 12px;
}

a:link,
a:visited {
    color: black;
    text-decoration: underline wavy hotpink;
}

a:hover {
    color: #874064;
}

.text-wrapper {
    border: solid 1px black;
    background: #e6d6db;
    padding: 1.1vw 1vw;
    height: fit-content;
}

.text-boxes {
    display: flex;
    flex-direction: row;
}

.second-info {
    margin-left: 1vw;
}

/*** Top Bottom Lace ***/
.toplace,
.bottomlace {
    position: fixed;
    height: 70px;
    right: 1px;
    width: 107em;
    background-size: calc(100% / 25) auto;
    z-index: 2;
    filter: contrast(1.3) saturate(70%);
}

.toplace {
    background-image: url(images/half-top.png);
    top: -15px;
}

.bottomlace {
    background-image: url(images/half-bottom.png);
    bottom: -15px;
}

/*** Left Panel ***/
.left-panel {
    width: 110px;
    display: flex;
    flex-direction: column;
}

.navigation a {
    display: block;
    background-color: #e1d8d8;
    border: 2px solid black;
    padding: 4px;
    margin-bottom: 8px;
    text-align: center;
}

.updates {
    width: 180px;
    height: 200px;
    background-color: #e1d8d8;
    border: 2px solid black;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    right: 93px;
    top: 262px;
    padding: 10px;
}

/*** Right Panel ***/

.right-panel {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.webring-section,
.button-section {
    border: 2px solid black;
    background-color: #e1d8d8;
    padding: 8px;
    text-align: center;
    max-height: 250px;
    overflow-y: auto;
}

.buttons img {
    width: 98px;
    display: block;
}

.buttons,
.webrings {
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.blinkies {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: scale(0.9);
    gap: 8px;
}