/* -------------------------------------------------
   0. RESET & GLOBALS
-------------------------------------------------- */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    background:#dbdad1;             /* page background */
    overflow-x:hidden;
}

/* -------------------------------------------------
   1. MAIN LAYOUT
-------------------------------------------------- */
.outer-container{
    display:flex;
    min-height:100vh;
    width:100%;
}

.container{
    position:relative;
    width:100%;
    max-width:800px;
    margin:auto;
    background:#fff;
    box-shadow:0 0 20px rgba(0,0,0,.1);
    overflow:hidden;
    z-index:1;
}

.side-blind{
    flex:1;
    background:#e0e0e0;
    display:none;                   /* shown only on ≥1024 px */
}

/* -------------------------------------------------
   2. HEADER  – solid color #b28bc0
-------------------------------------------------- */
header{
    width:100%;
    height:280px;
    background:#b28bc0;
    z-index:1;
    position: relative; /* Needed for absolute positioning of children */
}

/* -------------------------------------------------
   3. TITLE & LOGO  – float above header
-------------------------------------------------- */
.title-wrapper,
.logo{
    position:absolute;
    z-index:2;
    transform: translateY(-50%); /* Initial vertical centering */
}

.title-wrapper{
    left:40px;
    top: 50%; /* Initial vertical centering point */
    width:calc(100% - 300px);
    text-align:center;
}

.title-wrapper img,
.logo img{
    width:100%;
    height:auto;
    display:block;
}

.logo{
    right:20px;
    top: 50%; /* Initial vertical centering point */
    max-width:150px;
}

/* -------------------------------------------------
   4. CONTENT  – lined paper using your image
-------------------------------------------------- */

.content::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url("images/line.png") 0 0 repeat-y;
    background-size: 100% 28px;
    opacity: 0.5; /* this applies to the ::before pseudo-layer */
    z-index: -1;
}

.content {
    position: relative;
    z-index: 1;
    padding: 40px 20px 60px;
    min-height: 600px;
}


.poem{
    margin-top:15px;
}

#poem-title{
    font-size:28px;
    margin-bottom:6px;
    font-weight:bold;
    color:#333;
}

#poem-date{
    top: -5px;
    font-style:italic;
    margin-bottom:34px;
    color:#666;
}

#poem-content{
    white-space:pre-line;
    font-size:16px;
    color:#444;
}

/* optional decorative line at very bottom */
.line-wrapper img{
    width:100%;
    display:block;
}

/* -------------------------------------------------
   5. RESPONSIVE TWEAKS
-------------------------------------------------- */
@media (min-width:1024px){
    .side-blind{display:block;}
    .container{flex:0 0 800px;}

    .logo{
        max-width:180px;
        top: 30%; /* Adjust for better visual centering on larger screens */
        right:30px;
        transform: translateY(-50%); /* Maintain vertical centering */
    }

    .title-wrapper{
        left:40px;
        top: 30%; /* Adjust for better visual centering on larger screens */
        width:calc(100% - 300px);
        text-align:center;
        transform: translateY(-50%); /* Maintain vertical centering */
    }

    #poem-title{font-size:32px;}
    #poem-content{font-size:18px; line-height:1.55;}
}

@media (max-width:1023px) and (min-width:768px){
    .container{max-width:90%;}

    .logo{
        max-width: 160px; /* Adjust size for tablet */
        top: 50%; /* Vertically center on tablet */
        right: 25px;
        transform: translateY(-50%); /* Maintain vertical centering */
    }

    .title-wrapper{
        left: 30px;
        top: 50%; /* Vertically center on tablet */
        width: calc(100% - 200px); /* Adjust width for tablet */
        transform: translateY(-50%); /* Maintain vertical centering */
    }
}

@media (max-width:767px){
    .container{max-width:100%;}

    .logo{
        max-width: 120px; /* Adjust size for mobile */
        top: 50%; /* Vertically center on mobile */
        right: 15px;
        transform: translateY(-50%); /* Maintain vertical centering */
    }

    .title-wrapper{
        left: 15px;
        top: 50%; /* Vertically center on mobile */
        width: calc(100% - 30px); /* Adjust width for mobile */
        text-align: center;
        transform: translateY(-50%); /* Maintain vertical centering */
    }

    .content{padding:25px 15px;}

    #poem-title{font-size:24px;}
    #poem-content{font-size:16px; line-height:1.55;}
}