*{
    margin: 0;
    padding: 0;
}

body{
    background-image: linear-gradient(to bottom, #AAA492, #9A9483);
    
}

/*Estilos de los logos*/
.logo-ini{
    display: flex;
    position: absolute;
    top: 15px;
    left: 15px;   
}

.logo1{
    width: 45px;
    height: 45px;
}

.logo2{
    width: 40px;
    height: 45px;
    margin-left: 8px;
}

/*Estilos de la barra de navegacion*/
nav ul li a{
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
}

nav ul li .nav-link:hover{
    color: aqua;
}

/*Inicia los estilos del index.html*/
.titulo{
    width: 900px;
    margin-top: 7rem;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 30px;
}

header h1{
    transition: font-size 2s;
    -webkit-transition: font-size 2s;
    -moz-transition: font-size 2s;
    -ms-transition: font-size 2s;
    -o-transition: font-size 2s;
}

header h1:hover{
    font-size: 80px;
}

.contenido{
    display: flex;
    justify-content: space-around;
    margin-top: 60px;
    margin-bottom: 30px;
}

.html5-index{
    width: 400px;
    height: 400px;
    top: 18rem;
    left: 24rem;
    border: 4px solid black;
    border-radius: 5px;
}

.texto-1{
    width: 400px;
    text-align: justify;
    margin-top: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    transition:  color 2s;
    -webkit-transition:  color 2s;
    -moz-transition:  color 2s;
    -ms-transition:  color 2s;
    -o-transition:  color 2s;
}

.texto-1:hover{
    color: rgb(172, 49, 4);
}

.css3{
    width: 400px;
    height: 400px;
    left: 71rem;
    border: 4px solid black;
    border-radius: 5px;
    -webkit-border-radius:;
    -moz-border-radius:;
    -ms-border-radius:;
    -o-border-radius:;
}

.texto-2{
    width: 400px;
    text-align: justify;
    margin-top: 30px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    transition: color 2s;
    -webkit-transition: color 2s;
    -moz-transition: color 2s;
    -ms-transition: color 2s;
    -o-transition: color 2s;
}

.texto-2:hover{
    color: rgb(53, 53, 235);
}



/*Inicia los estilos del html5.html*/
.titulo-html{
    text-align: center;
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 50px;
    margin-top: 70px;
    margin-bottom: 40px;
}

.img-html5{
    display: inline-block;
    position: relative;
    left: 39rem;
    animation-duration: 6s;
    animation-name: aparecer;
    animation-iteration-count: infinite;
}

@keyframes aparecer{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.text-1-html{
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    line-height: 30px;
}

.text-1-html p{
    display: inline-block;
    position: relative;
    width: 1800px;
    left: 3rem;
    text-align: justify;
}

.html5-html-2 a{
    display: block;
    position: relative;
    width: 250px;
    text-decoration: none;
    left: 3rem;
    font-family: 'Roboto', sans-serif;
    color: orangered;
    font-size: 20px;
}


.text-2-html{
    display: block;
    position: relative;
    text-align: justify;
    width: 1800px;
    left: 3rem;
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    line-height: 30px;
    margin-top: 30px;
}

.img-codigo{
    display: block;
    margin-top: 60px;
}

.img-codigo img{
    width: 800px;
    height: 1200px;
    margin-left: 550px;
}

.arriba-html{
    display: block;
    text-align: center;    
    margin-top: 35px;
    margin-bottom: 25px;    
}

.arriba-html a{
    text-decoration: none;    
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 20px;
}

/*Inicia los estilos del css3.html*/
.titulo-css{
    text-align: center;
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 50px;
    margin-top: 70px;
    margin-bottom: 40px;
}

.img-css3{
    display: block;
    position: relative;
    margin-left: 600px;
    margin-bottom: 30px;
    animation-duration: 6s;
    animation-name: aparecer;
    animation-iteration-count: infinite;
}

@keyframes aparecer{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}


.img-css3 img{
    width: 720px;
    height: 640px;
}

.text-1-css{
    display: block;
    position: relative;
    text-align: justify;
    margin-left: 45px;
    margin-right: 45px;
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    line-height: 30px;
}

.css3-css a{
    text-decoration: none;
    margin-left: 45px;
    font-family: 'Roboto', sans-serif;
    color: orangered;
    font-size: 20px;
}

.text-2-css{
    display: block;
    position: relative;
    text-align: justify;
    margin-left: 45px;
    margin-right: 45px;
    margin-bottom: 100px;
    font-family: 'Roboto', sans-serif;
    font-size: 21px;
    line-height: 30px;
    margin-top: 30px;
}

.img-codigo-css{
    display: block;
}

.img-codigo-css img{
    width: 800px;
    height: 1200px;
    margin-left: 550px;
}

.arriba-css{
    display: block;
    text-align: center;    
    margin-top: 35px;
    margin-bottom: 25px;    
}

.arriba-css a{
    text-decoration: none;    
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 20px;
}

/*Inicia los estilos del blog.html*/
.titulo-blog{
    text-align: center;
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 60px;
    margin-top: 70px;
    margin-bottom: 40px;
}



.menu h3{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    /* font-size: 40px; */
    margin-bottom: 10px;
}

.menu .submenu li{
    text-align: center;
    list-style: none;
}


.menu ul li a{
    text-decoration: none;
    line-height: 35px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: orangered;
}

.submenu li a:hover{
    color: blue;
}

.img-html-css img{
    display: block;
    width: 1600px;
    height: 900px;
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;  
}

.wb{
    margin-top: 100px;
}

.wb h2{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 60px;
    margin-bottom: 10px;
    font-size: 50px;
}

.wb iframe{
   width: 960px;
   height: 515px;
   margin-left: 468px;
   border: 10px solid rebeccapurple;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

.pilares{
    border-top: 5px double #FFCC1D;
    border-bottom: 5px double #FFCC1D;
    border-left: 5px double orangered;
    border-right: 5px double blue;
    background-image: url(../img/html-css-javascript.jpg);
    background-repeat: no-repeat;
    background-size: 450px;
    background-position-x: center;
    background-position-y: 10px;
    margin-top: 50px;
    margin-left: 20px;
    width: 1840px;
    height: 270px;
}

.pilares h2{
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 40px;
    margin-bottom: 15px;
    animation-duration: 8s;
    animation-name: colores;
    animation-iteration-count: infinite;
}

@keyframes colores{
    0%{
        color: black;
    }

    30%{
        color: rgb(216, 60, 3);
    }

    60%{
        color: rgb(39, 39, 236);
    }

    90%{
        color: #cc9e06;
    }
}

.pilares ol{
    margin-left: 70px;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    line-height: 50px;
}

.etiquetas{
    border: 5px dotted red;
    margin-top: 50px;
    margin-left: 20px;
    width: 1840px;
    height: 330px;
    background-image: url(../img/etiquetas-html5.jpg);
    background-repeat: no-repeat;
    background-size: 700px;
    background-position-x: right;
    background-position-y: 15px;
}

.etiquetas h2{
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.etiquetas p{
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    width: 1100px;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    text-align: justify;
    line-height: 33px;
}

.novedades{
    border: 5px outset red;
    margin-top: 50px;
    margin-left: 20px;
    width: 1840px;
    height: 930px;
    background-image: url(../img/css-3-logo.jpg);
}

.novedades h2{
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.novedades p{
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    
    text-align: justify;
    line-height: 33px;
}

.estudia{
    display: block;
    margin-top: 150px;
    margin-left: 80px;
}

.estudia h2{
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 40px;
}

.estudia img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.arriba-blog{
    display: block;
    text-align: center;    
    margin-top: 35px;
    margin-bottom: 25px;    
}

.arriba-blog a{
    text-decoration: none;    
    font-family: 'Mochiy Pop P One', sans-serif;
    font-size: 20px;
}

/*Estilos del Contacto*/
header h1{
    text-align: center;
    margin-top: 80px;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
}

form{
    margin-top: 40px;
}

form fieldset{
    width: 900px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/html5-y-css3.png);
    background-size: 380px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: center;
}

.contenedor .form fieldset .leng-1{
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    margin-bottom: 20px;    
}

.input-text .datos{
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    margin-left: 10px;
    margin-bottom: 2px;
    margin-top: 9px;
}

.input-text .controles{
    width: 500px;
    height: 30px;
    margin-left: 10px;
    background-color: #fff;
    border-radius: 5px;
}

::placeholder{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: ;
}

.radio{
    width: 498px;
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 15px;
}

.radio label{
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    margin-right: 10px;
}

.radio div{
    display: inline;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
}

.radio input{
    margin-right: 15px;
}

.multi-sel{
    margin-left: 10px;
    margin-bottom: 15px;
}

.multi-sel .leng-2{
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
}

.multi-sel select{
    height: 30px;
    margin-bottom: 10px;
}

.check .botones{
    margin-top: 30px;
    margin-left: 10px;
}

.check h4{
    display: inline;
    margin-left: 10px;
}

.check .boton-1{
    width: 60px;
    height: 35px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    background-color: rgb(34, 140, 240);
    border-radius: 8px;
}

.check .boton-2{
    width: 70px;
    height: 35px;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 700;
    background-color: rgb(212, 100, 8);
    border-radius: 8px;
}

@media screen and (max-width: 800px) {
    /*html5*/
    .titulo{
        display: inline;
    }    
    
    .contenido{
        flex-direction: column;
    }

    .html5-index{
        margin-left: 7rem;
        width: 70%;        
    }

    .texto-1{
        margin-left: 2rem;
        width: 90%;
    }

    .css3{
        margin-left: 7rem;
        width: 70%;
    }

    .texto-2{
        margin-left: 2rem;
        width: 95%;
    }
}

@media screen and (max-width: 428px) {
    /*html5*/
    .titulo{
        display: inline;
    }    
    
    .contenido{
        flex-direction: column;
    }

    .html5-index{
        margin-left: 9px;
        width: 95%;        
    }

    .texto-1{
        margin-left: 9px;
        width: 95%;
    }

    .css3{
        margin-left: 9px;
        width: 95%;
    }

    .texto-2{
        margin-left: 9px;
        width: 95%;
    }
}

@media screen and (max-width: 414px) {
    /*html5*/
    .titulo{
        display: inline;
    }    
    
    .contenido{
        flex-direction: column;
    }

    .html5-index{
        margin-left: 9px;
        width: 95%;        
    }

    .texto-1{
        margin-left: 9px;
        width: 95%;
    }

    .css3{
        margin-left: 9px;
        width: 95%;
    }

    .texto-2{
        margin-left: 9px;
        width: 95%;
    }
}

@media screen and (max-width: 375px) {
    /*html5*/
    .titulo{
        display: inline;
    }    
    
    .contenido{
        flex-direction: column;
    }

    .html5-index{
        margin-left: 9px;
        width: 95%;        
    }

    .texto-1{
        margin-left: 9px;
        width: 95%;
    }

    .css3{
        margin-left: 9px;
        width: 95%;
    }

    .texto-2{
        margin-left: 9px;
        width: 95%;
    }
}