/* Post-it Note Theme */
:root {
    /* --- CHANGE POST-IT COLOR HERE --- */
    --postit-bg-color: #fff7a0; /* Classic yellow post-it */
    /* Other examples: 
       --postit-bg-color: #a0eaff; /* Light blue */
       /*--postit-bg-color: #a0ffa4; /* Light green */
       /*--postit-bg-color: #ffa0a0; /* Light pink */
}

body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 40px; /* Give space around the note */
    display: flex;
    justify-content: center;
    align-items: center; /* Center the note vertically */
    min-height: 100vh;
    background-color: #e0e0e0; /* Neutral background (like a desk or wall) */
    box-sizing: border-box;
}

/* Container is now just for centering the textarea */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; /* Let the textarea define the size */
}

textarea {
    /* Core post-it appearance */
    background-color: var(--postit-bg-color);
    width: 350px;  /* Post-it width */
    height: 350px; /* Post-it height */
    padding: 25px; /* Inner padding */
    padding-top: 40px; /* More padding at top */
    border: none; /* No border */
    border-radius: 0px; /* Sharp corners */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* Drop shadow */
    
    /* Text styling */
    font-size: 1.1rem; /* Slightly larger text */
    color: #333;
    line-height: 1.6; 
    font-family: 'Inter', sans-serif; /* Clean font */

    /* Effects */
    transform: rotate(-2deg); /* Slight rotation */
    transition: transform 0.15s ease, box-shadow 0.15s ease; /* Smooth hover effect */
    resize: none; /* Disable resizing */
    box-sizing: border-box; 
}

textarea:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3); /* Larger shadow on focus */
    transform: rotate(0deg) scale(1.02); /* Straighten and slightly enlarge on focus */
    border: none; /* Ensure no border appears on focus */
}

/* Optional: Style scrollbar (Webkit) */
textarea::-webkit-scrollbar {
    width: 6px;
}
textarea::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
}
textarea::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
}
textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5);
}