/*reset*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-style: none;
}

body {
    font-family: "Jersey 10", sans-serif;
    font-weight: normal;
    font-style: normal;
    overflow-x: hidden;
}

:root {

--backgroundcolor: #1e3a22;
--fontsizeh3 : 2.2rem;
--fontsizep : 2.5rem;
--fontsizeh1: min(12vw, 12pc);

}

header nav {
    background-color: #2e6f57;
}

header nav .navegacion{
    display: flex;
    justify-content: space-between;
    margin: auto;
    width: 90%;
    align-items: center;

}

header nav .navegacion a {
    color: white;
    text-decoration: none;
}

header nav .navegacion .logo {
    font-size: 5rem;

}

header nav .navegacion .directorio a {
    padding-left: 10px;
}

header nav .navegacion  {
    list-style: none;
    font-size: 2.5rem;
}

header nav .navegacion .dropbtn {
    visibility: hidden;
    display: none;
}

/*Seccion 1 intro*/


main .profesional {
    background-color:var(--backgroundcolor);
}
main .profesional {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

main .profesional .borde1 {
    position: absolute;
    left: -718px;
    top: 5.3rem;
    width: 1154px;
    height: 720px;
    animation: fadeInLeft;
    animation-duration: 1s;
    overflow-x: hidden;
    
}

main .profesional .borde2 {
    position: absolute;
    animation: fadeInRight;
    animation-duration: 1s;
    right: -718px;
    top: 5.3rem;
    width: 1154px;
    height: 720px;
    overflow-x: hidden;
    

}

main .profesional .containerinicio {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background: linear-gradient(180deg, rgba(161, 193, 165, 0) 0%,rgba(161, 193, 165, 1) 50%,rgba(161, 193, 165, 0) 100%);
    overflow: hidden;
    padding: 3rem;
    gap: 5rem;
    position: relative;
    margin: auto;
}

main .profesional .containerinicio .descripcionizquierda {
    background-color: #f0dfee;
    padding: 2rem;
    text-align: left;
    width: 100%;
    position: relative;
    box-shadow: 5px 8px 0px 0px black;
    width: 39rem;
    
} 

main .profesional .containerinicio .descripcionizquierda .rectangulo {
    width: 2rem;
    height: 68ch;
    position: absolute;
    left: -2rem;
    z-index: 0;
    background-color: #f0dfee;
    box-shadow: 0px 8px 0px 0px black;
    
}

main .profesional .containerinicio .descripcionizquierda .rectangulo2 {
    width: 2rem;
    height: 68ch;
    position: absolute;
    right: -2rem;
    z-index: 1;
    background-color: #f0dfee;
    box-shadow: 5px 8px 0px 0px black;
}

main .profesional .containerinicio .descripcionizquierda .nombreinicio .nombreicon p {
    font-size: var(--fontsizep);
    font-weight: normal;
}

main .profesional .containerinicio .descripcionizquierda .nombreinicio .nombreicon {
    display: flex;
    gap: 20px;
    position: absolute;
    align-items: center;
    flex-wrap: nowrap;
    width: 500px;
    max-width: 500px; 
}

main .profesional .containerinicio .descripcionizquierda .nombreinicio .nombreicon .icons {
    display: flex;
    gap: 20px;
}

main .profesional .containerinicio .descripcionizquierda .nombreinicio .nombreicon .icons img {
    width: 100%;
    max-width: 40px;
    height: auto;
}


main .profesional .containerinicio .descripcionizquierda .nombreinicio h2 {
    font-size: 10rem;
    font-weight: normal;
    line-height: 0.6;
    color: #0f6409;
    text-shadow: 4px 4px black;
    padding-top: 5rem;
    overflow: hidden;
    padding-bottom: 2rem;
}

main .profesional .containerinicio .descripcionizquierda .descirpcioninicio p{
    font-size: var(--fontsizep);
    line-height: 0.8;
    padding-top: 10px;
}

main .profesional .containerinicio .descripcionderecha img {
    width: 450px;
    height: 450px;
    border-radius: 100%;
    border-style: solid;
    border-width: 1rem;
    border-color: #0f6409;
    animation-name: spin;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
    
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

main .profesional .containerinicio .descripcionderecha {
    align-self: center;
    justify-self: center;
    box-shadow: 5px 4px 0px 5px black;
    border-radius: 100%;
    width: 450px;
    height: 450px;
}

/*Estudios*/
.educacion {
    background-color: var(--backgroundcolor) ;
    padding-bottom: 5rem;
}

.educacion .educacioncontainer {
    text-align: center;
    width: 80%;
    margin: auto;
    padding-bottom: 2rem;
    background: linear-gradient(to left, rgba(209, 234, 213, 0) 0%,rgba(122, 180, 131, 0.5) 50%,rgba(122, 180, 131, 0) 100%);

}

.educacion .educacioncontainer .tituedu {
    font-size: 3rem;
    padding-bottom: 3rem;
    color: white;
    padding-top: 2rem;
}

.educacion .educacioncontainer .detalleeducacion{
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

/*edu1*/

.educacion .educacioncontainer .detalleeducacion .edu1 {
    position: relative;
    animation: fadeIn;
    animation-duration: 1s;
}

.educacion .educacioncontainer .detalleeducacion .edu1 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 100%;
    outline: 20px solid rgba(255, 255, 255, 0.459);
    outline-offset: -19px;
}


.educacion .educacioncontainer .detalleeducacion .edu1 .textoedu1 {
    position: absolute;
    top: 2.5rem;
    left: 2.3rem;
    color: white;
    padding-top: 25px;
    padding-bottom: 10px;
    width: 230px;
}

.educacion .educacioncontainer .detalleeducacion .edu1 .circulorojo {
    background-color: #6f2e2e80;
    position: absolute;
    width: 230px;
    height: 230px;
    top: 35px;
    left: 35px;
    border-radius: 100%;
}

.educacion .educacioncontainer .detalleeducacion .edu1 .textoedu1 h3 {
    font-size: var(--fontsizeh3);
    padding-bottom: 25px;
}


.educacion .educacioncontainer .detalleeducacion .edu1 .textoedu1 .cajablanca {
    position: absolute;
    width: 215px;
    height: 5px;
    background-color: white;
    top: 65px;
    left: 5px;
}

.educacion .educacioncontainer .detalleeducacion .edu1 .textoedu1 h4 {
    font-size: 1.6rem;
    padding-bottom: 20px;
}

.educacion .educacioncontainer .detalleeducacion .edu1 .textoedu1 p {
    font-size: var(--fontsizep);
    padding-bottom: 10px;
}

/*edu2*/

.educacion .educacioncontainer .detalleeducacion .edu2 {
    position: relative;
    animation: fadeIn;
    animation-duration: 1s;
}

.educacion .educacioncontainer .detalleeducacion .edu2 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 100%;
    outline: 20px solid rgba(255, 255, 255, 0.459);
    outline-offset: -19px;
}


.educacion .educacioncontainer .detalleeducacion .edu2 .textoedu2 {
    position: absolute;
    top: 2.3rem;
    left: 2.3rem;
    color: white;
    padding-top: 25px;
    width: 230px;
}

.educacion .educacioncontainer .detalleeducacion .edu2 .circulorojo {
    background-color: #6f2e2e80;
    position: absolute;
    width: 230px;
    height: 230px;
    top: 35px;
    left: 35px;
    border-radius: 100%;
}


.educacion .educacioncontainer .detalleeducacion .edu2 .textoedu2 h3 {
    font-size: var(--fontsizeh3);
    padding-bottom: 10px;
}


.educacion .educacioncontainer .detalleeducacion .edu2 .textoedu2 .cajablanca {
    position: absolute;
    width: 215px;
    height: 5px;
    background-color: white;
    top: 60px;
    left: 5px;
}


.educacion .educacioncontainer .detalleeducacion .edu2 .textoedu2 .cajablanca2 {
    position: absolute;
    width: 150px;
    height: 5px;
    background-color: white;
    top: 95px;
    left: 40px;
}

.educacion .educacioncontainer .detalleeducacion .edu2 .textoedu2 h4 {
    font-size: 1.6rem;
    padding-bottom: 20px;
}

.educacion .educacioncontainer .detalleeducacion .edu2 .textoedu2 p {
    font-size: var(--fontsizep);
    padding-bottom: 10px;
}

/*edu3*/

.educacion .educacioncontainer .detalleeducacion .edu3 {
    position: relative;
    animation: fadeIn;
    animation-duration: 1s;
}

.educacion .educacioncontainer .detalleeducacion .edu3 img{
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 100%;
    outline: 20px solid rgba(255, 255, 255, 0.459);
    outline-offset: -19px;
}


.educacion .educacioncontainer .detalleeducacion .edu3 .textoedu3 {
    position: absolute;
    top: 2.5rem;
    left: 2.3rem;
    color: white;
    padding-top: 25px;
    padding-bottom: 10px;
    width: 230px;
}

.educacion .educacioncontainer .detalleeducacion .edu3 .circulorojo {
    background-color: #6f2e2e80;
    position: absolute;
    width: 230px;
    height: 230px;
    top: 35px;
    left: 35px;
    border-radius: 100%;
}


.educacion .educacioncontainer .detalleeducacion .edu3 .textoedu3 h3 {
    font-size: var(--fontsizeh3);
    padding-bottom: 10px;
}


.educacion .educacioncontainer .detalleeducacion .edu3 .textoedu3 .cajablanca {
    position: absolute;
    width: 215px;
    height: 5px;
    background-color: white;
    top: 60px;
    left: 5px;
}

.educacion .educacioncontainer .detalleeducacion .edu3 .textoedu3 .cajablanca2 {
    position: absolute;
    width: 150px;
    height: 5px;
    background-color: white;
    top: 95px;
    left: 40px;
}

.educacion .educacioncontainer .detalleeducacion .edu3 .textoedu3 h4 {
    font-size: 1.6rem;
    padding-bottom: 20px;
}

.educacion .educacioncontainer .detalleeducacion .edu3 .textoedu3 p {
    font-size: var(--fontsizep);
    padding-bottom: 10px;
}

/*Lo que se*/

.know {
    background-color: var(--backgroundcolor);
    padding-bottom: 5rem;
}

.know .containerknows {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(97, 147, 106, 0) 0%,rgba(67, 12, 12, 0.63) 50%,rgba(97, 147, 106, 0) 100%);
    align-items: center;
}

.know .containerknows .titulo {
    text-align: center;
    color: white;
    font-size: 3rem;
    padding-bottom: 2rem;
}

.know .containerknows .containergrid {
    display: flex;  
    width: 70%;
    gap: 20px;
}

.know .containerknows .containergrid .gridizquierda {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.know .containerknows .containergrid .gridizquierda .edicionimagen {
    background-color: #3d191a;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
    color: white;
}

.know .containerknows .containergrid .gridizquierda .edicionimagen h2 {
    font-size: 3rem;
}

.know .containerknows .containergrid .gridizquierda .edicionimagen li {
    font-size: 2rem;
}

.know .containerknows .containergrid .gridizquierda .edicionimagen ul {
    list-style-position: inside;
}

.know .containerknows .containergrid .gridizquierda .conocimientos {
    background-color: #3d191a;
    padding-left: 25px; 
    padding-bottom: 20px;
    color: white;
}

.know .containerknows .containergrid .gridizquierda .conocimientos h2 {
    font-size: 2rem;
    padding-top: 10px;
}

/*derecha*/

.know .containerknows .containergrid .gridderecha {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.know .containerknows .containergrid .gridderecha .programacion {
    background-color: #3d191a;
    padding-left: 20px;
    color: white;
    padding-bottom: 20px;

}

.know .containerknows .containergrid .gridderecha .programacion h2 {
    font-size: 3rem;
}

.know .containerknows .containergrid .gridderecha .programacion li {
    font-size: 2rem;
}

.know .containerknows .containergrid .gridderecha .programacion ul {
    list-style-position: inside;
}

.know .containerknows .containergrid .gridderecha .conocimientos {
    background-color: #3d191a;
    padding-left: 20px;
    padding-bottom: 20px;
    color: white;

}

.know .containerknows .containergrid .gridderecha .conocimientos h2 {
    font-size: 2rem;
    padding-top: 10px;
}

/*contacto*/

.contactoend {
    background: linear-gradient(to bottom, rgba(30, 58, 34, 1) 0%,rgba(67, 12, 12, 1) 100%);
    padding-bottom: 20px;
}

.contactoend .containercon {
    display: flex;
    justify-content: center;
}

.contactoend .containercon .containercontacto .titulo {
    color: white;
    font-size: 3rem;
    text-align: center;
    padding-bottom: 20px;
}

.contactoend .containercon .forma #name {
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: rgb(107, 107, 107);
    width: 25rem;
}

.contactoend .containercon .forma #name:focus {
    color: black;
    border-color: rgb(28, 102, 32);
    outline: #0f6409;
}

.contactoend .containercon .forma #mail {
    padding: 10px 10px 10px 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: rgb(107, 107, 107);
    width: 25rem;
}

.contactoend .containercon .forma #mail:focus {
    color: black;
    border-color: rgb(28, 102, 32);
    outline: #0f6409;
}

.contactoend .containercon .forma #text {
    padding: 10px 50px 10px 10px;
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: rgb(107, 107, 107);
    width: 25rem;
    height: 15rem;
}

.contactoend .containercon .forma #text:focus {
    color: black;
    border-color: rgb(28, 102, 32);
    outline: #0f6409;
}

.contactoend .containercon .forma .botoncontainer {
    display: flex;
    justify-content: center;
}

.contactoend .containercon .forma .botoncontainer #boton {
    font-size: 1.3rem;
    padding: 10px;
    background-color: #84ca88;
    border-radius: 5px;
    border-color: none;
    border-width: 0px;
}

.contactoend .containercon .forma .botoncontainer #boton:hover {
    background-color: #4c8f50;
}

footer {
    background-color: var(--backgroundcolor);
}

footer .footercontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 300;
    font-size: 1.2rem;
}

/*pagina proyectos*/

main {
    background-color: var(--backgroundcolor);

}

main .tituloprojectos {
    display: flex;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    width: 90%;
    margin: auto;
    text-decoration-line: underline;
    padding-top: 1rem;   
}

/*projecto uni*/
.projectuni .containerprojecuni {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem;
}

.projectuni .containerprojecuni h2 {
    font-size: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    color: white;
}

.projectuni .containerprojecuni .containerunigrid {
    max-width: 80%;
    margin: auto;
}

.projectuni .containerprojecuni .containerunigrid .unigrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px;
}

.projectuni .containerprojecuni .containerunigrid .unigrid .pagina {
    background-color: white;
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.projectuni .containerprojecuni .containerunigrid .unigrid .pagina img {
    width: 100%;
    max-height: 200px;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.projectuni .containerprojecuni .containerunigrid .unigrid .pagina a {
    filter: blur(2px);
}

.projectuni .containerprojecuni .containerunigrid .unigrid .pagina a:hover {
    width: 100%;
    max-height: 300px;
    height: 100%;
    border-radius: 20px;
    animation: 0.25s linear forwards reveal;
}

@keyframes reveal { 
    from { filter:blur(2px); } to { filter:blur(0px); } 
}

.projectuni .containerprojecuni .containerunigrid .unigrid .pagina figcaption {
    text-align: center;
    font-size: var(--fontsizeh3);
}

/*personal*/

.personalproject .containerpersonal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5rem;
}

.personalproject .containerpersonal h2 {
    font-size: 2rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    color: white;
}

.personalproject .containerpersonal .containerunigrid {
    max-width: 80%;
    margin: auto;
}

.personalproject .containerpersonal .containerunigrid .unigrid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px;
}

.personalproject .containerpersonal .containerunigrid .unigrid .pagina {
    background-color: white;
    padding: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.personalproject .containerpersonal .containerunigrid .unigrid .pagina img {
    width: 100%;
    max-height: 200px;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.personalproject .containerpersonal .containerunigrid .unigrid .pagina a {
    filter: blur(2px);
}

.personalproject .containerpersonal .containerunigrid .unigrid .pagina a:hover {
    width: 100%;
    max-height: 300px;
    height: 100%;
    border-radius: 20px;
    animation: 0.25s linear forwards reveal;
}

@keyframes reveal { 
    from { filter:blur(2px); } to { filter:blur(0px); } 
}

.personalproject .containerpersonal .containerunigrid .unigrid .pagina figcaption {
    text-align: center;
    font-size: var(--fontsizeh3);
}