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

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

body{

    font-family:"Poppins",sans-serif;
    background:#0b0b0b;
    color:#fff;

}

/*======================
       HEADER
======================*/

header{

    width:100%;
    height:80px;

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

    padding:0 8%;

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

}

.logo{

    font-size:26px;
    font-weight:700;

    color:#2dff75;

}

nav{

    display:flex;
    gap:35px;

}

nav a{

    text-decoration:none;
    color:#fff;
    transition:.3s;

}

nav a:hover,
nav .active{

    color:#2dff75;

}

/*======================
       SOBRE MI
======================*/

.about{

    width:100%;
    min-height:calc(100vh - 80px);

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

    padding:80px 8%;

    gap:70px;

}

.about-text{

    flex:1;

}

.about-text h1{

    font-size:52px;

    color:#2dff75;

    margin-bottom:30px;

}

.about-text p{

    color:#c7c7c7;

    line-height:1.9;

    margin-bottom:20px;

    font-size:17px;

}

.skills{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}

.skills span{

    padding:12px 22px;

    border:1px solid #2dff75;

    border-radius:30px;

    color:#2dff75;

    transition:.3s;

}

.skills span:hover{

    background:#2dff75;

    color:#000;

}

.about-image{

    flex:1;

    display:flex;

    justify-content:flex-end;

}

.about-image img{

    width:420px;

    border-radius:20px;

    border:4px solid #2dff75;

    object-fit:cover;

    box-shadow:0 0 30px rgba(45,255,117,.25);

}