:root {
    --color-border: #96a2c8;
    --color-box: #cad6e8;
    --color-box-transparent: rgba(202, 214, 232, 0.88);
    --color-border-transparent: rgba(150, 162, 200, 0.88);
    --color-accent: #b93978;
    --radius: 0px;
    --gap: 12px;
 
    --font-body: Verdana, sans-serif;
    --font-heading: Verdana, sans-serif;
    --font-title: Verdana, sans-serif;
    --font-tiny: Verdana, sans-serif;
    --font-mono: Verdana, sans-serif;
 
    --nav-width: 120px;
    --wrapper-max: 950px;
 
    --site-scale: 0.75;
}
 
* {
    box-sizing: border-box;
}
 
body {
    margin: 0;
    padding: 20px;
    background: url("Images/MishamBG.png") center / cover fixed;
    font-family: var(--font-body);
    font-size: 15px;
    color: #222;
}
  
.page-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
 
    zoom: var(--site-scale);
}
html,
body {
    margin-top: 0;
    margin-bottom: 5px;
    padding: 0;
}
 
.top-marquee {
    width: 100%;
    height: 22px;
    background: #c23878;
    color: white;
 
    margin-bottom: 10px;
    padding-bottom: 0;
 
    overflow: hidden;
    white-space: nowrap;
 
    position: relative;
    box-sizing: border-box;
    z-index: 9999;
}
 
.top-marquee-text {
    position: absolute;
    top: 0;
    left: 0;
 
    height: 22px;
    line-height: 22px;
 
    margin: 0;
    padding: 0;
 
    font-size: 12px;
    font-weight: normal;
    font-family: var(--font-tiny);
 
    white-space: nowrap;
 
    animation: marquee-scroll 18s linear infinite;
}
 
@keyframes marquee-scroll {
    from {
        transform: translateX(100vw);
    }
 
    to {
        transform: translateX(-100%);
    }
}

.floating-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    margin: 0;
    padding: 12px;
    border: 2px solid var(--color-border);
    background: var(--color-box-transparent);
}
 
.floating-nav h2 {
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 28px;
    min-width: 0;
    overflow: hidden;
    margin: -12px -12px 10px;
    padding: 4px 7px 5px;
    min-height: 27px;
    background: var(--color-border-transparent);
    border-bottom: 2px solid var(--color-border);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: bold;
    text-align: left;
}
 
.floating-nav h2 .ghead {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
}
 
.floating-nav a {
    display: block;
    padding: 7px 5px;
    text-align: center;
    text-decoration: none;
    background: rgba(251, 243, 247, 0.7);
    border: 0;
    border-left: 3px solid var(--color-accent);
    border-bottom: 1px solid rgba(150, 162, 200, 0.7);
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: .95rem;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
 
.floating-nav a:hover {
    transform: translateX(4px);
    background: transparent;
    border-left-color: var(--color-border);
}

.wrapper {
    width: var(--wrapper-max);
    max-width: calc(100vw - var(--nav-width) - 80px);
 
    border: 4px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-box-transparent);
 
    padding: 15px;
    position: relative;
}
 
header {
    border: 4px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-box-transparent);
    padding: 10px 15px;
}
 
header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-family: var(--font-title);
}
 
header {
    position: relative;
}
 
.visitor-counter {
    position: absolute;
    top: 52%;
    right: 4px;
    transform: translateY(-50%);
 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
 
    color: var(--color-accent);
    font-family: var(--font-tiny);
    font-size: 10px;
    line-height: 1.1;
    text-align: right;
}
 
.visitor-counter span {
    font-size: 10px;
    color: var(--color-accent);
}
 
.visitor-counter img {
    width: 125px;
    height: auto;
    image-rendering: pixelated;
}

.content-grid {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    margin-top: var(--gap);
    width: 100%;
}
 
.left-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    flex: 3.3 1 0;
    min-width: 0;
}
 
.top-row {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    width: 100%;
}
 
.col-left {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    flex: 1.3 1 0;
    min-width: 0;
}
 
.col-middle {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    flex: 2 1 0;
    min-width: 0;
}
 
.bottom-row {
    display: flex;
    gap: var(--gap);
    width: 100%;
}
 
.bottom-row > * {
    flex: 1 1 0;
    min-width: 0;
}

.bottom-row .guestbook-box {
    flex: 0.75 1 0;
}

.bottom-row .links-box {
    flex: 1.25 1 0;
}
 
.right-rail {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
 
    flex: .9 1 0;
    min-width: 0;
    align-self: start;
    font-family: var(--font-tiny);
}
 
.right-rail > * {
    flex: 0 0 auto;
}
 
.about-box,
.welcome-box,
.music-box,
.fortune-box,
.site-button-box,
.piclog-box,
.updates-box,
.blog-box,
.blinkies-box,
.guestbook-box,
.links-box,
.social-box {
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-box-transparent);
    padding: 12px;
    min-width: 0;
}
 
.about-box h2,
.welcome-box h2,
.music-box h2,
.fortune-box h2,
.site-button-box h4,
.updates-box h2,
.blog-box h2,
.blinkies-box h2,
.guestbook-box h2,
.links-box h2,
.social-box h2,
.piclog-box h2 {
    margin-top: 0;
}
 
.about-box h2,
.welcome-box h2,
.music-box h2,
.fortune-box h2,
.updates-box h2,
.blog-box h2,
.blinkies-box h2,
.guestbook-box h2,
.links-box h2,
.social-box h2,
.piclog-box h2 {
    margin: -12px -12px 10px;
    padding: 4px 7px 5px;
 
    min-height: 27px;
    line-height: 28px;
    font-size: 1.15rem;
 
    display: flex;
    align-items: center;
    gap: 3px;
 
    background: var(--color-border-transparent);
    border-bottom: 2px solid var(--color-border);
 
    color: var(--color-accent);
    font-family: var(--font-heading);
}
 
.about-box h2 {
    margin: -3px -5px 10px;
}
 
.about-box h2,
.welcome-box h2,
.social-box h2 {
    display: flex;
    align-items: center;
}
 
.about-box h2 > .ghead,
.welcome-box h2 > .ghead,
.social-box h2 > .ghead {
    flex-shrink: 0;
}
 
.ghead {
    display: block;
    width: 28px;
    height: auto;
}
 
.content-grid h2 {
    color: var(--color-accent);
}
 
.about-box h2,
.welcome-box h2,
.social-box h2 {
    display: flex;
    align-items: center;
}
 
.onlinehead,
.welchead,
.sochead {
    display: block;
    margin-left: auto;
    height: auto;
}
 
.onlinehead {
    width: 100px;
}
 
.welchead {
    width: 35px;
}
 
.sochead {
    width: 25px;
}

.about-box {
    padding: 3px 5px 12px;
}
 
.pfp {
    display: block;
    width: 100%;
    max-width: 240px;
    height: auto;
    margin: 3px auto;
 
    border: 3px solid var(--color-border);
    border-radius: var(--radius);
    background: transparent;
}
 
iframe[title="Status.Cafe Status"] {
    display: block;
    width: 100%;
    height: 80px;
 
    border: 0;
    background: #a0abce;
    padding: 12px 16px;
    margin: 1.5em 0 .5em;
    border-radius: 0;
}
 
iframe[title="Status.Cafe Status"] + .qa-row {
    margin-top: 0;
}
 
.mood-body {
    width: 90px;
    height: auto;
}
 
.qa-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    margin: 6px 0;
}
 
.qa-row-wide {
    grid-template-columns: 100px minmax(0, 1fr);
}
 
.qa-left {
    display: flex;
    align-items: center;
    gap: 4px;
 
    font-weight: bold;
    color: var(--color-accent);
}
 
.qa-right {
    text-align: left;
    overflow-wrap: anywhere;
}
 
.shead {
    width: 18px;
    height: auto;
}

.micro-row {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
 
.micro {
    width: 120px;
    height: auto;
    margin-right: 2px;
}

.welcome-box {
    font-size: .95rem;
    line-height: 1.5;
    height: 650px;
    overflow: hidden;
}
 
.wewave {
    width: 25px;
    height: auto;
}
 
.welcome-note {
    position: relative;
    width: 85%;
    margin: 35px auto 15px;
    padding: 17px;
 
    transform: rotate(-1deg);
 
    border: 2px solid #da8fba;
    border-radius: 0;
 
    background-color: #fbf3f7;
    background-image:
        linear-gradient(#f7e6f0 1px, transparent 1px),
        linear-gradient(90deg, #f7e6f0 1px, transparent 1px);
    background-size: 12px 12px;
}
 
.welcome-tape {
    position: absolute;
 
    width: 150px;
    top: -40px;
    left: 90%;
 
    transform: translateX(-50%) rotate(15deg);
 
    z-index: 10;
}
 
.note-banner {
    position: absolute;
 
    width: 350px;
    left: 2%;
 
    max-width: calc(100% - 10px);
}

.social-box {
    display: flex;
    flex-direction: column;
}
 
.social-box h3 {
    margin-bottom: 5px;
}
 
.social-box a {
    color: var(--color-accent);
    text-decoration: none;
}
 
.fban {
    display: block;
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 4px auto;
}
 
marquee {
    background: var(--color-accent);
    color: white;
    border-block: 2px solid var(--color-accent);
    padding: 3px 0;
    font-size: .8rem;
}
 
.button-marquee {
    height: 70px;
    margin: 3px;
 
    background: transparent;
    border: 0;
}
 
.button-marquee img {
    margin-right: 4px;
    vertical-align: middle;
}

 
.webrings-scroll {
    height: 130px;
 
    overflow-y: auto;
    overflow-x: hidden;
 
    padding: 5px;
 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
 
.webrings-scroll img {
    max-width: 100%;
    height: auto;
}
 
.updates-box {
    min-height: 0;
    height: 500px;
    max-height: 500px;
    margin-top: 0;
    overflow: hidden;
 
    display: flex;
    flex-direction: column;
}

.updates-box h2 {
    height: 44px;
    min-height: 44px;
}
 
.updates-scroll {
    flex: 1 1 auto;
 
    min-height: 0;
    height: auto;
 
    overflow-y: auto;
    overflow-x: hidden;
 
    padding-right: 8px;
}
 
.updates-scroll p {
    margin: 11px 0;
    line-height: 1.5;
    font-family: var(--font-mono);
}
 
 
.music-box {
    min-height: 100px;
    align-self: start;
}
 
.listening-player {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    height: 150px;
}
 
.listening-cover {
    width: 150px;
    height: 150px;
    flex: 0 0 150px;
    padding: 4px;
    border: 2px solid var(--color-accent);
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}
 
.listening-cover iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    overflow: hidden;
}
 
.listening-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    height: 150px;
    min-width: 0;
}
 
.musicbar {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.8;
    border: 2px solid #000;
    border-top: 0;
}
 
.listening-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    width: 100%;
    margin-top: auto;
}
 
.listening-box,
.listening-box iframe {
    width: 100%;
}
 
.listening-box {
    min-width: 0;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    padding: 4px;
    border: 1px solid #da8fba;
    background: rgba(251, 243, 247, 0.72);
}
 
.listening-box iframe {
    height: 48px;
    border: 0;
}
 
 
.fortune-box {
    min-height: 70px;
    height: 329px;
}
 
#fortune-box {
    text-align: center;
    margin: 12px auto;
}
 
#fortune-button {
    cursor: pointer;
 
    background: #fbf3f7;
    border: 2px solid var(--color-accent);
    border-radius: 6px;
    box-shadow: 3px 3px 0 rgba(185, 57, 120, 0.35);
    color: var(--color-accent);
    font-weight: bold;
 
    padding: 6px 12px;
 
    font-family: var(--font-body);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
 
#fortune-button:hover {
    background: #fff;
    box-shadow: 1px 1px 0 rgba(185, 57, 120, 0.35);
    transform: translate(2px, 2px);
}
 

#fortune-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
 
    gap: 10px;
    margin-top: 15px;
    height: 140px;
}
 
.fortune-card {
    width: 112px;
 
    text-align: center;
    position: relative;
 
    opacity: 0;
 
    animation-duration: 0.75s;
    animation-timing-function: cubic-bezier(.2, .8, .3, 1);
    animation-fill-mode: forwards;
}

.fortune-card-image {
    position: relative;
 
    width: 112px;
 
    line-height: 0;
}
 
.fortune-card-back .fortune-card-image {
    height: 146px;
    border: 2px solid var(--color-accent);
    background:
        linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.45) 47% 53%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, 0.45) 47% 53%, transparent 54%),
        var(--color-border-transparent);
    background-size: 18px 18px;
    box-shadow: inset 0 0 0 4px rgba(251, 243, 247, 0.6);
}
 
.fortune-card-back {
    opacity: 1;
    animation: none;
}
 
.fortune-card-back:nth-child(1) {
    transform: translateX(0) rotate(-2deg);
}
 
.fortune-card-back:nth-child(2) {
    transform: translateY(-3px) rotate(2deg);
}
 
.fortune-card-back:nth-child(3) {
    transform: translateX(0) rotate(-1deg);
}
 
#fortune-cards.is-shuffling .fortune-card-back:nth-child(1) {
    animation: shuffleLeft 0.9s ease-in-out infinite;
}
 
#fortune-cards.is-shuffling .fortune-card-back:nth-child(2) {
    animation: shuffleMiddle 0.9s ease-in-out infinite;
}
 
#fortune-cards.is-shuffling .fortune-card-back:nth-child(3) {
    animation: shuffleRight 0.9s ease-in-out infinite;
}
 
@keyframes shuffleLeft {
    0%, 20% { transform: translateX(0); }
    60%, 80% { transform: translateX(244px); }
    100% { transform: translateX(0); }
}
 
@keyframes shuffleMiddle {
    0%, 20% { transform: translateX(0); }
    60%, 80% { transform: translateX(-122px); }
    100% { transform: translateX(0); }
}
 
@keyframes shuffleRight {
    0%, 20% { transform: translateX(0); }
    60%, 80% { transform: translateX(-122px); }
    100% { transform: translateX(0); }
}

.fortune-card-image img {
    display: block;
 
    width: 112px;
    height: auto;
 
    border: 2px solid var(--color-accent);
    padding: 3px;
 
    background: white;
 
    box-sizing: border-box;
}
 
.fortune-card-image::after {
    content: "";
 
    position: absolute;
    inset: 5px;
 
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
 
    pointer-events: none;
}

.fortune-card-title {
    margin-top: 6px;
 
    font-size: 11px;
    color: var(--color-accent);
    font-weight: bold;
    letter-spacing: 0.5px;
 
    text-transform: lowercase;
}
 
.fortune-card.deal-left {
    animation-name: dealLeft;
    animation-delay: 0s;
}
 
.fortune-card.deal-middle {
    animation-name: dealMiddle;
    animation-delay: 0.3s;
}
 
.fortune-card.deal-right {
    animation-name: dealRight;
    animation-delay: 0.6s;
}

@keyframes dealLeft {
 
    0% {
        opacity: 0;
        transform: translateX(-100px) translateY(-30px) rotate(-12deg);
    }
 
    70% {
        opacity: 1;
        transform: translateX(8px) translateY(3px) rotate(2deg);
    }
 
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@keyframes dealMiddle {
 
    0% {
        opacity: 0;
        transform: translateY(-100px) rotate(8deg);
    }
 
    70% {
        opacity: 1;
        transform: translateY(5px) rotate(-2deg);
    }
 
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes dealRight {
 
    0% {
        opacity: 0;
        transform: translateX(100px) translateY(-30px) rotate(12deg);
    }
 
    70% {
        opacity: 1;
        transform: translateX(-8px) translateY(3px) rotate(-2deg);
    }
 
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

.site-button-box {
    text-align: center;
 
    min-height: 155px;
}
 
.site-button-box h4 {
    margin: 4px 0 8px;
    font-size: 1.15rem;
}
 
.site-button {
    width: 120px;
    height: auto;
 
    image-rendering: pixelated;
}
 
.site-button-box textarea {
    display: block;
 
    width: 100%;
    height: 60px;
 
    resize: none;
 
    margin-top: 8px;
 
    font-family: var(--font-body);
    font-size: 10px;
}

.piclog-box h2 {
    margin-bottom: 8px;
}
 
.piclog-box img {
    display: block;
 
    width: 100%;
    max-width: 400px;
    height: auto;
}
 
.piclog-box h2 img.ghead {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
}

.blog-box {
    min-height: 180px;
}
 
.blog-scroll {
    height: 120px;
 
    overflow-y: auto;
 
    padding-right: 8px;
}

.blinkies-box {
    min-height: 100px;
}
 
.blinkies-content {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
 
.blinkies-content img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.guestbook-box,
.links-box {
    min-height: 110px;
}
 
.updates-scroll::-webkit-scrollbar,
.blog-scroll::-webkit-scrollbar,
.webrings-scroll::-webkit-scrollbar {
    width: 8px;
}
 
.updates-scroll::-webkit-scrollbar-track,
.blog-scroll::-webkit-scrollbar-track,
.webrings-scroll::-webkit-scrollbar-track {
    background: var(--color-box);
}
 
.updates-scroll::-webkit-scrollbar-thumb,
.blog-scroll::-webkit-scrollbar-thumb,
.webrings-scroll::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 0;
}
 
.character {
    position: absolute;
 
    bottom: 5px;
    right: -50px;
 
    width: 270px;
    height: auto;
 
    pointer-events: none;
 
    z-index: 20;
}
 
footer {
    margin-top: 12px;
    padding: 10px 0;
 
    text-align: center;
 
    color: var(--color-accent);
    font-size: .8rem;
    font-family: var(--font-mono);
}
 
footer a {
    color: inherit;
    text-decoration: none;
}
 
footer a:hover {
    text-decoration: underline;
}
 
.typing-text {
    display: inline-block;
    min-width: 120px;
}
 
.typing-text::after {
    content: "";
 
    display: inline-block;
 
    width: 7px;
    height: 24px;
 
    margin-left: 3px;
    vertical-align: -2px;
 
    background: var(--color-accent);
 
    animation: typingCursor 0.8s steps(1) infinite;
}
 
@keyframes typingCursor {
 
    0%,
    50% {
        opacity: 1;
    }
 
    51%,
    100% {
        opacity: 0;
    }
}
 
.site-button-box h4 {
    margin: -12px -12px 10px;
    padding: 5px 7px;
 
    background: var(--color-border-transparent);
    border-bottom: 2px solid var(--color-border);
 
    color: var(--color-accent);
    font-family: var(--font-heading);
 
    text-align: left;
}
 
.piclog-box {
    overflow: hidden;
}
 
.social-box h3 {
    color: var(--color-accent);
}
 
.site-button-box textarea {
    font-family: var(--font-mono);
}
 
.about-box,
.welcome-box,
.music-box,
.fortune-box,
.site-button-box,
.piclog-box,
.updates-box,
.blog-box,
.blinkies-box,
.guestbook-box,
.links-box,
.social-box {
    background: var(--color-box-transparent);
}