@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

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

html{
    font-size: 62.5%;
}

#body{
    font-family: 'Poppins', 'sans-serif';
    background: rgb(248, 248, 248);
}

/* ################### UTILITY CLASSES #############  */

.heading1{
    font-size: 3.5rem;
    font-weight: 500;
    color: #222;
    text-transform: uppercase;
}

.heading2{
    font-size: 2rem;
    font-weight: 300;
    color: #333;
}

.p1{
    font-size: 1.5rem;
    color: #444;
}

.btn{
    color: #222;
    border: 2px solid black;
    border-radius: 5px;
    text-transform: uppercase;
    padding: 1em;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease-in-out;
}

.btn2{
    color: #fff;
    background: #000;
    padding: 0.7em 1em;
    outline: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.dabba{
    background: #fff;
}

.bx{
    background: #fff;
    border-bottom: 1px solid rgb(221, 221, 221);
    padding: 1rem;
    display: flex;
}

.p2{
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
    margin: 0.5rem;
    background: rgb(236, 236, 236);
}

/* ################ NAVBAR ################  */

.navbar1{
    width: 100%;
    margin: 2rem auto;
    padding: 2rem;
    text-align: center;
}

.p1 span{
    background-color: #000;
    color: #fff;
}

.navbar1 .heading1{
    margin-bottom: 1.5rem;
}

.ps{
    display: flex;
    justify-content: space-between;
}

.ps .poem{
    transform: translateX(-150px);
    animation: poem-in 1s ease-in-out forwards;
    transition: all 0.2s ease-in;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

@keyframes poem-in{
    100%{
        transform: translateX(0);
    }
}

.ps .story{
    transform: translateX(150px);
    animation: story-in 1s ease-in-out forwards;
    transition: all 0.2s ease-in;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

@keyframes story-in{
    100%{
        transform: translateX(0);
    }
}

.ps .poem:hover,
.ps .story:hover{
    background: rgb(207, 189, 255);
    color: #000;
    box-shadow: 5px 5px 10px rgb(236, 189, 255);
}

/* ############ SECTION ###################### */

/* ############# BOX 1 ######################## */

.box{
    width: 1350px;
    height: 100%;
    margin: 1px auto;
    display: flex;
}

.box1{
    width: 40%;
}

.title-heading{
    width: 90%;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);
}

.title-heading .img-container img{
    display: inline-block;
    width: 100%;
    height: 30rem;
    object-fit: cover;
    object-position: center;
    /* filter: blur(1px); */
}

.title-heading .text-container{
    width: 100%;
    padding: 1rem;
}

.text-container h1{
    font-size: 2.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #222;
    margin: 0.7rem auto;
}

.text-container .heading2 span{
    color: #999;
}

.text-container .heading2{
    margin-bottom: 1.5rem;
}

.text-container .p1{
    margin-bottom: 2rem;
}

.bc{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.bc .btn:hover{
    background: rgb(240, 240, 240);
}

.bc .p1{
    font-weight: 500;
    padding: 1rem;
}

/* ############# BOX 2 ################ */

.blog-entry{
    width: 90%;
    margin-top: 5rem;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);
}

.blog-entry .img-container2 img{
    display: inline-block;
    width: 100%;
    height: 30rem;
    object-fit: cover;
    object-position: center;
    /* filter: blur(1px); */
}

.blog-entry .text-container2{
    width: 100%;
    padding: 1rem;
}

.text-container2 h1{
    font-size: 2.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #222;
    margin: 0.7rem auto;
}

.text-container2 .heading2 span{
    color: #999;
}

.text-container2 .heading2{
    margin-bottom: 1.5rem;
}

.text-container2 .p1{
    margin-bottom: 2rem;
}

/* ################ BOX 3 ################### */

.box2{
    width: 33%;
}

.my-name{
    background: #fff;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);

}

.my-name .img-container3 img{
    display: inline-block;
    width: 100%;
    height: 32rem;
    object-fit: cover;
    object-position: center;
}

.text-container3{
    padding: 1rem;
}

.text-container3 h3{
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}
/* ################ BOX 4 ################### */

.box3{
    margin-top: 5rem;
    width: 100%;
}

.my-name{
    background: #fff;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);

}

.my-name .img-container4 img{
    display: inline-block;
    width: 100%;
    height: 32rem;
    object-fit: cover;
    object-position: center;
    filter: blur(1.5px);
}

.text-container4{
    padding: 1rem;
}

.text-container4 h3{
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

/* ############## BOX 4 ####################### */

.bx1 h3{
    font-size: 2rem;
    font-weight: 400;
    padding: 2rem 1rem;
}

.container{
    margin-top: 5rem;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);
}

.container .bx1{
    background: rgb(224, 223, 223);
}

/* .bx img{
    display: inline-block;
    width: 20%;
    object-fit: cover;
    object-position: center;
} */

/* .container .bx:hover{
    background: rgb(199, 199, 199);
}

.content{
    padding: 0 2rem;
} */

/* ############## BOX 5 ################  */

.container2{
    margin-top: 140rem;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);
    font-size: 1.5rem;
}


/* .container2 .tags{
    background: rgb(224, 223, 223);
}

.container2 .tag{
    background: #fff;
    padding: 1rem;
}

.tags h3{
    font-size: 2rem;
    font-weight: 400;
    padding: 2rem 1rem;
}

.tag{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
} */

/* ############# BOX 5 ############### */


.story-title{
    text-align: center;
    margin-top: 5rem;
}

.story-heading{
    width: 70%;
    box-shadow: 5px 5px 10px rgb(170, 169, 169);
    margin: 5em 7rem;
}

.story-heading .img-container5 img{
    display: inline-block;
    width: 100%;
    height: 50rem;
    object-fit: cover;
    object-position: center;
    /* filter: blur(1px); */
}

.story-heading .story-container{
    width: 100%;
    padding: 1rem;
}

.story-container h1{
    font-size: 2.7rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #222;
    margin: 0.7rem auto;
}

.story-container .heading2 span{
    color: #999;
}

.story-container .heading2{
    margin-bottom: 1.5rem;
}

.story-container .p1{
    margin-bottom: 2rem;
}

.bc{
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.bc .btn:hover{
    background: rgb(240, 240, 240);
}

.bc .p1{
    font-weight: 500;
    padding: 1rem;
}

/* ############## FOOTER ################# */

.footer{
    padding: 5rem;
    margin-top: 4rem;
    background: #777;
}

.powered{
    display: flex;
    padding-top: 4rem;
}

.powered p{
    color: #fff;
}

.powered a{
    padding-left: 0.5rem;
    color: #fff;
}

.footer .next:hover{
    background: rgb(209, 209, 209);
    color: black;
}

.footer .previous{
    color: #999;
    background: #444;
}

.footer .previous:hover{
    cursor: not-allowed;
    color: #444;
    background: #999;
}

/* ########### SMALL SCREEN 500px ############# */

@media (max-width: 500px){
    html{
        font-size: 50%;
    }

    .box{
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .box1{
        width: 100%;
    }

    .box2{
        align-items: center;
        width: 95%;
        padding-right: 3.5rem;
        margin-top: 5rem;
    }

    .story-heading{
        width: 90%;
        margin-left: 1rem;
    }
}
/* ########### SMALL SCREEN 768px ############# */

@media (min-width: 501px) and (max-width: 768px){
    html{
        font-size: 50%;
    }

    .box{
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .box1{
        width: 100%;
    }

    .box2{
        width: 95%;
        padding-right: 2rem;
        margin-top: 5rem;
    }

    .story-heading{
        width: 90%;
        margin-left: 1rem;
    }
}

/* ########### SMALL SCREEN 1200px ############# */

@media (min-width: 768px) and (max-width: 1200px){
    html{
        font-size: 70%;
    }

    .box{
        flex-direction: column;
        align-items: center;
        width: 90%;
    }

    .box1{
        width: 100%;
    }

    .box2{
        width: 95%;
        padding-right: 10rem;
        margin-top: 5rem;
    }

    .story-heading{
        width: 90%;
        margin-left: 1rem;
    }
}