@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --yellow: #ffbc00;
    --black: #111111;
    --brown1: #1d0c0a;
    --brown2: #3a1913;
    --brown3: #57251d;
    --brown4: #743226;
    --brown5: #913e30;
    --brown6: #d38a59;
    --brown7: #F8EDB1;
    --txtSize: clamp(13px, 4vw + .6rem, 30px);
    --txtSizeFooter: clamp(7px, 1.5vw + .5rem, 17px);
    --fonttype: "Plus Jakarta Sans", serif;
    --fontGeneral: clamp(10px, .5vw + .9rem, 18px);
    --fontTittle: clamp(20px, 2.5vw + 1.4rem, 40px);

}

img{
    width: 100%;
    border-radius: 5px;
}
.container {
    background: url(img/tupoFinal.webp),radial-gradient(circle, rgba(255, 233, 106, 0.736), rgba(117, 57, 0, 0.677));
    background-position: center;
    background-repeat: no-repeat;    
    padding: 0px 5%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
    backdrop-filter: blur(10px);
    animation: fadeIn 2s ease-in-out;
    background-color: rgba(255, 255, 255, 0.485);
    margin: 3rem 0px;
    border-radius: 10px;
    padding: 5%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    gap: 1rem;


    width: 250px;
    height: auto;
    flex-grow: 1;
}