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

body{
    background:#050505;
    color:white;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
}

/* HERO */

/* HERO */

.hero{

    min-height:85vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    position:relative;
    overflow:hidden;

    background-image:
        linear-gradient(
            rgba(0,0,0,.25),
            rgba(0,0,0,.40)
        ),
        url('../img/chanel-1.png');

    background-size:103%;
    background-position:center 20%;
    background-repeat:no-repeat;
}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.40) 12%,
            rgba(0,0,0,0) 25%,
            rgba(0,0,0,0) 75%,
            rgba(0,0,0,0.40) 88%,
            rgba(0,0,0,0.85) 100%
        );

    z-index:1;
}

.hero-content,
.profile-frame{

    position:relative;

    z-index:2;
}

.hero-content{

    padding-top:51vh;
}

.profile-frame{

    position:absolute;

    top:40px;

    left:50%;

    transform:translateX(-50%);

    width:220px;
    height:220px;

    border-radius:25px;

    overflow:hidden;

    border:4px solid rgba(255,255,255,.25);

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

    box-shadow:
        0 0 20px rgba(41,98,255,.5),
        0 0 40px rgba(255,45,189,.4);

    z-index:10;
}

.profile-photo{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.tagline{

    font-size:1.5rem;

    margin-bottom:15px;
}

.subtitle{

    color:#d0d0d0;

    font-size:1.2rem;

    margin-bottom:50px;
}
}

.socials{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    margin-bottom:45px;
}

.socials a{

    display:inline-flex;

    margin-left:25px;
    margin-right:25px;
}

.socials img{

    width:60px;
    height:60px;

    filter:brightness(0) invert(1);

    transition:.3s;
}

.socials img:hover{

    transform:scale(1.15);
}


/* DONAR */

.donate-container{
    margin-top:40px;
}

.donate-btn{

    margin-top:1px;

    display:inline-block;

    padding:18px 50px;

    border-radius:50px;

    font-size:1.2rem;

    font-weight:700;

    color:white;

    text-decoration:none;

    background:
        linear-gradient(
            90deg,
            #2962FF,
            #FF2DBD,
            #FF8A00
        );

    transition:.3s;
}

.donate-btn:hover{

    transform:translateY(-4px);
}



/* VIDEOS */

#videos{

```
max-width:1400px;

margin:auto;

padding:100px 20px;
```

}

#videos h2{

```
text-align:center;

font-size:2.5rem;

margin-bottom:50px;
```

}

#youtube-videos{

```
display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;
```

}

.video-card{

```
display:block;

text-decoration:none;

color:white;

background:#111;

border-radius:20px;

overflow:hidden;

border:1px solid rgba(255,255,255,.08);

transition:.3s;
```

}

.video-card:hover{

```
transform:translateY(-8px);

border-color:#FF2DBD;
```

}

.video-card img{

```
width:100%;

aspect-ratio:16/9;

object-fit:cover;
```

}

.video-info{

```
padding:20px;
```

}

/* ABOUT */


/* FOOTER */

footer{

margin-top:80px;

border-top:
1px solid rgba(255,255,255,.08);

padding:60px 20px;

text-align:center;


}

footer h3{


font-size:2rem;

margin-bottom:15px;

background:
linear-gradient(
    90deg,
    #2962FF,
    #FF2DBD,
    #FF8A00
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.footer-socials{

    display:flex;

    justify-content:center;

    gap:50px;

    margin:25px 0;
}

.footer-socials img{


width:36px;

height:36px;

filter:brightness(0) invert(1);


}

.copyright{

```
color:#777;
```

}
.profile-frame{

    position:absolute;

    top:80px;

    left:50%;

    transform:translateX(-50%);

    width:220px;
    height:220px;

    border-radius:25px;

    overflow:hidden;

    border:4px solid rgba(255,255,255,.25);

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

    box-shadow:
        0 0 20px rgba(41,98,255,.5),
        0 0 40px rgba(255,45,189,.4);

    z-index:10;
}


.profile-photo{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}
/* TABLET */

/* TABLET */

@media(max-width:1024px){

    #youtube-videos{
        grid-template-columns:repeat(2,1fr);
    }

    .profile-frame{

        width:180px;
        height:180px;
    }
}

/* MOVIL */

@media(max-width:768px){

    .hero{

        background-size:cover;
    }

    .hero-content{

        padding-top:50vh;
    }

    .profile-frame{

        width:160px;
        height:160px;

        top:20px;
    }

    .tagline{

        font-size:1.1rem;
    }

    .subtitle{

        font-size:1rem;
    }

    .socials{

        gap:25px;
    }

    .socials img{

        width:42px;
        height:42px;
    }

    #youtube-videos{

        grid-template-columns:1fr;
    }

    footer h3{

        font-size:1.5rem;
    }
}

/* MOVIL HORIZONTAL */

@media screen and (max-height:500px) and (orientation:landscape){

    .hero-content{

        padding-top:280px;
    }

    .profile-frame{

        width:110px;
        height:110px;

        top:10px;
    }

    .socials img{

        width:36px;
        height:36px;
    }

    .donate-btn{

        padding:10px 25px;
    }
}
@media (max-width:768px){

    .hero{
        background-size:160%;
        background-position:center;
    }

}