@font-face {
    font-family: "Figtree";
    src: url(assets/fonts/Figtree-VariableFont_wght.ttf) format('truetype');
}

@font-face {
    font-family: "Italic";
    src: url(assets/fonts/Figtree-VariableFont_wght.ttf) format('truetype');
}
body {
    background-color: hsl(47, 88%, 63%);
    font-size: 16px;
}

.image1 {
    width: 336px;
}

.image1 img {
    max-width: 100%;
    border-radius: 10px;
}
.contenedor {
    border-radius: 10px;
    border: 1px solid black;
    box-shadow: 5px 5px 0px black;
    height: 470px;
    background-color: hsl(0, 0%, 100%);
    max-width: 23.6%;
    margin: auto;
    margin-top: 200px;
    padding: 20px
}

.titulo {
    font-weight: 800;
    font-family: "Figtree";
    border-radius: 5px;
    display: inline-grid;
    padding: 5px 13px;
    background-color: hsl(47, 88%, 63%);
    max-width: 50%;
    gap:0px;
    margin: 20px 0px 0px;
    font-size: 14px;
}

.fecha {
    color:hsl(0, 0%, 7%);
    font-weight: 500;
    font-family: "Figtree";
    font-size: 14px;
}

.textact {
    font-weight: 800;
    font-family: "Figtree";
    font-size: 24px;
}

.texto {
    font-weight: 500;
    margin-top: 0px;
    color:hsl(0, 0%, 42%);
    font-family: "Italic";
    font-size: 17px;
    line-height: 1.4;
}
.textact:hover{
    color:hsl(47, 88%, 63%);
    cursor: pointer;
}
.perfilfoto{  
    font-family: "Figtree";
    display: flex;
    font-size: 14px;
    gap:12px
}
.perfilfoto img {
    margin-top: 5px;
    width: 10%;
    height: 10%;
}

.attribution {
    margin-top: 10px;
}

@media (max-width: 375px) {
    .contenedor {
        max-width: 80%;
        margin-top: 200px;
        height: 410px;
    }
    .titulo{
        font-size: 12px;
    }
    .textact {
        font-weight: 800;
        font-family: "Figtree";
        font-size: 21px;
    }
    .image1 img {
        max-width: 86%;
    }
    .fecha{
        font-size: 13px;
    }
    .texto{
        font-size: 14px;
    }
}