body{
    background:#45416b;
    color:#222;
    font-family:Verdana,sans-serif;
}

main{
    width:900px;
    margin:auto;
}

h1{
    color:#7d52ff;
    font-size:45px;
}

img{
    width:220px;
}
.presentacion{
    display: flex;
    align-items: center;
    gap: 30px;

    background: rgba(255,255,255,0.05);
    border: 2px solid #4f66ff;
    border-radius: 20px;

    padding: 25px;
    margin-bottom: 40px;
}
.menu{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;

    margin-top:30px;
}

.tarjeta{

    width:150px;
    height:120px;

    background:rgba(255,255,255,.05);

    border:2px solid #4f66ff;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:white;

    font-size:22px;

    transition:.3s;
}

.tarjeta:hover{

    transform:translateY(-8px);

    background:#4f66ff;
}
.novedades{

margin-top:60px;

}

.post{

background:rgba(255,255,255,.05);

padding:25px;

border-radius:20px;

border:2px solid #4f66ff;

}

.post h3{

margin-top:0;

color:#7d52ff;

}
nav{

display:flex;

justify-content:center;

gap:25px;

padding:20px;

background:rgba(0,0,0,.25);

backdrop-filter:blur(15px);

position:sticky;

top:0;

border-bottom:2px solid #4f66ff;

z-index:1000;

}
nav a{

color:white;

text-decoration:none;

font-weight:bold;

transition:.3s;

}
nav a:hover{

color:#7d52ff;

}
.contenido{
    display:grid;
    grid-template-columns: 220px 1fr 280px;
    gap:200px;
    margin-top:40px;
}

.menu,
.galeria,
.lado{
    display:flex;
    flex-direction:column;
    gap:30px;
}
.menu{
    grid-column:1;
    background: #11173d;
    border:2px solid #4ea3ff;
    border-radius:18px;
    padding:20px;
}

.galeria{
    grid-column:2;
    background: #11173d;
    border:2px solid #4ea3ff;
    border-radius:18px;
    padding:30px;
}

.lado{
    grid-column:3;
    background: #11173d;
    border:2px solid #4ea3ff;
    border-radius:18px;
    padding:20px;
}