*{
    margin: 0;
    padding: 0;
}
:root{ /*variables para facilitar el diseño*/
    --marron: #49393B;
    --beige:#EBE7DB;
    --verdeoscuro:#3D553C;
    --verde:#91A574;
    --verdeapagado:#C2CDB2;
    --verdeclaro:#EAF4D3;
    --fuente-titulo: 'Sniglet';
    --fuente-cuerpo: 'Nunito';
}
body{
    height: 100dvh;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: var(--verde);
}
.contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px; /* espacio entre los elementos */
}
.nombre{
    color: var(--verde-oscuro, #3D553C);
    font-family: var(--fuente-titulo);
    font-size: 64px;
}
.logo{
    width: 300px;
    height: 300px;
    border-radius: 32px;
    background: var(--verde-clarito, #EAF4D3);
    border: 8px solid var(--verde-oscuro, #3D553C);
    box-shadow: 6px 4px 10px 0px #3D553C;
    overflow: hidden;
}
img{
    width: 100%;
    height: 100%;
    transform: rotate(12deg); 
    transform-origin: top left;
    object-fit: cover;
    position: relative; /* para posicionar la imagen dentro del contenedor */
    top: 24px; /* ajusta la posición vertical de la imagen */
    left: 10px; /* ajusta la posición horizontal de la imagen */
}
.boton{
    display: inline-block;
    text-align: center;
    padding: 0px 32px;
    border-radius: 16px;
    border: 3px solid var(--verde-oscuro, #3D553C);
    background: var(--verde-clarito, #EAF4D3);
    margin: 8px;
}
a{
    text-decoration: none;
}
.boton p{
    color: var(--verde-oscuro, #3D553C);
    font-family: Nunito;
    font-size: 40px;
    font-weight: 700;
}