@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Amiri:wght@400;700&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    min-height:100vh;

    font-family:'Cormorant Garamond',serif;

    background:

    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),

    url("../images/newspaper.jpg");

    background-size:cover;

    background-position:center;

}





/* =====================
        HOME PAGE
===================== */


.container{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}



.paper{

    width:450px;

    max-width:90%;

    padding:50px;

    background:#f5e7c8;

    text-align:center;

    box-shadow:

    0 20px 50px rgba(0,0,0,.6);


}



.paper h1{

    font-size:40px;

    color:#5a3025;

}



.paper p{

    margin:30px 0;

    font-size:25px;

}



.btn{

    display:inline-block;

    padding:15px 40px;

    background:#701919;

    color:white;

    text-decoration:none;

    border-radius:30px;

    font-size:22px;

}



.btn:hover{

    background:#a52a2a;

}




.moon{

    position:absolute;

    top:30px;

    left:40px;

    width:180px;

    height:180px;

    background:url("../images/moon.png");

    background-size:cover;

}







/* =====================
        POEM PAGE
===================== */



.poem-container{


    min-height:100vh;


    display:flex;


    justify-content:center;


    align-items:center;


    padding:50px 20px;



    background:


    linear-gradient(

    rgba(0,0,0,.35),

    rgba(0,0,0,.35)

    ),


    url("../images/newspaper.jpg");



    background-size:cover;


    background-position:center;


    background-attachment:fixed;

}







/* الجريدة */


.newspaper{


    width:1050px;


    max-width:100%;


    padding:45px;


    background:#ead8ad;


    position:relative;



    border:3px solid #967348;


    box-shadow:


    0 30px 80px rgba(0,0,0,.8);



    transform-origin:center;


    perspective:1000px;


    animation:paperShow 1.5s;


}






.newspaper:after{


    content:"";


    position:absolute;


    inset:0;


    background:url("../images/tape-paper.png");


    background-size:cover;


    opacity:.06;


    pointer-events:none;


}




.newspaper > *{


    position:relative;


    z-index:2;


}








/* رأس الجريدة */


header{


    text-align:center;


    border-bottom:

    4px double #222;


    padding-bottom:15px;


}




header h1{


    font-family:"Times New Roman";


    font-size:70px;


    letter-spacing:3px;


    color:#111;


}



header p{


    font-size:22px;


}



.date{


    margin-top:8px;


}







.line{


    height:2px;


    background:#333;


    margin:25px 0;


}








/* أعمدة الجريدة */


.newspaper-grid{


    display:grid;


    grid-template-columns:150px 1fr 150px;


    gap:25px;


}





.side-news{


    text-align:center;


    font-family:serif;


    font-size:18px;


    color:#333;


}




.side-news h4{


    font-size:26px;


    border-bottom:1px solid #555;


    padding-bottom:10px;


}



.side-news img{


    width:100px;


    margin:20px auto;


    display:block;


    filter:grayscale(100%);


}







/* القصيدة */


.main-poem{


    background:#f8efd8;


    padding:35px;


    border:2px solid #b99b68;



    box-shadow:

    inset 0 0 25px rgba(0,0,0,.15);


}




.poem-title{


    text-align:center;


    margin-bottom:30px;


}



.poem-title span{


    font-size:40px;


}



.poem-title h2{


    font-family:'Amiri',serif;


    font-size:50px;


    color:#7b2020;


}



.poem-title p{


    font-size:20px;


    color:#555;


}







.poem{


    font-family:'Amiri',serif;


    font-size:27px;


    line-height:2.4;


    text-align:center;


    color:#24160e;


    white-space:pre-line;


    animation:textShow 2s;


}








.signature{


    margin-top:40px;


    padding-top:20px;


    border-top:1px solid #b99b68;


    text-align:left;


    font-family:cursive;


    font-size:28px;


    color:#7b2020;


}








/* الرسالة */


.my-message{


    margin-top:45px;


    padding-top:30px;


    border-top:2px solid #7b2020;


    text-align:center;


}




.my-message h3{


    font-size:35px;


    color:#7b2020;


}



.my-message p{


    font-family:'Amiri',serif;


    font-size:24px;


    line-height:2;


}








/* زر الصوت */


.sound-btn{


    position:fixed;


    bottom:30px;


    left:50%;


    transform:translateX(-50%);


    background:#701919;


    color:white;


    border:none;


    padding:15px 35px;


    border-radius:40px;


    font-size:20px;


    cursor:pointer;


    z-index:1000;


    box-shadow:

    0 10px 30px rgba(0,0,0,.5);


}



.sound-btn:hover{


    background:#a52a2a;


}







/* الحركات */


@keyframes textShow{


from{

opacity:0;

transform:translateY(40px);

}


to{

opacity:1;

transform:translateY(0);

}


}





@keyframes paperShow{


from{

opacity:0;

transform:scale(.8) rotateX(20deg);

}


to{

opacity:1;

transform:scale(1) rotateX(0);

}


}









/* =====================
       RESPONSIVE
===================== */



@media(max-width:900px){


.newspaper{


    padding:30px;


}



.newspaper-grid{


    grid-template-columns:1fr;


}



.side-news{


    display:none;


}



header h1{


    font-size:50px;


}



.poem{


    font-size:23px;


}



}







@media(max-width:600px){



.poem-container{


    padding:15px;


}



.newspaper{


    padding:20px;


}



header h1{


    font-size:35px;


}



header p{


    font-size:18px;


}



.main-poem{


    padding:20px;


}



.poem-title h2{


    font-size:35px;


}



.poem-title p{


    font-size:16px;


}



.poem{


    font-size:20px;


    line-height:2;


}



.my-message h3{


    font-size:28px;


}



.my-message p{


    font-size:19px;


}



.signature{


    font-size:22px;


}



.sound-btn{


    bottom:15px;


    padding:12px 25px;


    font-size:17px;


}



.moon{


    width:100px;


    height:100px;


    top:15px;


    left:15px;


}


}