.section{
    font-family: 'Comic Neue', cursive, sans-serif;
    background-size: 20px 20px;
    color: #333;
    line-height: 1.6;
}

.section-container {
    padding: 2rem;
    background-color: white;
    border: 4px solid #639f60;
    border-radius: 30px 5px 30px 5px;
    box-shadow: 15px 15px 0 rgba(255, 203, 119, 0.3);
    position: relative;
}

.section-container::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px dashed #ffcb77;
    border-radius: 35px 10px 35px 10px;
    z-index: -1;
    pointer-events: none;
}

/* Hand-Drawn Typography */
.section-container h1.center {
    font-family: 'Nanum Pen Script', cursive;
    font-size: 4rem;
    text-align: center;
    color: #ff6b6b;
    margin-bottom: 1.5rem;
    text-shadow: 3px 3px 0 #ffe66d;
    transform: rotate(-2deg);
    letter-spacing: 1px;
}

.section-container h2 {
    font-family: 'Nanum Pen Script', cursive;
    font-size: 2.5rem;
    color: #4ecdc4;
    margin-bottom: 1rem;
    border-bottom: 3px dotted #ff6b6b;
    display: inline-block;
    padding-bottom: 5px;
    transform: rotate(1deg);
}

.section-container h3 {
    font-family: 'Nanum Pen Script', cursive;
    font-size: 1.8rem;
    color: #ff9f1c;
    margin: 1.5rem 0 0.5rem;
    transform: rotate(-1deg);
}

/* Sketchy Elements */
.section-container hr {
    height: 3px;
    background: url('data:image/svg+xml;utf8,<svg width="100" height="10" xmlns="http://www.w3.org/2000/svg"><path d="M0,5 Q25,10 50,5 T100,5" stroke="%234ecdc4" fill="none" stroke-width="2"/></svg>') repeat-x;
    border: none;
    margin: 2rem 0;
}

.section {
    margin-bottom: 3rem;
    padding: 1.5rem;
    background-color: #fffff8;
    border: 2px solid #639f60;
    border-radius: 20px;
    box-shadow: 5px 5px 0 rgba(78, 205, 196, 0.2);
    position: relative;
}

.section::after {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px dashed #ff9f1c;
    border-radius: 25px;
    z-index: -1;
    pointer-events: none;
}

/* Playful List Styles */
.section ul, li {
    list-style-type: none;
    padding-left: 1.5rem;
}

.section li {
    position: relative;
    margin-bottom: 0.8rem;
    padding-left: 2rem;
}

.section li::before {
    content: "✏️";
    position: absolute;
    left: 0;
}

.section ul ul li::before {
    content: "🖍️";
}

.highlight {
    background-color: #ffef9f;
    padding: 0.2rem 0.4rem;
    border-radius: 5px;
    border-bottom: 2px solid #ff9f1c;
    font-weight: bold;
    display: inline-block;
    transform: rotate(0.5deg);
}

/* Floating Doodles */
.doodle {
    position: absolute;
    font-size: 2rem;
    opacity: 0.2;
    z-index: -1;
    animation: float 6s ease-in-out infinite;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .container {
        margin: 1rem;
        padding: 1rem;
    }
    
    h1.center {
        font-size: 2.8rem;
    }
    
    .section {
        padding: 1rem;
    }
    
    .doodle {
        display: none;
    }
}