body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", serif;
    background-color: hsl(210, 46%, 95%);
}
@media screen and (max-width:600px) {
    .container{
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin: 15% 7%;
        border-radius: 20px;
        height: 70vh;
    }
    .explanation{
        padding: 20px 27px;
    }
    .image-container{
        width: 100%;
        height: 25vh;
        overflow: hidden;
    }
    #drawerimg{
        max-width: 100%;
        /* height: 20%; */
        /* object-fit: cover; */
    }
    .expl-main{
        font-size: 4vw;
        font-weight: 500;
    }
    .expl-desc{
        color: hsl(217, 19%, 35%);
        margin: 0;
        font-size: 3vw;
    }
    .person-image{
        width: 9vw;
        height: 8vh;
        border-radius: 50% ;
    }
    .details{
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
    }
    .part1{
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }
    .name-detail{
        font-size: 4vw;
        flex-grow: 2;
        font-weight: 500;
    }
    .date-detai{
        font-size: 3vw;
    }
    .share-img{
        /* justify-self: end; */
        height: 20px;
        width: 20px;
        /* flex-grow: 1; */
    }
    .share-button{
        border: none;
        height: 10vh;
        width: 9vw;
        background-color: hsl(210, 46%, 95%);
        border-radius: 60%;
        overflow: visible;
        background-image: url(images/icon-share.svg);
        background-repeat: no-repeat;
        background-size:70%;
        background-position: center;
    }
    .share-unit{
        width: 100%;
        box-sizing: border-box;
        visibility: hidden;
        position: absolute;
        bottom: 0;
        /* display: none; */
        background-color: hsl(217, 19%, 35%);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /* gap: 20px; */
        padding: 2%;
    }
    .share-unit-1{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 20px;
    }
    .share-unit img{
        height: 25px;
    }
    .share-name{
        padding: 0 4vw;
        color: hsl(214, 17%, 51%);
    }
    
}

@media screen and (min-width:600px) {
    body{
        height: 90vh;
        
    }
    .container{
        display: flex;
        position: relative;
        flex-direction: row;
        margin: 10vw;  
        background-color: white;
        overflow: hidden;
        border-radius: 20px;
        width: 55vw;
    }
    .share-unit{
        /* visibility: none; */
        display: none;
        position: absolute;
    }
    .image-container{
        height: 40vh;
        width: 50vw;
        overflow: hidden;
    }
    #drawerimg{
        /* width: 100%; */
        height: 100%;
    }
    .person-image{
        width: 4vw;
        height: 6vh;
        border-radius: 50%;
    }
    .card{
        /* max-width: 80%; */
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .details{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .part1{
        display: flex;
        flex-direction: row;
        gap: 2vw;
        align-items: center;
    }
    .expl-main{
        font-size: 1.5vw;
        font-weight: 500;
    }
    .expl-desc{
        color: hsl(217, 19%, 35%);
        margin: 0;
        font-size: 1vw;
    }
    .share-button{
        border: none;
        height: 5vh;
        width: 3vw;
        background-color: hsl(210, 46%, 95%);
        border-radius: 60%;
        overflow: visible;
        background-image: url(images/icon-share.svg);
        background-repeat: no-repeat;
        background-size:70%;
        background-position: center;
    }
    .name-detail{
        font-size: 1.5vw;
        flex-grow: 2;
        font-weight: 500;
    }
    .date-detai{
        font-size: 1vw;
    }
    .name {
        margin: 0;
    }
}