/* COMIC BOOK / POP ART STYLE */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Comic Sans MS','Arial Rounded MT Bold',sans-serif;background:#ffe5ec;color:#2d1b2e;line-height:1.9;min-height:100vh;position:relative;overflow-x:hidden}
body::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle,#ff6b9d 1px,transparent 1px);background-size:30px 30px;opacity:0.1;pointer-events:none}

/* COMIC HEADER WITH BORDER */
header{background:linear-gradient(135deg,#ff6b9d,#c06c84);border:8px solid #2d1b2e;border-radius:0;padding:0;position:relative;margin:20px;box-shadow:10px 10px 0 #2d1b2e}
.header-inner{background:#fff;border:5px dashed #ff6b9d;padding:3rem 2rem;clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%)}

h1{font-size:clamp(2rem,5vw,3.8rem);color:#ff6b9d;text-align:center;font-weight:900;text-transform:uppercase;letter-spacing:2px;margin:0;text-shadow:4px 4px 0 #ffc2d4,-2px -2px 0 #2d1b2e}

/* COMIC PANEL CONTENT */
.content{max-width:950px;margin:2rem auto;padding:0 2rem}

.panel{background:#fff;border:6px solid #2d1b2e;padding:2.5rem;margin-bottom:2rem;position:relative;box-shadow:8px 8px 0 #ff6b9d}

h2{color:#c06c84;font-size:2.3rem;font-weight:900;margin:2.5rem 0 1.5rem;text-transform:uppercase;letter-spacing:1px;position:relative;padding-left:40px}
h2::before{content:'★';position:absolute;left:0;color:#ff6b9d;font-size:2rem;animation:spin 3s linear infinite}

h3{color:#ff6b9d;font-size:1.8rem;font-weight:900;margin:2rem 0 1rem;text-transform:uppercase}

p{margin-bottom:1.7rem;font-size:1.08rem;color:#2d1b2e;line-height:2;text-align:justify}

a{color:#c06c84;text-decoration:none;font-weight:900;border-bottom:4px solid #ff6b9d;padding-bottom:2px;transition:all 0.2s}
a:hover{color:#ff6b9d;border-color:#c06c84;transform:translateY(-2px)}

ul{margin:2rem 0;padding:0;list-style:none}
li{margin-bottom:1.5rem;padding:1.2rem;background:#fffbf0;border:4px solid #ffc2d4;border-radius:15px;position:relative;color:#2d1b2e;line-height:1.9;box-shadow:4px 4px 0 #ffc2d4}
li::before{content:'→';position:absolute;left:-30px;color:#ff6b9d;font-size:2rem;font-weight:900}

/* SPEECH BUBBLE TIP BOX */
.tip-box{background:#fff4d6;border:5px solid #2d1b2e;border-radius:25px;padding:2.5rem;margin:2.5rem 0;position:relative;box-shadow:6px 6px 0 #ff6b9d}
.tip-box::before{content:'';position:absolute;bottom:-30px;left:50px;width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:30px solid #2d1b2e}
.tip-box::after{content:'';position:absolute;bottom:-22px;left:53px;width:0;height:0;border-left:17px solid transparent;border-right:17px solid transparent;border-top:25px solid #fff4d6}
.tip-box p{color:#2d1b2e;font-weight:700}

/* COMIC FOOTER */
footer{background:#2d1b2e;color:#fff;padding:2.5rem;text-align:center;margin:2rem 20px 20px;border:8px solid #ff6b9d;box-shadow:10px 10px 0 #c06c84;font-weight:700}

@keyframes spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

@media(max-width:768px){
header{margin:15px;box-shadow:6px 6px 0 #2d1b2e}
.header-inner{padding:2rem 1.5rem}
h1{font-size:2rem}
.content{padding:0 1.5rem}
.panel{padding:2rem}
footer{margin:2rem 15px 15px}
}