html {
    scroll-behavior: smooth;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
    overflow-x: hidden;
    overflow-y: hidden;
}


#content {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    background-image: url('./img/fondo.png');
    background-repeat: repeat;
    background-attachment: fixed;

}

#content-header {
    width: 100%;
    height: 380px;
    background: black;

}

header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    background: black;
    color: white;
    overflow-x: hidden;
}

@keyframes scroll {

    0% {

        opacity: 0;
    }

    100% {
        opacity: 1;

    }

}

.ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    margin: 0px;
    margin-right: 5%;
    list-style: none;
}


.ul>li {

    padding: 10px;
    margin-top: 10px;
    transition: all 300ms;


}

.ul li>a {
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 3px;
    cursor: pointer;
    color: white;
    padding: 5px;
    transition: all 300ms;

}

.ul li:hover a {

    text-shadow: 0px 1px 10px white;
    box-shadow: 1px 0px 1px #ccc inset;

}


#curriculo {
    background: #568ae6;
    color: white;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 300ms;
}

#curriculo:hover {
    background: #1d58bd;

}

#figura img {

    display: block;
    width: 75%;
    height: 100%;
    border-radius: 43px;

}

#logo {
    display: block;
    width: 12%;
    font-size: 1500%;
    cursor: pointer;
    animation: logo 2s linear infinite;
}

@keyframes logo {
    0% {
        text-shadow: 0px 0px 5px white;
    }

    50% {
        text-shadow: 0px 0px 5px gray;
    }

    100% {
        text-shadow: 0px 0px 5px white;
    }
}


#presentacion {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 74%;
    text-shadow: 1px 0px 1px gray, 1px 0px 1px white;
    transition: 300ms;
    overflow-x: hidden;
}

#figura {
    width: 20%;
    height: 70%;
    border-radius: 50px;
}



@keyframes nombre {
    0% {
        opacity: 0;
        right: 0%;
        overflow-x: hidden;
    }

    100% {
        right: 10%;
        opacity: 1;
        text-shadow: 3px 0px 5px gray, 2px 0px 3px white;
    }
}

h1 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5px;
    padding: 10px;
    width: 100%;
    background: black;
    color: white;
}

h3 {
    font-size: 20px;
    text-align: center;
    letter-spacing: 5px;
    margin: 5px;
}

#presentacion .cajaNombre {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#presentacion h3 {
    margin: 0px;
    overflow: hidden;
    font-size: 25px;
}

#presentacion .nombres {
    color: white;
    font-size: 30px;
    margin-bottom: 10px;
}

/* content section*/

.section {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.proyectos {
    width: 100%;
    opacity: 0;
}

.contacto {
    width: 100%;
}

#tecnologias {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#tecnologias-content {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-evenly;
}

#tecnologias-content div {
    width: 50%;
}

#tecnologias-content ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
}


#tecnologias h5 {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

#tecnologias li {
    font-size: 20px;
    padding: 5px;
}

.imagenes {
    width: 90px;
    height: 80px;
    margin-left: 20px;
    animation: logos 4s linear;
}


@keyframes logos {

    0% {
        opacity: 0;

    }

    100% {
        opacity: 1;

    }
}


#acercaDeMi {

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    letter-spacing: 1px;
}

#sobreMi {
    display: flex;
    flex-flow: column wrap;
    width: 40%;

}

#acercaDeMi div h1 {

    color: black;
    font-size: 30px;
    background: none;


}

#acercaDeMi div p {
    font-size: 20px;
    text-align: justify;
}

#acercaDeMi div p:nth-child(2) {
    margin-bottom: 0px;
}


footer {

    align-self: flex-end;
    margin-top: 50px;
    color: white;
    text-align: center;
    background: black;
    width: 100%;
    height: 50px;
}



/* contacto*/


#formContacto {

    display: flex;
    flex-flow: column wrap;
    flex-grow: 1;
    width: 100%;
    justify-content: space-around;
}

#formContacto div {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

#formContacto div form {
    display: flex;
    width: 35%;
    height: 570px;
    background: rgba(108, 99, 255, 0.5);

    margin: 0px auto;
    flex-flow: column wrap;
    padding: 20px;
    box-shadow: 0px 0px 4px black;
    border-radius: 10px;

}

h2 {
    color: white;
    font-size: 30px;
    font-weight: bold;
}

label {
    color: black;
    font-weight: bold;
    font-size: 16px;

}

#formContacto p {
    font-size: 20px;
    text-align: center;
    display: block;
    text-align: center;
    width: 70%;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 30px;
}



input[type="text"],
input[type="email"] {
    padding: 18px;
    border-radius: 8px;
}

input[type="submit"] {
    padding: 8px;
    margin: 8px;
    background: rgb(19, 194, 42);
    color: white;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 2px;
    transition: all 300ms;
    border-radius: 3px;

}

textarea {
    height: 180px;
}

input[type="submit"]:hover {

    background: rgb(17, 233, 46);

}



textarea {

    min-height: 100px;
    padding: 5px;
    border-radius: 5px;
}


#cards-content {
    display: flex;
    flex-flow: row wrap;
    flex-grow: initial;
}

.cards {
    display: flex;
    flex-flow: column wrap;
    max-width: 330px;
    background: #00000000;
    padding: 10px;
    margin: 40px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 300ms;
    text-align: center;
    box-shadow: 1px 0px 3px black, 0px 1px 3px gray;
}

.cards:hover {
    box-shadow: 1px 1px 5px black;
}

.cards:hover {
  
}


.cards>img {
    width: 80%;
    height: 180px;
    margin: 0px auto;
    border-radius: 15px;
}

.cards .mexico {
    background-color: black;
}

.cards p {

    font-family: sans-serif;
    font-size: 14px;
    text-align: justify;
    transition: all 300ms;
}

.box {
    transition: all 1s;
    opacity: 0;
}

.animado {
    animation: ani 1s;
    opacity: 1 !important;
}

@keyframes ani {

    0% {
        transform: translateY(100px);
    }

    100% {
        transform: translateY(0);
    }
}

.iframes {
    width: 100%;
    height: 800px;
    border: none;

}

/*pasador */

.pasador {
    display: flex;
    background: transparent;
    width: 50px;
    height: 20px;
    border-radius: 50px;
    background-color: transparent;
    border: 2px solid white;
    margin-left: 20px;
}

.btn_pasador {
    display: flex;
    width: 50%;
    background: url('../assets/img/es.jpg');
    border-radius: 50px;
    background-size: 20px 20px;
    cursor: pointer;
}

.idioma {
    display: flex;
    width: 50%;
    color: white;
    padding: 3px;
}

.banderaES {
    background: url('../assets/img/es.jpg');
    background-size: 20px 20px;
}

.banderaEN {
    background: url('../assets/img/en.jpg');
    background-size: 20px 20px;
}

.modal{
    display: flex;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 3565px;
    background: #00000099;
}
.contentModal{
    background: white;
    color: black;
    min-width: 320px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    margin-top: 350px;
}

.modal div h2{
    color: black;
}


.modal div div{
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    align-items: center;
    min-width: 320px;
    background: white;
}

.btnModal{
    min-width: 90px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    background: #568ae6;
    color: white;

}
.btnModal:hover{
    opacity: 0.8;
}
.hideModal{
    display: none;
}

.showScroll{
    overflow-y: scroll;
}

#btnInicio{
    position: absolute;
    width: 0px;
    height: 0px;
    background: transparent;
}