/* About Me Window Styling */
.about-window {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; /* Large width */
    height: 600px; /* Large height */
    background-color: #FFE4E1; /* Background color for the window itself */
    border: 2px solid black;
    box-shadow: 8px 8px 0 #000;
    display: none; /* Initially hidden */
}

.about-window .window-body {
    padding: 30px; /* Padding for content */
    font-size: 1.2em; /* Adjust font size for readability */
    line-height: 1.6;
    background-color: #FFECEF; /* Match the overall background color */
    height: 500px;
}

.about-window h1 {
    font-size: 2em; /* Larger font size for the heading */
    margin-bottom: 20px;
}

.about-window p {
    margin-bottom: 15px;
}

/* Picture Window Styling */
.picture-window {
    position: absolute;
    top: 20%; /* Adjust the initial top position */
    left: 70%; /* Adjust the initial left position */
    transform: translate(30%, 50%);
    width: 300px; /* Adjust width */
    height: 300px; /* Adjust height */
    background-color: #FFE4E1; /* Background color for the window itself */
    border: 2px solid black;
    box-shadow: 8px 8px 0 #000;
    display: none; /* Initially hidden */
}

/* Image Styling */
.picture-window img {
    width: 100%; /* Make the image fit within the window */
    height: auto; /* Maintain the image aspect ratio */
    border: 5px solid #000; /* Add a black border around the image */
    border-radius: 5px; /* Optional: Add some rounded corners */
}

.picture-window .window-body {
    padding: 15px; /* Padding for content */
    background-color: #FFECEF; /* Match the overall background color */
    text-align: center;
}