/*importar una fuente*/
@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
/* ---- reset ---- */ 
body{
     margin:0; 
     padding: 0; 
} 
/* ---- particles.js container ---- */ 
#particles-js{
     position:fixed;
     width: 100%; 
     height: 100%; 
     top:0;
     z-index: -1;
    background-color: #000000;
     background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%; } 
      /* ---- stats.js ---- */ 
.count-particles{ 
    background: #000022; 
    position: fixed;
    top: 5vh; 
    color:whitesmoke;
    } 
#stats, 
.count-particles{ 
    -webkit-user-select: none;
    margin-top: 5px; 
    margin-left: 5px; 
} 
 #stats{
     border-radius: 3px 3px 0 0;
      overflow: hidden; 
    } 
.count-particles{ 
    border-radius: 0 0 3px 3px; 
}
/*estilo de página*/

main{
    z-index: 1;
    font-family: Arial, Helvetica, sans-serif;
}
@media screen and (max-width: 600px){
    h1{
        display: block;
        margin: 2vw;

        text-align: center;
        border: 1px double rgb(7, 117, 234);
        font-family: Fredoka One;
font-size: 50px;
background-image: url("../imagenes/colorinchis.gif");
color:transparent;
background-clip:text;
-webkit-background-clip:text;
    }
    h2{
        color:blue;
    }
    p{
        margin-left: 5vw;
        margin-right: 5vw;
        color:white;
        font-size: 18px;
        font-family: sans-serif;
    }
    article{
        border:1px solid white;
    }
    .subtitulo{
        font-size: 2em;
        color:lightseagreen;
        text-decoration: underline;
        margin:2vw;
    }
    #imagen_1, #imagen_2, #gif_2{
        text-align: center;
    }
    #codigo_1, #codigo_2{
        width: 90%;
    }
    #bg_molde{
        /*posicion, tamaño y fuente del texto*/
    text-align: center;
    font-family: Fredoka One;
    font-size: 10em;
    margin-top: 0;
    margin-bottom: 0;
    /*asignar una imagen de fondo*/
    background-image: url("https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80");
    color:transparent;
    background-clip:text;
    -webkit-background-clip:text;
    }
}
@media screen and (min-width: 600px){
header{
    display: flexbox;
    justify-content: center;
}

h1{
    text-align: center;
padding: 5vh;
border: 1px solid rgb(7, 117, 234);
margin-left: 30vw;
margin-right: 30vw;
font-family: Fredoka One;
font-size: 50px;
background-image: url("../imagenes/colorinchis.gif");
color:transparent;
background-clip:text;
-webkit-background-clip:text;
}

h2{
    color:blue;
}
section{
    margin-left: 5vw;
    margin-right: 5vw;
}
#tarea1{
    grid-area: tarea1;
}
#tarea2{
    grid-area: tarea2;
}
p{
    margin-left: 5vw;
    margin-right: 5vw;
    color:white;
    font-size: 18px;
    font-family: sans-serif;
}
#section_css{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "titulo titulo"
                         "tarea1 tarea2";
    grid-area:titulo;
}
article{
    border:1px solid white;
}
.subtitulo{
    font-size: 2em;
    color:lightseagreen;
    text-decoration: underline;
    margin:2vw;
}
#imagen_1, #imagen_2, #gif_2{
    text-align: center;
}
#codigo_1, #codigo_2{
    width: 50%;
}
#bg_molde{
    /*posicion, tamaño y fuente del texto*/
text-align: center;
font-family: Fredoka One;
font-size: 10em;
margin-top: 0;
margin-bottom: 0;
/*asignar una imagen de fondo*/
background-image: url("https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80");
color:transparent;
background-clip:text;
-webkit-background-clip:text;
}
}