/* Importing the custom fonts */
@font-face {
    font-family: 'Porkys';
    src: url('fonts/Porkys.ttf') format('truetype');
}

@font-face {
    font-family: 'Adelia';
    src: url('fonts/Adelia.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #fff5f7; /* Very light pink base */
}

/* Font Helper Classes */
.font-porkys {
    font-family: 'Porkys', sans-serif;
}

.font-adelia {
    font-family: 'Adelia', cursive;
}

/* Outer layout frame matching the proportions of the sketch */
.wireframe-container {
    width: 100%;
    max-width: 500px;
    border: 3px dotted #8B5A2B; /* Juminocore Brown */
    background-color: #ffd1dc; /* Cute Pastel Pink */
    display: flex;
    flex-direction: column;
}

/* Common box styling applying the dotted brown borders and pink tones */
.box-text, .box-image, .box-horizontal-stamps,
.box-blinkie-l, .box-nav, .box-stamps-up,
.box-dancing, .box-guestbook, .panel-scroll-bar,
.box-gif-r, .box-blinkie-r, .box-status, .box-calendar {
    border: 2px dotted #8B5A2B; /* Dotted brown borders */
    text-align: center;
    padding: 5px;
    color: #5c3a21; /* Dark brown text for contrast */
    background-color: #fff0f3; /* Inner boxes slightly lighter pink */
}

/* Header Sections Heights */
.box-text { height: 45px; }
.box-image { height: 180px; }
.box-horizontal-stamps { height: 35px; }

/* 4-Column Grid Layout Split */
.main-columns-wrapper {
    display: grid;
    grid-template-columns: 1.2fr 2.5fr 0.6fr 1.5fr;
    min-height: 550px;
}

/* Column Panel Stackers */
.panel-left, .panel-center, .panel-right {
    display: flex;
    flex-direction: column;
}

/* Left Panel Heights */
.box-blinkie-l { height: 35px; }
.box-nav { flex-grow: 1; }
.box-stamps-up { height: 100px; }

/* Center Panel Heights */
.box-dancing { height: 75px; }
.box-guestbook { flex-grow: 1; }

/* Scrolling Bar Panel Setup */
.panel-scroll-bar {
    display: flex;
    justify-content: center;
    align-items: center;
}
.panel-scroll-bar marquee {
    writing-mode: vertical-rl;
    height: 100%;
}

/* Right Panel Heights */
.box-gif-r { height: 50px; }
.box-blinkie-r { height: 35px; }
.box-status { flex-grow: 1; }
.box-calendar { height: 60px; }