@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Outfit:wght@100..900&display=swap');

:root {

    --Yellow: #f4d04e;

    --White: #ffffff;

    --Gray500: #6b6b6b;
    --Gray950: #121212;


}


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: "Figtree", serif;

    transition: 0.5s ease-in-out;
}

body {

    background-color: var(--Yellow);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);


}

#container {

    /* div background color */
    background-color: var(--White);

    /* border editing  */
    border: 1px solid;
    border-radius: 10px;
    border-color: var(--Gray950);

    /*box shadow */
    box-shadow: 5px 5px 0px 1px;

    /* div dimension */

    width: 360px;
    padding: 25px;

    /* content organization */

    display: grid;
    
    justify-content: start;
    
    





}


/* image editing */

.img {

    width: 100%;
    height: 90%;
    border-radius: 4px;
    overflow: hidden;

    margin-bottom: 15px;

    



}

.img img {

    width: 100%;
}


/* button editing */

.button {

    /* Style editing */

    font-weight: bold;


    background-color: var(--Yellow);
    color: var(--Gray950);

    border: none;
    border-radius: 3px;




    padding: 5px;
    margin-bottom: 15px;


}

.button:hover {

    background-color: var(--Gray950);
    color: var(--Yellow);


}

/* date editing */

.date {

    font-size: 16px;
    font-weight: 600;

    margin-bottom: 15px;




}


/*  title editing */

.title {

    font-size: 22px;
    font-weight: 800;

    margin-bottom: 15px;



}

.title:hover {

    color: var(--Yellow);
}

/* description editing */

.description {

    color: var(--Gray500);
    font-weight: 500;

    margin-bottom: 15px;
}






/* perfil img */


.perfil {

    display: flex;
    flex-direction: row;

    
}

.perfil img {

    width: 10%;
    overflow: hidden;

    margin-right: 10px;
    
}

.perfil h3 {

    display: grid;
    place-items: center;
    font-size: 14px;

    font-weight: 800;
    
}