html {
    scroll-behavior: smooth;
    font-family: 'Monserrat', sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #f3f3f3;
}

p {
    margin: 0;
}

/* body {
    background: rgb(34, 175, 195);
    background: linear-gradient(45deg, rgba(34, 175, 195, 1) 0%, rgba(208, 45, 253, 1) 100%);
    background-repeat: no-repeat;
} */

.rounded {
    border-radius: 1rem !important;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding-top: 1.5rem; */
}

.navbar-nav {
    align-items: center;
    justify-content: end;
}

.navbar__logo {
    font-weight: 600;
    font-size: 1.2rem;
    text-decoration: none;
    color: #1e1e1e;
}

.navbar__logo__span {
    color: #375ad8;
}

.navbar__nav__list {
    display: flex;
    list-style: none;
    gap: 1rem;
}




.nav-link {
    text-decoration: none;
    color: #777777;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
}

.nav-link:hover {
    color: #375ad8 !important;
}


.active {
    color: #375ad8 !important;
}


.home {
    display: flex;
    width: 100%;
    gap: 1rem;
    /* padding-top: 5rem; */
}

.home__aboutme {
    width: 65%;
    height: auto;
    min-height: 50vh;
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    padding: 1rem;
    gap: 2rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: #0037b8;
    background-image: radial-gradient(at 61% 50%, hsla(273, 88%, 70%, 1) 0, hsla(273, 88%, 70%, 0) 50%),
        radial-gradient(at 64% 44%, hsla(64, 86%, 60%, 1) 0, hsla(64, 86%, 60%, 0) 50%),
        radial-gradient(at 57% 22%, hsla(318, 90%, 68%, 1) 0, hsla(318, 90%, 68%, 0) 50%),
        radial-gradient(at 89% 32%, hsla(342, 94%, 60%, 1) 0, hsla(342, 94%, 60%, 0) 50%),
        radial-gradient(at 21% 45%, hsla(257, 95%, 52%, 1) 0, hsla(257, 95%, 52%, 0) 50%),
        radial-gradient(at 84% 24%, hsla(279, 91%, 58%, 1) 0, hsla(279, 91%, 58%, 0) 50%),
        radial-gradient(at 56% 69%, hsla(194, 93%, 54%, 1) 0, hsla(194, 93%, 54%, 0) 50%);


}

.home__aboutme__description {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.home__aboutme__description__header {
    padding: 0 2rem;
}

.home__aboutme__description__paragraph {
    padding: 0 2rem;
    font-size: 1.2rem;
}

.home__aboutme__links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.home__aboutme__links__link__contact {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.5rem 1.8rem;
    border: 2px solid #ffffff !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
}


.home__aboutme__links__link__icon {
    color: white;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.3rem 3rem;
    border: 2px solid #ffffff !important;
    border-radius: .75rem;
    transition: all .3s ease-in-out;
    background-color: rgba(255, 255, 255, 0.2);
}


.home__aboutme__link {}

.home__aboutme__photo {
    display: flex;
    width: 35%;
    height: auto;
    min-height: 50vh;
}

.home__aboutme__photo__link {
    display: flex;
    width: 100%;
    height: 100%;
    background-image: url(img/yo.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50px;
    border-radius: 47px;
}



.hobbies__section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
}

.hobbies__title {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 800;
    text-align: start;
    color: #1e1e1e;
}


.hobbies__cards {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    grid-auto-rows: auto;
    gap: 1rem;
}


.hobbies__hobbie {
    font-size: 1.2rem;
    font-weight: 600;
    /* background: rgba(140, 140, 140, 0.2); */
    background-color: transparent;
    border: 4px solid #375ad8;

    color: #1e1e1e;
    padding: 1.8rem 1rem;
    transition: all .5s linear;

    text-align: center;

}

.hobbies__hobbie:nth-child(1) {
    background-color: #375ad8;
    color: white;
    border: none;
    font-size: 1.8rem;
    font-weight: 600;
    background: rgb(0, 55, 184);
    background: linear-gradient(45deg, rgba(0, 55, 184, 1) 56%, rgba(15, 131, 218, 1) 78%);

}

.skills_section {
    margin-top: 1rem;
}

.skills {
    text-align: center;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 2fr));
    grid-auto-rows: auto;
    gap: 1rem;
}

.skills__skill {
    display: flex;
    padding: 1rem;
    /* background: rgba(140, 140, 140, 0.2); */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid #375ad8;
    /* transition: all .3s ease-in-out; */
    align-items: center;
    position: relative;
    overflow: hidden;
}

.skills__skill:before {
    content: "";
    position: absolute;
    background: #375ad8;
    width: 500px;
    height: 550px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 40%;
    animation: fill 5s ease-in-out forwards;
}

.skills__skill:nth-child(1) {
    color: white;
    font-size: 1.8rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    justify-content: center;
}

.skills__skill:nth-child(1) p {
    z-index: 999;
}

@keyframes fill {
    from {
        top: 100px;
        transform: translateX(-50%) rotate(0deg);
    }

    to {
        top: -50px;
        transform: translateX(-50%) rotate(360deg);
    }
}

.skills__skill__icon {
    width: 100%;
    /* max-width: 72px;
    max-height: 72px; */
    font-size: 4rem;
    z-index: 999;
    color: #ffffff;
}





/* .projects_section {
    display: flex;
    margin-top: 3rem;
    flex-direction: column;
    height: auto;
}

.projects {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 60vh;
    flex-wrap: wrap;
    gap: 1rem;
}

.projects__project {
    display: flex;
    width: calc(50%-20px);
    margin: 10px 10px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    background-color: #375ad8;
} */







.projects_section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 5em 2rem;
}

/* #projects .projects-header {
    width: 65%;
    align-items: start;
    text-align: start;

}

#projects h2 {
    margin: 0;
    padding: 0 0 2em 0;
    text-align: left;
} */

.projects {
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.projects__project {
    width: 100%;
    min-height: 40vh;
    padding: 1.5em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* background: rgba(140, 140, 140, 0.2); */
    background-color: #ffffff;
    border: 4px solid #ffffff;

    gap: 1rem;
    /* border-left: 5px solid #375ad8; */
    /* box-shadow: 0px 0px 17px 3px rgba(0, 0, 0, 0.1); */
    transition: all .5s linear;
}

/* .projects__project:hover {
    box-shadow: -1rem 1rem 0 -0.4rem #375ad8;
    transform: translateY(-0.4rem);
    transform: translateX(0.4rem);
} */

.projects__project:hover .projects__project__image {
    background-position: bottom;

}


.projects__project__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top;
    overflow: hidden;
    /* border: 3px solid #375ad8; */
    box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1);
    transition: linear 8s;
}

.projects__project__image-1 {
    background: url(img/medBlog-full.png);
    background-size: cover;
    background-position: top;
}

.projects__project__image-2 {
    background: url(img/car-rental.jpg);
    background-size: cover;
    background-position: top;
}

.projects__project__image-3 {
    background: url(img/ecom.f10b3cdd799be85c19da.webp);
    background-size: cover;
    background-position: top;
}

.projects__project__image-4 {
    background: url(img/gymate-home.52d00d03c15713c601c4.webp);
    background-size: cover;
    background-position: top;
}

.projects__project__image img {
    border-radius: 20px;
    width: 50%;
    height: auto;

}

.projects__project__image-1 img:hover {
    transform: translate3d(0px, -155px, 0px);
}

.projects__project__description {
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.projects__project__description__title {
    font-size: 1.5rem;
    color: #1e1e1e;
}

.projects__project__description__tags {
    display: flex;
    justify-content: center;
    gap: 1em;
    padding: .8rem 0 .5em 0;
}

.projects__project__description__tag {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font-size: .7em;
    font-weight: 600;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}

.projects__project__description__links {
    display: flex;
    margin-top: .5em;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.projects__project__description__link {
    font-size: 1em;
    font-weight: 800;
    text-decoration: none;
    color: #1e1e1e;
    transition: all .3s ease-in-out;
}

.projects__project__description__link__icon:hover {
    color: #375ad8;
}

.projects__project__description__link__icon {
    padding-left: .3em;
    font-size: 1.5em;
    font-weight: 600;
}







.educations_section {
    display: flex;
    flex-direction: column;
    /* padding: 5rem 0; */
}

.educations {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    gap: 1.5rem;

}

.educations__education {
    background-color: transparent;
    border: 4px solid #375ad8;
    color: #1e1e1e;
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.educations__education__img {
    width: auto;
    height: 6rem;
}

.educations__education__description {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.educations__education__description__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.educations__education__description__platform {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.educations__education__description__date {
    margin: 0;
}

.educations__education__certificate {
    background-color: #1e1e1e;
    color: #e2e2e2;
    height: auto;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 50px;
    cursor: pointer;
    padding: 1rem 1.6rem;
    text-decoration: none;
}

.educations__education__certificate:hover {
    background-color: #375ad8;
}


.formcontact {

    display: flex;
    width: 90vw;
    height: auto;
    margin: 3rem auto;
    justify-content: center;
    align-items: center;
    padding: 2rem 2rem;
    background-color: #0037b8;
    background-image: radial-gradient(at 61% 50%, hsla(273, 88%, 70%, 1) 0, hsla(273, 88%, 70%, 0) 50%),
        radial-gradient(at 64% 44%, hsla(64, 86%, 60%, 1) 0, hsla(64, 86%, 60%, 0) 50%),
        radial-gradient(at 21% 45%, hsla(257, 95%, 52%, 1) 0, hsla(257, 95%, 52%, 0) 50%),
        radial-gradient(at 56% 69%, hsla(194, 93%, 54%, 1) 0, hsla(194, 93%, 54%, 0) 50%),
        radial-gradient(at 89% 32%, hsla(342, 94%, 60%, 1) 0, hsla(342, 94%, 60%, 0) 50%),
        radial-gradient(at 57% 22%, hsla(318, 90%, 68%, 1) 0, hsla(318, 90%, 68%, 0) 50%),
        radial-gradient(at 84% 24%, hsla(279, 91%, 58%, 1) 0, hsla(279, 91%, 58%, 0) 50%);
    border-radius: 20px;
}

.formcontact__contact {
    padding: 1rem;
    border-radius: 20px;
    display: flex;
}

.formcontact__text {
    display: flex;
    width: 100%;
    flex-direction: column;
    text-align: center;
    color: #ffffff;
}

.formcontact__input {
    align-items: center;
    padding: 1rem;
    border: 4px solid #ffffff;
    color: #ffffff;
    margin: .5rem 0;
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 800;
}

.formcontact__input:focus {
    outline: #ffffff;
}

.formcontact__input::placeholder {
    color: #ffffff;
}


.formcontact__message {
    display: flex;
    flex-direction: column;
}

.formcontact__input__asunto {}

.formcontact__textarea {
    color: #ffffff;
    padding: 1rem;
    margin: .5rem 0 0 0;
    resize: none;
    border: 4px solid #ffffff;
    font-weight: 800;
    background-color: rgba(255, 255, 255, 0.2);
    ;
}

.formcontact__textarea::placeholder {
    color: #ffffff;
}

.formcontact__textarea:focus {
    outline: #375ad8;
}

.formcontact__boton {
    color: #ffffff;
    background-color: transparent;
    border: 4px solid #ffffff;
    border-top: none;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    font-weight: 800;
    padding: .8rem 2rem;
    margin-top: 0;
    align-self: center;
    cursor: pointer;
    transition: all .2s linear;
    font-size: 1.5rem;
}

.formcontact__boton:hover {
    background-color: rgba(255, 255, 255, 0.2);
}


.formcontact__form {
    display: flex;
    flex-direction: column;
}


/* .raise:hover,
.raise:focus {
    box-shadow: -0.8rem .8rem 0 -0.4rem #375ad8;
    transform: translateY(-0.25rem);
} */

.button3D {
    background-color: transparent;
    border-radius: .75rem;
    transform: translate(-4px, 4px);
    transition: .2s linear;

}

.button3D:hover {
    box-shadow: -4px 4px #ffffff;
    transform: translate(0, 0);
}

.button3D-alt {
    border-radius: .75rem;
    transform: translate(-8px, 8px);
    transition: .2s linear;

}

.button3D-alt:hover {
    box-shadow: -8px 8px #375ad8;
    transform: translate(0, 0);
}

@media (max-width: 991px) {

    .sidebar {
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(50px);

    }

    .nav-link {
        color: #ffffff;
        border-bottom: 1px solid #fff;
        font-size: 40px !important;
    }

    .home__aboutme__links__link__contact {
        width: 70%;
    }


}


@media (max-width: 767px) {

    .navbar {
        flex-direction: column;
    }

    .projects__project {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        height: 600px;
    }

    .home {
        flex-direction: column-reverse;
    }

    .home__aboutme {
        width: 100%;
    }

    .home__aboutme__photo {
        display: flex;
        height: 50px;
        min-height: 30vh;
        width: 100%;
    }




    .projects__project__image {
        width: 100%;
        height: 60vh;
    }

    .projects__project__description {
        width: 100%;
        height: auto;
    }

    .educations__education {
        flex-direction: column;
    }


    .projects__project:nth-child(2) {
        flex-direction: column-reverse;
    }

    .projects__project:nth-child(4) {
        flex-direction: column-reverse;
    }


}