/* ========================================= */
/* RESET */
/* ========================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* Cursor */

*{
    cursor:url("images/cat.png") 0 0, auto;
}

a,
button{
    cursor:url("images/cat.png") 0 0, pointer;
}

/* ========================================= */
/* BODY */
/* ========================================= */

body{

    background-image:
        linear-gradient(
            rgba(255,255,255,.20),
            rgba(255,255,255,.20)
        ),
        url("images/wallpaper.jpg");

    background-size:cover;
    background-attachment:fixed;
    background-position:center;

    font-family:"Quicksand",sans-serif;

    color:#444;

}

/* ========================================= */
/* CONTENEDOR */
/* ========================================= */

.container{

    width:min(1350px,92%);

    margin:40px auto;

}

/* ========================================= */
/* BANNER */
/* ========================================= */

.banner{

    position:relative;

    height:280px;

    overflow:hidden;

    border-radius:25px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.18);

    margin-bottom:30px;

}

.banner img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.6s;

}

.banner:hover img{

    transform:scale(1.03);

}

.banner::after{

    content:"";

    position:absolute;

    inset:0;

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

}

/* ========================================= */
/* MENU */
/* ========================================= */

nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:30px;

}

nav a{

    text-decoration:none;

    color:#5e5263;

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

    padding:12px 20px;

    border-radius:15px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

    transition:.25s;

    font-weight:700;

}

nav a:hover{

    transform:translateY(-4px);

    background:#ffe6f4;

}

/* ========================================= */
/* LAYOUT */
/* ========================================= */

.main-layout{

    display:grid;

    grid-template-columns:230px 1fr;

    gap:25px;

}

/* ========================================= */
/* SIDEBAR */
/* ========================================= */

aside{

    display:flex;

    flex-direction:column;

    gap:18px;

    position:sticky;

    top:20px;

    height:max-content;

}

/* ========================================= */
/* MAIN */
/* ========================================= */

main{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* ========================================= */
/* CAJAS */
/* ========================================= */

.box{

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

    backdrop-filter:blur(7px);

    padding:25px;

    border-radius:18px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.08);

    transition:.30s;

    animation:fade .7s;

}

.box:hover{

    transform:translateY(-5px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.12);

}

/* ========================================= */
/* TITULOS */
/* ========================================= */

h1{

    font-size:42px;

    color:#67556c;

    margin-bottom:20px;

}

h2{

    font-size:23px;

    color:#67556c;

    margin-bottom:15px;

    padding-bottom:10px;

    border-bottom:1px solid rgba(0,0,0,.08);

}

/* ========================================= */
/* TEXTO */
/* ========================================= */

p{

    line-height:1.8;

    font-size:15px;

}

li{

    line-height:1.7;

}

/* ========================================= */
/* AVATAR */
/* ========================================= */

.avatar{

    width:170px;

    display:block;

    margin:auto;

    border-radius:50%;

    border:5px solid white;

    box-shadow:
        0 10px 20px rgba(0,0,0,.20);

}

/* ========================================= */
/* GIF */
/* ========================================= */

.gif{

    width:100%;

    border-radius:10px;

}

/* ========================================= */
/* FOOTER */
/* ========================================= */

footer{

    margin-top:45px;

    text-align:center;

    color:#555;

    opacity:.8;

    font-size:14px;

    padding-bottom:20px;

}

/* ========================================= */
/* BOTON ARRIBA */
/* ========================================= */

#topBtn{

    position:fixed;

    bottom:25px;

    right:25px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:white;

    box-shadow:
        0 10px 20px rgba(0,0,0,.15);

    font-size:22px;

    transition:.3s;

}

#topBtn:hover{

    transform:translateY(-4px);

}

/* ========================================= */
/* SCROLL */
/* ========================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ffeef7;

}

::-webkit-scrollbar-thumb{

    background:#d6b6c7;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#c69ab1;

}

/* ========================================= */
/* ANIMACION */
/* ========================================= */

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:900px){

.main-layout{

    grid-template-columns:1fr;

}

aside{

    position:static;

}

.banner{

    height:180px;

}

h1{

    font-size:32px;

}

}