* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;

    /* striped background */
    background: 
        135deg,
        #F3E3D0 0px,
        #F3E3D0 40px,
        #81A6C6 40px,
        #81A6C6 80px
    );

    color: black;
}
.about { background: #81A6C6; }
.gallery { background: #BAA8FF; }
.shrine { background: #FAACBF; }
.links { background: #9FB884; }
.blog { background: #FFC570; }
.main {
    max-width: 900px;
    margin: auto;
    padding: 40px 20px;

    display: flex;
    flex-direction: column;
    gap: 30px;
}
.box {
    background: #F3E3D0;
    border: 2px solid black;
    padding: 20px;
    margin-bottom: 25px;

    /* NEW */
    position: relative;
    box-shadow: 6px 6px 0 black;
    transform: rotate(-0.5deg);
}
.box:nth-child(2) {
    transform: rotate(1deg);
}

.box:nth-child(3) {
    transform: rotate(-1deg);
}


/* =========================
   STACK / OVERLAP SYSTEM
========================= */
.stack {
    display: flex;
    flex-direction: column;
}

.stack .box:not(:first-child) {
    margin-top: -15px; /* overlap effect */
}


/* =========================
   FLOATING PANEL OPTION
========================= */
.float-left {
    align-self: flex-start;
    width: 70%;
}

.float-right {
    align-self: flex-end;
    width: 70%;
}

.center {
    align-self: center;
    width: 80%;
}


/* =========================
   COMIC BORDER DETAIL
========================= */
.box::after {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed black;
    pointer-events: none;
    opacity: 0.5;
}


/* =========================
   HOVER DISTORTION (SUBTLE)
========================= */
.box:hover {
    transform: rotate(0deg) scale(1.02);
    transition: 0.2s;
}
.circle-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: black;
    color: white;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 'LemonMilk';
    cursor: pointer;

    transition: 0.2s;
}

/* =========================
   CHAOTIC MODE (OPTIONAL CLASS)
========================= */
.chaos .box {
    transform: rotate(-2deg);
}

.chaos .box:nth-child(2) {
    transform: rotate(3deg);
}

.chaos .box:nth-child(3) {
    transform: rotate(-3deg);
}