body {
    
        background-image: url("1.PNG");
        background-repeat: no-repeat;
        background-attachment: fixed; 
        background-size: cover;
        background-position: relative; 
        margin: 0; 
        font-family: 'Times New Roman', Times, serif; 
    }
    .header {
        background-color: black;
        color: white;
        text-align: center;
        padding: 50px;
        z-index: 3; 
    }
    .webname {
        position: fixed;  
        top: 0;           
        right: 0;  
        padding: 10px;       
        width: 500px;    
        height: auto;     
        z-index: 9999;    
    }

#door-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2; /* Ensures the door is in front of images */
}

#door-left, #door-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25%; /* Adjust as needed */
    height: auto;
    z-index: 2;

}

#door-left {
    left: 38%; /* Start at the center */
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    animation: slideLeft 2s forwards; /* Slide left animation */
}

#door-right {
    right: 38%; /* Start at the center */
    transform: translate(50%, -50%); /* Center horizontally and vertically */
    animation: slideRight 2s forwards; /* Slide right animation */
}

@keyframes slideLeft {
    from {
        left: 38%; /* Start at the center */
    }
    to {
        left: 0; /* Slide to the left */
    }
}

@keyframes slideRight {
    from {
        right: 36%; /* Start at the center */
    }
    to {
        right: 0; /* Slide to the right */
    }
}

.diary {
    position: absolute; 
    left: 300px;
    top: 70px;     
    z-index: 1;       
    width: 50%;         
    height: 38%;
    display: flex;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 5px;  
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.5em;
    color: white;
    text-shadow: 2px 4px 10px white;
    padding: 30px;
}