@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;800&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Figtree', sans-serif;

}


.main-container {
    display: flex;
    height: 100vh;
    

    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: hsl(47, 88%, 63%);

}

.container {
    border: 2px solid black;
    width: 300px;
    background-color:  hsl(0, 0%, 100%);
    border-radius: 15px;
    box-shadow: hsl(0, 0%, 7%) 1.25px 1.25px,
        hsl(0, 0%, 7%) 2.5px 2.5px,
        hsl(0, 0%, 7%) 3.75px 3.75px,
        hsl(0, 0%, 7%) 5px 5px,
        hsl(0, 0%, 7%) 6.25px 6.25px;
}

/* image and img publishd date  */

.top-img-box {

    width: 100%;
    text-align: center;
    padding: 15px 15px 10px 15px;

}

.top-img-box img {
    width: 100%;
    border-radius: 8px;

}

.publish {
    padding: 0px 15px 5px 15px;
}

.publish span {
    font-weight: 800;
    background-color: hsl(47, 88%, 63%);
    padding: 5px 10px;
    display: inline-block;
    border-radius: 3px;

}



.publish p {
    padding: 8px 0px;
}



/* heading and paragraph  */

.content {

    padding: 0px 15px;
}

.content h1 {
    font-size: 20px;
    font-weight: 800;
    color: hsl(0, 0%, 7%);
    margin-bottom: 15px;

}

.content h1:hover{
    color: hsl(47, 88%, 63%);
    cursor: pointer;
}



.content p {
    color: hsl(0, 0%, 50%);
    margin: 10px 0px;
    line-height: 1.3;
}


/* profile and avtar img  */

.profile {
    display: flex;
    align-items: center;
    padding-left: 15px;
    margin-top: 20px;
    padding-bottom: 15px;

}

.profile img {
    height: 30px;

}

.profile span {
    font-weight: 800;
    font-size: 14px;
    margin-left: 10px;


}







/* author name tag  */

footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: hsl(0, 0%, 100%);
}

.attribution {
    font-size: 11px;
    text-align: center;
    padding: 10px 0px;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}




/* Media query start from here  */


@media only screen and (max-width:375px) {

  

    .main-container{
        width: 100%;
        height: 100vh;


    }
    .container {
        border: 2px solid black;
        width: 90%;
    
    }
    .top-img-box {
        padding: 20px 20px 10px 20px;
        
    
    }
    .top-img-box img {
        height: 100%;
    
    }

    .content {

        padding: 0px 25px;
    }
    
    .publish  {
        padding: 10px 25px;
    }
    



    
}

/* Media query end from here  */