body {
    margin: 0;
    overflow: hidden;
    background: linear-gradient(300deg, #ffe6e6 0%, #ffd1dc 100%);
    font-family: 'courier';
}

canvas {
    display: block;
}

#letter-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f5f5f5;
    padding: 3em 4em;
    width: 50vw;
    opacity: 0;
    transition: opacity 2s;
    display: none;
    line-height: 1.6;
}
.date {
    position: fixed;
    bottom: 10px;
    left: 10px;
    font-family: 'helvetica';
    color: #ff69b4;
    font-size: 1em;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.5);
}

#letter-content h2 {
    font-family: "Alex Brush", serif;
  font-weight: 400;
  font-style: normal;
    color: #ff69b4;
    text-align: left;
    font-size: 2.5em;
    margin-bottom: 1em;
}


#letter-content {
    max-height: 875px;  /* Set a fixed height for the scrollable area */
    overflow-y: auto;   /* Enable vertical scrolling */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
}

#letter-content::-webkit-scrollbar {
    display: none;  /* Hide scrollbar for Chrome, Safari, and newer versions of Edge */
}

.image-placeholder {
    max-width: 600px;  /* Limits the overall width of the container */
    margin: 20px auto;
    border: 2px dashed #ff69b4;
    display: flex;
    flex-direction: column; /* Aligns image and text vertically */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    color: #ff69b4;
}

.image-placeholder img {
    max-width: 100%;  /* Ensures the image fits within the container */
    height: auto;     /* Maintains aspect ratio */
    border-radius: 10px; /* Optional: rounds image corners for a softer look */
}


.image-placeholder2 {
    max-height: 900px;
    max-width: 400px; /* Limits the overall height of the container */
    margin: 20px auto;
    border: 2px dashed #ff69b4;
    display: flex;
    flex-direction: row; /* Aligns image and text horizontally */
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    color: #ff69b4;
    white-space: nowrap; /* Prevents content from wrapping */
}

.image-placeholder2 img {
    max-width: 100%;   /* Ensures the image fully fits the container's width */
    max-height: 100%;  /* Ensures the image fully fits the container's height */
    object-fit: cover; /* Maintains aspect ratio and covers the entire space */
    border-radius: 10px;
}


.floating-heart {
    position: absolute;
    pointer-events: none;
    color: #ff69b4;
    font-size: 24px;
    opacity: 0;
    animation: floatHeart 4s linear forwards;
}

@keyframes floatHeart {
    0% { 
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% { 
        transform: translate(var(--moveX), var(--moveY)) rotate(var(--rotation));
        opacity: 0;
    }
}

/* General styling for all star-bordered images with unique colors */
/* General styling for all star-bordered images with clean design */
.star-border-1{
    width: 500px;
    height: 500px;
    border: none;
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 61% 35%, 100% 35%, 
        68% 57%, 79% 91%, 50% 70%, 
        21% 91%, 32% 57%, 0% 35%, 
        39% 35%
    ); /* Star-shaped cropping */
    object-fit: cover;
    box-shadow: 0 0 20px rgba(255, 182, 193, 0.9); /* Soft glow */
}

/* Unique, imperfect star shapes for each star */

.star-border-1 {
    width: 500px;
    height: 500px;
    border: 8px solid #FFC0CB; /* Light Pink */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 62% 30%, 100% 38%, 
        68% 57%, 80% 90%, 50% 75%, 
        20% 90%, 32% 57%, 0% 38%, 
        38% 30%
    ); /* Slightly lopsided star */
    object-fit: cover;
    box-shadow: 0 0 25px #FFC0CB;
}

.star-border-2 {
    width: 500px;
    height: 500px;
    border: 8px solid #FFB6C1; /* Baby Pink */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 70% 28%, 95% 50%, 
        75% 62%, 80% 100%, 50% 78%, 
        18% 100%, 25% 60%, 5% 50%, 
        30% 28%
    ); /* Tilted star with varied points */
    object-fit: cover;
    box-shadow: 0 0 25px #FFB6C1;
}

.star-border-3 {
    width: 500px;
    height: 500px;
    border: 8px solid #FF69B4; /* Hot Pink */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 60% 35%, 98% 40%, 
        70% 60%, 85% 95%, 50% 70%, 
        15% 95%, 30% 60%, 2% 40%, 
        40% 35%
    ); /* Star with more pointed tips */
    object-fit: cover;
    box-shadow: 0 0 25px #FF69B4;
}

.star-border-4 {
    width: 500px;
    height: 500px;
    border: 8px solid #FF1493; /* Deep Pink */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 65% 25%, 90% 35%, 
        75% 55%, 85% 85%, 50% 75%, 
        15% 85%, 25% 55%, 10% 35%, 
        35% 25%
    ); /* Asymmetric, irregular star shape */
    object-fit: cover;
    box-shadow: 0 0 25px #FF1493;
}

.star-border-5 {
    width: 500px;
    height: 500px;
    border: 8px solid #DB7093; /* Pale Violet Red */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 58% 27%, 95% 35%, 
        73% 52%, 78% 100%, 50% 72%, 
        22% 100%, 28% 52%, 5% 35%, 
        42% 27%
    ); /* Tilted and stretched star */
    object-fit: cover;
    box-shadow: 0 0 25px #DB7093;
}

.star-border-6 {
    width: 500px;
    height: 500px;
    border: 8px solid #C71585; /* Medium Violet Red */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 55% 30%, 95% 45%, 
        72% 62%, 82% 95%, 50% 75%, 
        18% 95%, 28% 62%, 5% 45%, 
        45% 30%
    ); /* Wavy star with exaggerated tips */
    object-fit: cover;
    box-shadow: 0 0 25px #C71585;
}


.star-border-8 {
    width: 700px;
    height: 900px;
    border: 8px solid #FFA07A; /* Light Salmon Pink */
    position: relative;
    margin: 50px auto;
    display: block;
    clip-path: polygon(
        50% 0%, 60% 30%, 90% 38%, 
        70% 58%, 75% 95%, 50% 72%, 
        25% 95%, 30% 58%, 10% 38%, 
        40% 30%
    ); /* Skewed star with irregular points */
    object-fit: cover;
    box-shadow: 0 0 25px #FFA07A;
}

/* Add this to your CSS file or within a <style> tag in the <head> */
p {
  margin-bottom: 1.5em; /* Adds extra spacing below each paragraph */
  line-height: 1.6; /* Improves readability with slightly increased line spacing */
}