/* static/style.css */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400&display=swap'); /* Importing a handwritten font */

body {
    font-family: Arial, sans-serif; /* Basic font */
    margin: 0;
    padding: 0;
    background-color: white;
    color: #333;
}

header {
    text-align: left; /* Align logo to the left */
    padding: 20px;
    background-color: #ffffff; /* Changed from #E51EB9 to white */
    border-bottom: 2px solid rgba(0, 0, 0, 0.5); /* Changed from solid black to 50% opacity */
    margin-bottom: 30px; /* Added space after the line */
}

.logo {
    max-width: 800px;
    height: auto;
    margin-bottom: 20px;
}

h1, .section-title {
    font-family: 'Dancing Script', cursive; /* Handwritten calligraphy font */
    color: #E51EB9; /* Updated color for titles */
    font-size: 1.4em; /* Adjusted font size for titles */
    margin: 0; /* Remove default margin */
    padding: 10px; /* Padding for better appearance */
    border-radius: 5px; /* Slightly rounded corners */
}

.text-post, .photo-post {
    margin-bottom: 20px; /* Space between posts */
    padding: 15px; /* Padding for a cleaner look */
    border: 1px solid #ddd; /* Light gray border for posts */
    border-radius: 5px; /* Slightly rounded corners */
    background-color: #fff; /* White background for posts */
    font-family: 'Dancing Script', cursive; /* Handwritten font for post content */
    font-size: 1em; /* Font size for post content */
}

.container {
    display: flex; /* Flexbox for layout */
    padding-top: 20px; /* Space between header and content */
    background-color: #f9f9f9; /* Light gray background for the container */
    border: 1px solid #ddd; /* Light gray border for definition */
    border-radius: 5px; /* Slightly rounded corners */
}

.about {
    width: 30%; /* Sidebar width */
    padding: 20px;
    background-color: #fff; /* White background for sidebar */
    margin-right: 20px; /* Space between sidebar and main content */
    border: 1px solid #ddd; /* Light gray border for definition */
    border-radius: 5px; /* Slightly rounded corners */
}

.posts {
    width: 70%; /* Main content width */
}

a {
    color: #E51EB9; /* Updated color for links */
    text-decoration: none;
    font-weight: bold; /* Bold text for links */
}

a:hover {
    text-decoration: underline;
}

.logout-container, .login-container {
    margin-top: 20px; /* Space above the logout/login button */
}

.logout-button, .login-button {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #f2f2f2, #d9d9d9); /* Grey gradient */
    border: 1px solid #ccc;
    border-radius: 25px; /* Rounded corners */
    color: #666; /* Grey text */
    text-decoration: none;
    font-weight: normal;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
}

.logout-button:hover, .login-button:hover {
    background: linear-gradient(to bottom, #e6e6e6, #cccccc); /* Slightly darker on hover */
}

.title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    gap: 20px; /* Space between title bars */
}

.section-title {
    font-family: 'Dancing Script', cursive;
    background-color: #E51EB9;
    color: black;
    padding: 10px;
    margin: 0;
    border-radius: 5px;
    font-size: 1.4em;
    flex-grow: 1;
    text-align: center;
    width: 45%; /* Makes each title bar take up almost half the width */
}

.content-container {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-us-section, .diary-section {
    flex: 1;
    padding: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.logout-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #E51EB9;
    color: white;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}

.logout-button:hover {
    background-color: #d41a9e;
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 20px;
}

/* Additional styles for the input field */
input[type="password"] {
    border: 1px solid black; /* Set border color to black */
    padding: 10px; /* Padding for input */
    border-radius: 5px; /* Rounded corners */
    width: 300px; /* Set a fixed width for the input field */
    margin-bottom: 10px; /* Space below input */
    background-color: white; /* Set background color to white */
    color: black; /* Set text color to black for contrast */
}

/* Butterfly Container */
.butterfly-container {
    position: fixed;
    pointer-events: none; /* Makes butterflies non-interactive */
    z-index: 1000;
    width: 100%;
    height: 100%;
}

/* Individual Butterfly Styling */
.butterfly {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    width: 30px;  /* Changed from 60px */
    height: 30px; /* Changed from 60px */
}

/* Position and animate each butterfly differently */
.butterfly1 {
    top: 20%;
    left: 45%;
    animation: flutter1 4s infinite ease-in-out;
}

.butterfly2 {
    top: 25%;
    left: 55%;
    animation: flutter2 5s infinite ease-in-out;
}

.butterfly3 {
    top: 15%;
    left: 50%;
    animation: flutter3 6s infinite ease-in-out;
}

/* Hovering Animations */
@keyframes flutter1 {
    0%, 100% { transform: translate(0, 0) rotate(5deg); }
    25% { transform: translate(20px, -15px) rotate(-5deg); }
    50% { transform: translate(0, -25px) rotate(10deg); }
    75% { transform: translate(-20px, -15px) rotate(-10deg); }
}

@keyframes flutter2 {
    0%, 100% { transform: translate(0, 0) rotate(-5deg); }
    25% { transform: translate(-15px, -20px) rotate(5deg); }
    50% { transform: translate(-25px, 0) rotate(-10deg); }
    75% { transform: translate(-15px, 20px) rotate(10deg); }
}

@keyframes flutter3 {
    0%, 100% { transform: translate(0, 0) rotate(10deg); }
    25% { transform: translate(15px, 20px) rotate(-10deg); }
    50% { transform: translate(25px, 0) rotate(5deg); }
    75% { transform: translate(15px, -20px) rotate(-5deg); }
}

/* Fly Away Animation */
@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

.login-form {
    text-align: center;
    margin-top: 50px;
}

.login-text {
    font-family: 'Dancing Script', cursive;
    color: black;
    font-size: 1.4em;
    margin-bottom: 10px; /* Space between text and input */
}

input[type="password"] {
    border: 1px solid black;
    padding: 10px;
    border-radius: 5px;
    width: 300px;
    margin-bottom: 10px;
}

.login-button {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #f2f2f2, #d9d9d9);
    border: 1px solid #ccc;
    border-radius: 25px;
    color: #666;
    text-decoration: none;
    font-weight: normal;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.login-button:hover {
    background: linear-gradient(to bottom, #e6e6e6, #cccccc);
}

/* Stick Butterfly Base Styles */
.stick-butterfly {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    width: 60px;
    height: 60px;
}

/* Butterfly Body */
.stick-butterfly::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 20px;
    background: #000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Butterfly Wings */
.stick-butterfly::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid;
    border-radius: 50% 50% 0 50%;
    transform: rotate(45deg);
    left: calc(50% - 15px);
    top: calc(50% - 25px);
}

/* Specific Colors */
.pink-butterfly::after {
    border-color: #E51EB9; /* Your website's pink color */
}

.purple-butterfly::after {
    border-color: #800080; /* Rich purple */
}

.turquoise-butterfly::after {
    border-color: #40E0D0; /* Bright turquoise */
}

/* Flying Animation */
@keyframes fly {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -40px) rotate(10deg); }
    50% { transform: translate(60px, 0) rotate(-5deg); }
    75% { transform: translate(30px, 40px) rotate(10deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

/* Position and animate each butterfly */
.butterfly1 { 
    animation: fly 8s infinite; 
    top: 30%; 
    left: 20%; 
}

.butterfly2 { 
    animation: fly 10s infinite; 
    top: 40%; 
    left: 50%; 
}

.butterfly3 { 
    animation: fly 12s infinite; 
    top: 60%; 
    left: 30%; 
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

/* Your existing login styles */
.login-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 1000;
    text-align: center;
}

/* Your existing butterfly styles */
div {border:0px solid #FF0000;}

#butterfly_wrapper {
    width: 150px;
    height: 150px;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* Rest of your butterfly CSS remains the same */
.leftwings,.rightwings {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

/* ... rest of your butterfly CSS ... */

/* Add fly away animation */
@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

/* Logo styling */
header {
    text-align: left;
    padding: 20px;
}

.logo {
    max-width: 800px;
    height: auto;
}

/* Login form styling */
.login-form {
    text-align: left;
    margin-top: 50px;
}

.login-text {
    font-family: Arial, sans-serif;
    color: white;
    font-size: 1.4em;
    margin-bottom: 10px; /* Space between text and input */
}

input[type="password"] {
    border: 1px solid black;
    padding: 10px;
    border-radius: 5px;
    width: 300px;
    margin-bottom: 10px;
}

/* Button styling */
.login-button {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #f2f2f2, #d9d9d9);
    border: 1px solid #ccc;
    border-radius: 25px;
    color: #666;
    text-decoration: none;
    font-weight: normal;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.login-button:hover {
    background: linear-gradient(to bottom, #e6e6e6, #cccccc);
}

/* First page specific */
.first-page .login-button {
    margin-left: 20px;
}

/* Butterfly styling */
.butterfly {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    width: 40px;
    height: 40px;
}

.butterfly-body {
    position: absolute;
    width: 2px;
    height: 15px;
    background: #333;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.wing {
    position: absolute;
    width: 20px;
    height: 25px;
    border-radius: 60% 70% 60% 60%;
    background: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    transform-origin: 0% 50%;
}

/* Butterfly colors */
.pink .wing {
    background-color: #E51EB9;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5);
}

.purple .wing {
    background-color: #800080;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5);
}

.turquoise .wing {
    background-color: #40E0D0;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5);
}

/* Wing positions */
.left-top { transform: rotate(-20deg) skewY(20deg); }
.left-bottom { transform: rotate(-160deg) skewY(-20deg); }
.right-top { transform: rotate(20deg) skewY(-20deg) scaleX(-1); }
.right-bottom { transform: rotate(160deg) skewY(20deg) scaleX(-1); }

/* Butterfly animations */
@keyframes moveButterfly1 {
    0% { transform: translate(0, 0); }
    25% { transform: translate(200px, -100px); }
    50% { transform: translate(400px, 50px); }
    75% { transform: translate(200px, 150px); }
    100% { transform: translate(0, 0); }
}

@keyframes moveButterfly2 {
    0% { transform: translate(100px, 50px); }
    33% { transform: translate(300px, -80px); }
    66% { transform: translate(500px, 100px); }
    100% { transform: translate(100px, 50px); }
}

@keyframes moveButterfly3 {
    0% { transform: translate(50px, -50px); }
    50% { transform: translate(350px, 100px); }
    100% { transform: translate(50px, -50px); }
}

@keyframes flutter {
    0% { transform: rotateY(-45deg); }
    50% { transform: rotateY(45deg); }
    100% { transform: rotateY(-45deg); }
}

.butterfly:nth-child(1) {
    animation: moveButterfly1 15s infinite ease-in-out;
}

.butterfly:nth-child(2) {
    animation: moveButterfly2 18s infinite ease-in-out;
}

.butterfly:nth-child(3) {
    animation: moveButterfly3 20s infinite ease-in-out;
}

.wings {
    position: relative;
    animation: flutter 0.15s infinite ease-in-out;
}

@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

/* Add this to your existing CSS - Butterfly styles */
.butterfly {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.butterfly-body {
    position: absolute;
    width: 2px;
    height: 20px;
    background: #333;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.wing {
    position: absolute;
    width: 30px;
    height: 40px;
    border-radius: 60% 70% 60% 60%;
    background: linear-gradient(45deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    transform-origin: 0% 50%;
}

/* Butterfly colors */
.pink .wing {
    background-color: #E51EB9;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5);
}

.purple .wing {
    background-color: #800080;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5);
}

.turquoise .wing {
    background-color: #40E0D0;
    box-shadow: inset 0 0 15px rgba(255,255,255,0.5);
}

/* Wing positions */
.left-top { transform: rotate(-20deg) skewY(20deg); }
.left-bottom { transform: rotate(-160deg) skewY(-20deg); }
.right-top { transform: rotate(20deg) skewY(-20deg) scaleX(-1); }
.right-bottom { transform: rotate(160deg) skewY(20deg) scaleX(-1); }

/* Flutter animation */
@keyframes flutter {
    0%, 100% { transform: rotate(8deg); }
    50% { transform: rotate(-8deg); }
}

.wings {
    position: relative;
    animation: flutter 0.3s ease-in-out infinite;
}

/* Flying paths */
@keyframes fly1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(100px, -50px) rotate(10deg); }
    50% { transform: translate(200px, 0) rotate(-5deg); }
    75% { transform: translate(100px, 50px) rotate(10deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes fly2 {
    0% { transform: translate(50px, 50px) rotate(5deg); }
    33% { transform: translate(150px, -30px) rotate(-10deg); }
    66% { transform: translate(250px, 30px) rotate(15deg); }
    100% { transform: translate(50px, 50px) rotate(5deg); }
}

@keyframes fly3 {
    0% { transform: translate(100px, -30px) rotate(-5deg); }
    50% { transform: translate(200px, 40px) rotate(10deg); }
    100% { transform: translate(100px, -30px) rotate(-5deg); }
}

/* Fly away animation */
@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

/* Diary page styling */
.diary-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.title-bars {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.title-bar {
    flex: 1;
    margin: 0 10px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-bar h2 {
    margin: 0;
    font-family: 'Dancing Script', cursive;
}

.add-button {
    background: #f0f0f0;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 18px;
}

.add-button:hover {
    background: #e6e6e6;
}

.entry-form {
    margin: 20px 0;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}

.entry-form textarea {
    width: 100%;
    min-height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.entry-form button {
    padding: 8px 15px;
    margin-right: 10px;
    background: #f0f0f0;
    border: 1px solid #999;
    border-radius: 3px;
    cursor: pointer;
}

.entries-container {
    display: flex;
    justify-content: space-between;
}

.thoughts-entries,
.secrets-entries {
    flex: 1;
    margin: 0 10px;
}

.entry {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.entry .date {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
}

/* Logout button */
.logout-button {
    float: right;
    margin-top: 10px;
    padding: 8px 15px;
    background: #f0f0f0;
    color: #000000;
    border: 1px solid #999;
    border-radius: 3px;
    text-decoration: none;
}

.logout-button:hover {
    background: #e6e6e6;
}

/* Welcome title bar styling */
.welcome-title {
    font-family: 'Dancing Script', cursive;
    background-color: #E51EB9;
    color: black;
    padding: 10px;
    margin: 20px 0;
    border-radius: 5px;
    font-size: 1.4em;
    text-align: center;
    width: 100%; /* Make it span the full width */
}

/* Add these styles to your existing CSS */

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.title-bars {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.title-bar {
    flex: 1;
    background-color: #E51EB9;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
}

.title-bar h2 {
    color: white;
    margin: 0;
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
}

.content-sections {
    display: flex;
    gap: 20px;
    position: relative; /* Add this to position the divider */
}

.about-section, .diary-section {
    flex: 1;
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
}

.member-list {
    list-style-type: none;
    padding-left: 20px;
}

.member-list li {
    margin: 10px 0;
    color: #333;
}

.text-post, .photo-post {
    margin-bottom: 30px;
}

.text-post h3, .photo-post h3 {
    font-family: 'Dancing Script', cursive;
    color: #333;
    margin-bottom: 15px;
}

.diary-entry {
    padding: 15px;
    background: #f9f9f9;
    border-radius: 5px;
}

.signature {
    font-style: italic;
    margin-top: 10px;
}

.post-image {
    max-width: 100%;
    border-radius: 5px;
}

.logout-button {
    display: inline-block;
    background-color: #E51EB9;
    color: white;
    padding: 10px 30px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}

.logout-button:hover {
    background-color: #d41a9e;
}

/* Ensure images are properly sized */
.about-image {
    max-width: 100%;
    margin-bottom: 20px;
}

.error-message {
    color: red;
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* Update or add these styles for the front page */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #ffffff;
}

header {
    text-align: left;
    padding: 20px;
    background-color: #ffffff;
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 20px;
}

.welcome-section {
    margin-top: 20px;
}

.welcome-bar {
    background-color: #E51EB9; /* Changed from #FFB6C1 to match main page title bars */
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.welcome-bar h1 {
    font-family: 'Dancing Script', cursive;
    color: black; /* Changed from white to black */
    margin: 0;
    font-size: 24px;
}

.welcome-text {
    color: #666;
    margin-bottom: 20px;
    font-size: 16px;
}

.login-button {
    display: inline-block;
    padding: 8px 25px;
    background-color: #E51EB9; /* Updated to match */
    color: white; /* Changed from white to black */
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    border: none;
}

.login-button:hover {
    background-color: #d41a9e; /* Slightly darker on hover */
    color: black; /* Ensure text stays black on hover */
}

/* Update title bar text colors */
.title-bar h2 {
    font-family: Arial, sans-serif;
    color: white; /* Changed from white to black */
    margin: 0;
    font-size: 24px;
}

/* Update logout button to match login button style */
.logout-button {
    display: inline-block;
    padding: 8px 25px;
    background-color: #E51EB9;
    color: black; /* Changed to black to match login button */
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    border: none;
    position: fixed; /* Keep it fixed at bottom right */
    bottom: 20px;
    right: 20px;
}

.logout-button:hover {
    background-color: #d41a9e;
    color: black; /* Ensure text stays black on hover */
}

/* Butterfly Base Styles */
.butterfly {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    width: 60px;
    height: 60px;
}

/* Butterfly Wings Structure */
.wings {
    position: relative;
    width: 100%;
    height: 100%;
}

.butterfly-body {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
}

.wing {
    position: absolute;
    width: 25px;
    height: 35px;
    border-radius: 50% 50% 50% 50%;
    opacity: 0.8;
}

/* Wing Positions */
.left-top {
    left: 5px;
    top: 5px;
    transform-origin: bottom right;
    animation: flutterLeftTop 0.15s infinite ease-in-out;
}

.left-bottom {
    left: 5px;
    bottom: 5px;
    transform-origin: top right;
    animation: flutterLeftBottom 0.15s infinite ease-in-out;
}

.right-top {
    right: 5px;
    top: 5px;
    transform-origin: bottom left;
    animation: flutterRightTop 0.15s infinite ease-in-out;
}

.right-bottom {
    right: 5px;
    bottom: 5px;
    transform-origin: top left;
    animation: flutterRightBottom 0.15s infinite ease-in-out;
}

/* Watercolor Effect Colors */
.pink .wing {
    background: linear-gradient(45deg, #ff69b4, #ffb6c1);
    box-shadow: 0 0 15px rgba(255,105,180,0.3);
}

.purple .wing {
    background: linear-gradient(45deg, #9370db, #d8bfd8);
    box-shadow: 0 0 15px rgba(147,112,219,0.3);
}

.turquoise .wing {
    background: linear-gradient(45deg, #40e0d0, #afeeee);
    box-shadow: 0 0 15px rgba(64,224,208,0.3);
}

/* Wing Flutter Animations */
@keyframes flutterLeftTop {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(-30deg); }
}

@keyframes flutterLeftBottom {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(30deg); }
}

@keyframes flutterRightTop {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(30deg); }
}

@keyframes flutterRightBottom {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(-30deg); }
}

/* Fly Away Animation */
@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

/* Add vertical divider */
.content-sections::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Position in the middle */
    width: 2px; /* Same thickness as top divider */
    background-color: rgba(0, 0, 0, 0.5); /* Same color and opacity as top divider */
    transform: translateX(-50%); /* Center the line */
}

/* Add/update these styles */
.logo-bar {
    background-color: #E51EB9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: left;
}

.logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 5px;
}

/* Update the existing header styles */
header {
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 30px;
}

/* Add/update these styles for the first page */
.first-page {
    background-color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.first-page-content {
    width: 100%;
    max-width: 1200px;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

/* Logo styling */
.first-page .logo {
    max-width: 800px;
    height: auto;
    margin-bottom: 100px; /* Add more space between logo and login */
}

/* Login section */
.login-section {
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
}

.login-title {
    color: #E51EB9;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: normal;
    font-family: Arial, sans-serif;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.login-form-inline {
    display: flex;
    gap: 10px;
    align-items: left;
}

.login-form-inline input[type="password"] {
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 2px;
    width: 150px;
    font-size: 14px;
}

.first-page .login-button {
    background-color: #E51EB9;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
}

/* Error message */
.error-message {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}

/* First page styles */
.first-page {
    background-color: white;
    min-height: 100vh;
    padding: 40px;
}

/* Logo styling */
.logo {
    max-width: 800px;
    height: auto;
    margin-bottom: 40px;
}

/* Login section */
.login-section {
    margin-top: 20px;
    margin-left: 40px; /* Add left margin to match image */
}

.login-title {
    color: #FF69B4;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    text-align: left; /* Ensure left alignment */
}

.login-container {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start; /* Align to left */
}

.login-form-inline {
    display: flex;
    gap: 10px;
    align-items: left;
    justify-content: flex-start; /* Align to left */
}

.login-form-inline input[type="password"] {
    border: 1px solid #ddd;
    padding: 5px 10px;
    width: 150px;
    font-size: 14px;
}

.login-button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}

/* Error message */
.error-message {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: left; /* Ensure left alignment */
}

.login-page {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align everything to the left */
    max-width: 300px; /* Limit width to keep content on the left */
}

/* Logo styling */
.logo-container {
    text-align: left;
}

.logo {
    max-width: 800px;
    height: auto;
}

/* Login section */
.login-section {
    margin-top: 40px;
    text-align: left;
}

.login-section h1 {
    color: #FF69B4;
    font-size: 24px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    margin: 0 0 15px 0;
}

.login-form {
    display: flex;
    gap: 10px;
    align-items: left;
}

.login-form input[type="password"] {
    border: 1px solid #ddd;
    padding: 5px 10px;
    width: 150px;
    font-size: 14px;
}

.login-form button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

/* Diary page layout */
.diary-page {
    background-color: #80E9E1;  /* Changed from white to #80E9E1 */
    min-height: 100vh;
    padding: 20px;
}

/* Logo styling */
.logo {
    max-width: 800px;
    height: auto;
    margin-bottom: 40px;
}

/* Content container */
.content-container {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Column styling */
.left-column, .right-column {
    flex: 1;
}

/* Section headers */
.section-header {
    background-color: #E51EB9;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.section-header h2 {
    color: white;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 24px;
}

/* Section content */
.section-content {
    background-color: white;  /* Explicitly maintain white background for content sections */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* About Us section */
.about-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.member {
    color: #666;
    margin: 10px 0;
    font-size: 16px;
}

/* Diary entries */
.diary-entry h3 {
    color: #333;
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    margin-bottom: 15px;
}

.text-post {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}

.post-content {
    color: #666;
    line-height: 1.6;
}

.signature {
    font-style: italic;
    margin-top: 10px;
}

.photo-post img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Logout button */
.logout-button {
    display: inline-block;
    background-color: #E51EB9;
    color: white;
    padding: 10px 30px;
    border-radius: 5px;
    text-decoration: none;
    margin-top: 20px;
}

.logout-button:hover {
    background-color: #d41a9e;
}

/* Ensure images are properly sized */
.about-image {
    max-width: 100%;
    margin-bottom: 20px;
}

.error-message {
    color: red;
    margin-bottom: 10px;
    font-size: 0.9em;
}

/* Update or add these styles for the front page */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #ffffff;
}

header {
    text-align: left;
    padding: 20px;
    background-color: #ffffff;
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 20px;
}

.welcome-section {
    margin-top: 20px;
}

.welcome-bar {
    background-color: #E51EB9; /* Changed from #FFB6C1 to match main page title bars */
    padding: 10px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.welcome-bar h1 {
    font-family: 'Dancing Script', cursive;
    color: black; /* Changed from white to black */
    margin: 0;
    font-size: 24px;
}

.welcome-text {
    color: #666;
    margin-bottom: 20px;
    font-size: 16px;
}

.login-button {
    display: inline-block;
    padding: 8px 25px;
    background-color: #E51EB9; /* Updated to match */
    color: white; /* Changed from white to black */
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    border: none;
}

.login-button:hover {
    background-color: #d41a9e; /* Slightly darker on hover */
    color: black; /* Ensure text stays black on hover */
}

/* Update title bar text colors */
.title-bar h2 {
    font-family: Arial, sans-serif;
    color: white; /* Changed from white to black */
    margin: 0;
    font-size: 24px;
}

/* Update logout button to match login button style */
.logout-button {
    display: inline-block;
    padding: 8px 25px;
    background-color: #E51EB9;
    color: black; /* Changed to black to match login button */
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    border: none;
    position: fixed; /* Keep it fixed at bottom right */
    bottom: 20px;
    right: 20px;
}

.logout-button:hover {
    background-color: #d41a9e;
    color: black; /* Ensure text stays black on hover */
}

/* Butterfly Base Styles */
.butterfly {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    width: 60px;
    height: 60px;
}

/* Butterfly Wings Structure */
.wings {
    position: relative;
    width: 100%;
    height: 100%;
}

.butterfly-body {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    transform: translate(-50%, -50%);
}

.wing {
    position: absolute;
    width: 25px;
    height: 35px;
    border-radius: 50% 50% 50% 50%;
    opacity: 0.8;
}

/* Wing Positions */
.left-top {
    left: 5px;
    top: 5px;
    transform-origin: bottom right;
    animation: flutterLeftTop 0.15s infinite ease-in-out;
}

.left-bottom {
    left: 5px;
    bottom: 5px;
    transform-origin: top right;
    animation: flutterLeftBottom 0.15s infinite ease-in-out;
}

.right-top {
    right: 5px;
    top: 5px;
    transform-origin: bottom left;
    animation: flutterRightTop 0.15s infinite ease-in-out;
}

.right-bottom {
    right: 5px;
    bottom: 5px;
    transform-origin: top left;
    animation: flutterRightBottom 0.15s infinite ease-in-out;
}

/* Watercolor Effect Colors */
.pink .wing {
    background: linear-gradient(45deg, #ff69b4, #ffb6c1);
    box-shadow: 0 0 15px rgba(255,105,180,0.3);
}

.purple .wing {
    background: linear-gradient(45deg, #9370db, #d8bfd8);
    box-shadow: 0 0 15px rgba(147,112,219,0.3);
}

.turquoise .wing {
    background: linear-gradient(45deg, #40e0d0, #afeeee);
    box-shadow: 0 0 15px rgba(64,224,208,0.3);
}

/* Wing Flutter Animations */
@keyframes flutterLeftTop {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(-30deg); }
}

@keyframes flutterLeftBottom {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(30deg); }
}

@keyframes flutterRightTop {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(30deg); }
}

@keyframes flutterRightBottom {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(-30deg); }
}

/* Fly Away Animation */
@keyframes flyAway {
    to {
        transform: translate(100vw, -100vh) rotate(45deg);
        opacity: 0;
    }
}

.fly-away {
    animation: flyAway 2s forwards !important;
}

/* Add vertical divider */
.content-sections::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* Position in the middle */
    width: 2px; /* Same thickness as top divider */
    background-color: rgba(0, 0, 0, 0.5); /* Same color and opacity as top divider */
    transform: translateX(-50%); /* Center the line */
}

/* Add/update these styles */
.logo-bar {
    background-color: #E51EB9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: left;
}

.logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 5px;
}

/* Update the existing header styles */
header {
    padding: 20px;
    background-color: #ffffff;
    margin-bottom: 30px;
}

/* Add/update these styles for the first page */
.first-page {
    background-color: white;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.first-page-content {
    width: 100%;
    max-width: 1200px;
    padding: 40px;
    display: flex;
    flex-direction: column;
}

/* Logo styling */
.first-page .logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 100px; /* Add more space between logo and login */
}

/* Login section */
.login-section {
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
}

.login-title {
    color: #E51EB9;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: normal;
    font-family: Arial, sans-serif;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: left;
}

.login-form-inline {
    display: flex;
    gap: 10px;
    align-items: left;
}

.login-form-inline input[type="password"] {
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 2px;
    width: 150px;
    font-size: 14px;
}

.first-page .login-button {
    background-color: #E51EB9;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
}

/* Error message */
.error-message {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: center;
}

/* First page styles */
.first-page {
    background-color: white;
    min-height: 100vh;
    padding: 40px;
}

/* Logo styling */
.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 40px;
}

/* Login section */
.login-section {
    margin-top: 20px;
    margin-left: 40px; /* Add left margin to match image */
}

.login-title {
    color: #FF69B4;
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    text-align: left; /* Ensure left alignment */
}

.login-container {
    margin-top: 10px;
    display: flex;
    justify-content: flex-start; /* Align to left */
}

.login-form-inline {
    display: flex;
    gap: 10px;
    align-items: left;
    justify-content: flex-start; /* Align to left */
}

.login-form-inline input[type="password"] {
    border: 1px solid #ddd;
    padding: 5px 10px;
    width: 150px;
    font-size: 14px;
}

.login-button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}

/* Error message */
.error-message {
    color: red;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: left; /* Ensure left alignment */
}

.login-page {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align everything to the left */
    max-width: 300px; /* Limit width to keep content on the left */
}

/* Logo styling */
.logo-container {
    text-align: left;
}

.logo {
    max-width: 150px;
    height: auto;
}

/* Login section */
.login-section {
    margin-top: 40px;
    text-align: left;
}

.login-section h1 {
    color: #FF69B4;
    font-size: 24px;
    font-weight: normal;
    font-family: Arial, sans-serif;
    margin: 0 0 15px 0;
}

.login-form {
    display: flex;
    gap: 10px;
    align-items: left;
}

.login-form input[type="password"] {
    border: 1px solid #ddd;
    padding: 5px 10px;
    width: 150px;
    font-size: 14px;
}

.login-form button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}

.error-message {
    color: red;
    font-size: 14px;
    margin-top: 10px;
}

/* Diary page layout */
.diary-page {
    background-color: #80E9E1;  /* Changed from white to #80E9E1 */
    min-height: 100vh;
    padding: 20px;
}

/* Logo styling */
.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 40px;
}

/* Content container */
.content-container {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Column styling */
.left-column, .right-column {
    flex: 1;
}

/* Section headers */
.section-header {
    background-color: #E51EB9;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.section-header h2 {
    color: white;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 24px;
}

/* Section content */
.section-content {
    background-color: white;  /* Explicitly maintain white background for content sections */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* About Us section */
.about-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.member {
    color: #666;
    margin: 10px 0;
    font-size: 16px;
}

/* Diary entries */
.diary-entry h3 {
    color: #333;
    font-family: 'Dancing Script', cursive;
    font-size: 20px;
    margin-bottom: 15px;
}

.text-post {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
}

.post-content {
    color: #666;
    line-height: 1.6;
}

.signature {
    font-style: italic;
    margin-top: 10px;
}

.photo-post img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Logout button */
.logout-button {
    display: inline-block;
    background-color: #E51EB9;
    color: white;
    padding: 8px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
}

.logout-button:hover {
    background-color: #d41a9e;
}

/* Divider styling */
.divider {
    width: 1px;
    background-color: black;
    height: auto; /* Adjusts to the height of the container */
}

.about-photo {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
    border-radius: 5px;
}

.section-content.about-us {
    padding: 20px;
}

/* About Us section styling */
.about-us-title {
    color: #333;
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 20px;
}

/* Login page styles */
.login-page {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Align everything to the left */
}

.logo-container-login {
    margin-bottom: 20px; /* Space between logo and login section */
}

.logo-container-login .logo {
    max-width: 200px;  /* Match the new bigger logo size */
    height: auto;
}

.login-container {
    margin-left: 40px; /* Indent login section from left edge */
}

.login-title-main {
    color: #E51EB9;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: left;
    font-family: Arial, sans-serif; /* Changed to Arial */
}

.input-button-group {
    display: flex;
    align-items: left;
    gap: 10px; /* Space between input and button */
}

/* Keep existing form styles */
.login-form-main input[type="password"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-form-main button {
    background-color: #E51EB9;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Updated login page styles */
.login-page {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: left;
}

.logo-container-login {
    margin-bottom: 20px; /* Reduced from 40px to 20px to move login section closer to logo */
}

.logo-container-login .logo {
    max-width: 150px;
    height: auto;
}

.login-container {
    margin-left: 40px;
}

/* Rest of your existing login styles remain the same */

.logo-container-login {
    margin-bottom: 5px;
}

.login-container {
    margin-left: 0; /* Remove left margin to move to far left */
    padding-left: 20px; /* Small padding for visual comfort */
}

.about-us-content-title {
    font-family: 'Dancing Script', cursive;
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 20px;
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.member-thumbnail {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 5px;  /* Changed from 50% to 5px for slight rounding */
    overflow: hidden;
    background-color: #f5f5f5;
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures image covers the entire space */
}

.member-name {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: white;  /* Keep text white for visibility on purple background */
}

/* Update login form styling */
.login-form {
    text-align: left;  /* Change from center to left */
    margin-top: 10px;  /* Reduced from 50px */
    margin-left: 20px; /* Add left margin */
}

.login-text {
    font-family: Arial, sans-serif;
    color: #E51EB9;    /* Pink color */
    font-size: 1.4em;
    margin-bottom: 10px;
    text-align: left;  /* Ensure left alignment */
}

.login-input-group {
    display: flex;
    gap: 10px;
    align-items: left;
    justify-content: flex-start; /* Align to left */
}

/* Update header for login page */
header {
    text-align: left;
    padding: 20px 0 0 20px; /* Reduced bottom padding, added left padding */
    margin-bottom: 5px; /* Minimal space between logo and login form */
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px; /* Reduced space after logo */
}

.login-form {
    text-align: left;
    margin-left: 20px; /* Match logo's left padding */
    margin-top: 0; /* Remove top margin to move closer to logo */
}

.login-text {
    color: #E51EB9;
    font-size: 24px;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
}

.login-input-group {
    display: flex;
    gap: 10px;
    align-items: left;
}

/* Remove any centering styles */
body {
    display: block; /* Override any flex or grid display */
}

/* Add these styles for post visibility */
.post-content {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.post-title {
    color: #E51EB9;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.post-text {
    font-family: Arial, sans-serif;  /* Changed from Dancing Script to Arial */
    font-size: 14px;  /* Adjusted size for better readability */
    line-height: 1.6;  /* Added line height for better spacing */
    color: #333;
    margin-bottom: 15px;
}

.post-footer {
    color: #666;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.photo-container img {
    width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 5px;
    object-fit: cover; /* Changed from contain to cover */
    max-height: none; /* Remove any height restrictions */
}

.photo-post.scrollable-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

.photo-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.photo-container img.post-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: 5px;
    object-fit: contain;
}

.post-title {
    color: #E51EB9;
    font-size: 1.2em;
    margin-bottom: 10px;
}

/* Custom scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #E51EB9;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #d41a9e;
}

/* Scrollable content styling */
.scrollable-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Custom scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #E51EB9;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #d41a9e;
}

/* Update diary entry sections */
.diary-entry {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Update post containers */
.text-post, .photo-post {
    border: none;
    background: transparent;
}

/* Ensure proper spacing */
.post-title {
    color: #E51EB9;
    margin-bottom: 10px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.2em;
}

.post-footer {
    margin-top: 10px;
    color: #666;
    font-size: 0.9em;
}

/* Specific scrollable content styling for text posts */
.text-post.scrollable-content {
    max-height: 300px;  /* Shorter height for text posts only */
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Keep original height for photo posts */
.photo-post.scrollable-content {
    max-height: 500px;  /* Keep original height for photo posts */
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Shared scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #E51EB9;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #d41a9e;
}

/* Logo bar styling */
.logo-bar {
    background-color: #E51EB9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: left;
}

/* Horizontal divider styling */
.horizontal-divider {
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);  /* Black line with 50% opacity */
    margin-bottom: 30px;  /* Space between divider and content */
    width: 100%;
}

/* Update section titles to Arial with bold font weight */
.about-us-content-title,
.diary-entry h3 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #333;
    margin: 0;
    padding: 10px 15px;
    background: none;  /* Remove pink background */
    font-weight: bold;  /* Set font weight back to bold */
}

/* Keep the main section headers (About Us and SecretPapillon Diary) in Dancing Script */
.section-header h2 {
    font-family: 'Dancing Script', cursive;
    color: white;
    margin: 0;
    padding: 10px;
}

/* Update login page layout */
.login-page {
    display: flex;
    flex-direction: column;
    padding: 40px;  /* Increased padding */
}

.logo-container-login {
    width: 100%;  /* Full width container */
    text-align: left;
    margin-bottom: 50px;  /* Increased space to prevent overlap */
}

.logo-container-login .logo {
    width: 300px;       /* Set specific width for logo */
    height: auto;
    display: block;
    object-fit: contain; /* Ensure logo maintains aspect ratio */
}

/* Position login container with more space */
.login-container {
    width: 100%;
    margin-top: 20px;    /* Additional top margin */
    padding-top: 20px;   /* Additional top padding */
}

.login-title-main {
    font-family: Arial, sans-serif;
    color: #E51EB9;
    font-size: 32px;
    margin-bottom: 20px;
    margin-left: 40px;   /* Match the input field alignment */
}

.input-button-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 40px;   /* Match the title alignment */
}

/* Form element styles */
.login-form-main input[type="password"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-form-main button {
    background-color: #E51EB9;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Updated login page styles */
.login-page {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: left;
}

.logo-container-login {
    margin-bottom: 20px; /* Reduced from 40px to 20px to move login section closer to logo */
}

.logo-container-login .logo {
    max-width: 150px;
    height: auto;
}

.login-container {
    margin-left: 40px;
}

/* Rest of your existing login styles remain the same */

.logo-container-login {
    margin-bottom: 5px;
}

.login-container {
    margin-left: 0; /* Remove left margin to move to far left */
    padding-left: 20px; /* Small padding for visual comfort */
}

.about-us-content-title {
    font-family: 'Dancing Script', cursive;
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 20px;
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.member-thumbnail {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 5px;  /* Changed from 50% to 5px for slight rounding */
    overflow: hidden;
    background-color: #f5f5f5;
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures image covers the entire space */
}

.member-name {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: white;  /* Keep text white for visibility on purple background */
}

/* Update login form styling */
.login-form {
    text-align: left;  /* Change from center to left */
    margin-top: 10px;  /* Reduced from 50px */
    margin-left: 20px; /* Add left margin */
}

.login-text {
    font-family: Arial, sans-serif;
    color: #E51EB9;    /* Pink color */
    font-size: 1.4em;
    margin-bottom: 10px;
    text-align: left;  /* Ensure left alignment */
}

.login-input-group {
    display: flex;
    gap: 10px;
    align-items: left;
    justify-content: flex-start; /* Align to left */
}

/* Update header for login page */
header {
    text-align: left;
    padding: 20px 0 0 20px; /* Reduced bottom padding, added left padding */
    margin-bottom: 5px; /* Minimal space between logo and login form */
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px; /* Reduced space after logo */
}

.login-form {
    text-align: left;
    margin-left: 20px; /* Match logo's left padding */
    margin-top: 0; /* Remove top margin to move closer to logo */
}

.login-text {
    color: #E51EB9;
    font-size: 24px;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
}

.login-input-group {
    display: flex;
    gap: 10px;
    align-items: left;
}

/* Remove any centering styles */
body {
    display: block; /* Override any flex or grid display */
}

/* Add these styles for post visibility */
.post-content {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.post-title {
    color: #E51EB9;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.post-text {
    font-family: Arial, sans-serif;  /* Changed from Dancing Script to Arial */
    font-size: 14px;  /* Adjusted size for better readability */
    line-height: 1.6;  /* Added line height for better spacing */
    color: #333;
    margin-bottom: 15px;
}

.post-footer {
    color: #666;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.photo-container img {
    width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 5px;
    object-fit: cover; /* Changed from contain to cover */
    max-height: none; /* Remove any height restrictions */
}

.photo-post.scrollable-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

.photo-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.photo-container img.post-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 10px 0;
    border-radius: 5px;
    object-fit: contain;
}

.post-title {
    color: #E51EB9;
    font-size: 1.2em;
    margin-bottom: 10px;
}

/* Custom scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #E51EB9;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #d41a9e;
}

/* Scrollable content styling */
.scrollable-content {
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Custom scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #E51EB9;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #d41a9e;
}

/* Update diary entry sections */
.diary-entry {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Update post containers */
.text-post, .photo-post {
    border: none;
    background: transparent;
}

/* Ensure proper spacing */
.post-title {
    color: #E51EB9;
    margin-bottom: 10px;
    font-family: 'Dancing Script', cursive;
    font-size: 1.2em;
}

.post-footer {
    margin-top: 10px;
    color: #666;
    font-size: 0.9em;
}

/* Specific scrollable content styling for text posts */
.text-post.scrollable-content {
    max-height: 300px;  /* Shorter height for text posts only */
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Keep original height for photo posts */
.photo-post.scrollable-content {
    max-height: 500px;  /* Keep original height for photo posts */
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Shared scrollbar styling */
.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #E51EB9;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #d41a9e;
}

/* Logo bar styling */
.logo-bar {
    background-color: #E51EB9;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: left;
}

/* Horizontal divider styling */
.horizontal-divider {
    border-bottom: 2px solid rgba(0, 0, 0, 0.5);  /* Black line with 50% opacity */
    margin-bottom: 30px;  /* Space between divider and content */
    width: 100%;
}

/* Update section titles to Arial with bold font weight */
.about-us-content-title,
.diary-entry h3 {
    font-family: Arial, sans-serif;
    font-size: 20px;
    color: #333;
    margin: 0;
    padding: 10px 15px;
    background: none;  /* Remove pink background */
    font-weight: bold;  /* Set font weight back to bold */
}

/* Keep the main section headers (About Us and SecretPapillon Diary) in Dancing Script */
.section-header h2 {
    font-family: 'Dancing Script', cursive;
    color: white;
    margin: 0;
    padding: 10px;
}

/* Update login page layout */
.login-page {
    display: flex;
    flex-direction: column;
    padding: 40px;  /* Increased padding */
}

.logo-container-login {
    width: 100%;  /* Full width container */
    text-align: left;
    margin-bottom: 50px;  /* Increased space to prevent overlap */
}

.logo-container-login .logo {
    width: 800px;       /* Set specific width for logo */
    height: auto;
    display: block;
    object-fit: contain; /* Ensure logo maintains aspect ratio */
}

/* Position login container with more space */
.login-container {
    width: 100%;
    margin-top: 20px;    /* Additional top margin */
    padding-top: 20px;   /* Additional top padding */
}

.login-title-main {
    font-family: Arial, sans-serif;
    color: #E51EB9;
    font-size: 32px;
    margin-bottom: 20px;
    margin-left: 40px;   /* Match the input field alignment */
}

.input-button-group {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: 40px;   /* Match the title alignment */
}

/* Form element styles */
.login-form-main input[type="password"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-form-main button {
    background-color: #E51EB9;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Update section titles to Arial */
.section-title,
.section-header h2 {
    font-family: Arial, sans-serif;  /* Changed from Dancing Script to Arial */
    color: white;
    font-size: 24px;
    margin: 0;
    padding: 10px;
    background-color: #E51EB9;  /* Keep pink background */
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

/* Keep other title styles */
.post-title,
.about-us-content-title {
    font-family: Arial, sans-serif;  /* Keep Dancing Script for other titles */
    color: black;
    margin-bottom: 15px;
}

/* Update content text styling */
.post-content,
.post-text,
.crew-intro {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Update timestamp and signature styling */
.timestamp,
.signature {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #666;
    font-style: italic;
}

/* Update post footer styling */
.post-footer {
    font-family: Arial, sans-serif;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Keep titles in their current style */
.section-title,
.section-header h2 {
    font-family: Arial, sans-serif;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

/* Update empty state message styling */
.photo-post p,
.photo-container p {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #666;
    text-align: center;
    padding: 20px 0;
}

/* Keep existing photo post container styling */
.photo-container {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
}

/* Update specifically the About Us section content background */
.section-content.about-us {
    background-color: #DB7FFF;  /* Changed from white to #DB7FFF */
    color: white;  /* Make text white for better visibility */
}

/* Update About Us specific text colors for better contrast */
.about-us-content-title,
.crew-intro,
.member-name {
    color: white;
}

/* Keep all other sections and elements unchanged */
.section-content:not(.about-us) {
    background-color: white;  /* Keep other sections white */
}

/* Update Text Post section background */
.section-content.diary-entry {
    background-color: #DB7FFF;  /* Changed from white to #B133BC */
    margin-bottom: 30px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* Update section title for better contrast */
.section-content.diary-entry h3 {
    color: white;  /* Make section title white for visibility */
}

/* Keep individual post content backgrounds white for readability */
.text-post.scrollable-content,
.post-content {
    background-color: white;  /* Keep post backgrounds white */
    border-radius: 5px;
    padding: 15px;
    margin: 15px;  /* Add some margin around the white content boxes */
}

/* Maintain text colors for post content */
.post-title,
.post-text,
.post-footer,
.timestamp,
.signature {
    color: #333;  /* Keep post text dark for readability */
}

/* Override the general section-content background color for diary entries */
.section-content:not(.about-us) {
    background-color: #DB7FFF;  /* Update this to match the new color */
}

/* Add these styles for the see more functionality */
.see-more-link {
    color: white;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 5px;
    font-size: 14px;
}

.see-more-link:hover {
    color: #f0f0f0;
}

.crew-intro {
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Update media post styling */
.media-container {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
}

.media-wrapper {
    margin: 10px 0;
}

.diary-media {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

/* Update scrollable content for media posts */
.media-post.scrollable-content {
    max-height: 500px;
    overflow-y: auto;
    padding: 15px;
    border-radius: 5px;
    background-color: #fff;
}

/* Ensure videos maintain aspect ratio */
video.diary-media {
    max-height: 400px;
    object-fit: contain;
}

/* Admin panel post management styles */
.posts-management {
    margin-top: 30px;
}

.posts-list {
    max-height: 500px;
    overflow-y: auto;
    background: white;
    border-radius: 5px;
    padding: 15px;
}

.post-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: white;
    margin-bottom: 10px;
    border-radius: 5px;
}

.post-info {
    flex-grow: 1;
    margin-right: 20px;
}

.post-info h4 {
    margin: 0 0 5px 0;
    color: #333;
}

.post-date {
    font-size: 0.9em;
    color: #666;
}

.thumbnail {
    max-width: 100px;
    max-height: 60px;
    object-fit: cover;
    margin-top: 10px;
    border-radius: 3px;
}

.delete-btn {
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.delete-btn:hover {
    background-color: #cc0000;
}

.delete-form {
    margin: 0;
}

/* Update admin buttons styling */
.admin-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.section-btn {
    padding: 10px 20px;
    background-color: #E51EB9;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.section-btn:hover {
    background-color: #d41a9e;
}

/* Admin panel specific styles */
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.content-section {
    background: white;
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;
    border: 1px solid #ddd;
}

.post-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.editor-toolbar {
    margin-bottom: 10px;
    padding: 5px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.content-editor {
    min-height: 200px;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    background: white;
}

.toolbar-btn {
    background: none;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: #333;
}

.toolbar-btn:hover {
    background: #e0e0e0;
    border-radius: 3px;
}

/* Posts list styling */
.posts-list {
    margin-top: 20px;
}

.post-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ddd;
    background: white;
}

.post-info h4 {
    margin: 0;
    color: #333;
}

.post-date {
    font-size: 0.9em;
    color: #666;
}

.delete-btn {
    background-color: #ff4444;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.delete-btn:hover {
    background-color: #cc0000;
}