@media screen and (max-width:480px) { 
    


html, body {
    padding:0;
    margin:0;
    scroll-behavior: smooth;
    font-family:"Anton", sans-serif;
    background-color: rgb(48, 53, 179);
   
}



header {
    position:fixed;
    left:0vw;
    top:0vh;
    width: 100vw;
    height: 15vh;
    background-color: rgb(255, 88, 208);
    font-family:"Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    color:black;
    text-align: center;
    font-size: 5vh;
    background-image: url(img/mariposas.jpeg);
    background-position: center;


}

#Anuarioweb {
    text-align: center;
}

nav {
    position: fixed;
    left: 0vw;
    top: 15vh;
    width: 100vw;
    height: 10vh;
    background-color: rgb(74, 126, 230);
    color:black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    

    }

nav a {
    color:black;
    font-family:'Times New Roman', Times, serif;
    border:rgb(214, 155, 165) 1px;
    border-radius: 5px;
    display:inline-block;
    padding:20px;
    height: 5vh;
    line-height: 5vh;
    
   

}

nav a:hover {
    background-color:rgb(0, 0, 0);
    color: whitesmoke;
    padding: 20px;
    filter: none;
    transition: 0.5s;

}

section {
    width: 150vw;
    height: 150vh;
    display: flex;
    flex-direction: grid;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15vh;
    
}

article {
    width: 300px;
    height: 300;
    border-radius: 5px;
    min-width: 200px;
    min-height: 300px;
    margin: 5px;
    transition: .5s;
}

article:hover {
    box-shadow: 5px 5px 10px rgb(236, 236, 236);
    transition: 0.5s;
}




#Perfil {
    background-color:rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content:space-around;
    flex-direction:row;
}


#miPaso {
    background-color: rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content: space-around;
}

#futuro {
    background-color: rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content: space-around;
}

#random {
    background-color: rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;

    
}

footer {
    background-color: crimson;
   
}

#imagen01 {
    background-image: url("img/foto perfil.jpeg" );
    background-size: cover;
    background-position: center;
}

#paragraph01 {
    color:ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: justify;
    font-size: 1.0vw;
}

#imagen02 {
    background-image: url("img/img perfil1.jpeg");
    background-size: cover;
    background-position: center;
    

}

#paragraph02 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
    
}

#imagen03 {
    background-image: url("img/img perfil2.jpeg");
    background-size: cover;
    background-position: center;


}

#paragraph03 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}


#imagen05{
    background-image: url(img/fotovVerano.JPG);
    background-size: cover;
    background-position: center;


}

#imagen06{
    background-image: url(img/fotoChiquita.jpg);
    background-size: cover;
    background-position: center;
}

#imagen07 {
    background-image: url(img/fotoChiquita2.jpg);
    background-size: cover;
    background-position: center;
}

#imagen08 {
    background-image: url(img/fotoMar.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph08 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
    

}

#imagen09 {
    background-image: url(img/fotoAtardecer.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph09 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
    

}

#imagen10{
    background-image: url(img/fotoChiquita3.jpg);
    background-size: cover;
    background-position: center;


}

#imagen11{
    background-image: url(img/fotoUvi.jpg);
    background-size: cover;
    background-position: center;

}

#paragraph011 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen12 {
    background-image: url(img/fotoYo.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen13 {
    background-image: url(img/fotoLuna.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph13 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}



#imagen01Paso {
    background-image: url("img/fotoTodos.jpeg");
    background-size: cover;
    background-position: center;
}

#paragraph01Paso {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen02Paso {
    background-image: url("img/fotoLago.jpeg");
    background-size: cover;
    background-position: center;
}

#paragraph02Paso {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen03Paso {
    background-image: url("img/fotoMarcha.jpeg");
    background-size: cover;
    background-position: center;
}

#paragraph03Paso {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen04Paso {
    background-image: url(img/fotoVentana4.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen05Paso {
    background-image: url(img/fotoVentana3.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen06Paso  {
    background-image: url(img/fotoRisas.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen07Paso {
    background-image: url(img/fotoChicas.jpeg);
    background-size: cover;
    background-position: center;
}


#imagen09Paso {
    background-image: url(img/fotoGato.JPG);
    background-size: cover;
    background-position: center;
}

#imagen10Paso {
    background-image: url(img/fotoNieve.JPG);
    background-size: cover;
    background-position: center;
}


#imagen11Paso {
    background-image: url(img/fotoUpd.jpg);
    background-size: cover;
    background-position: center;

}


#imagen13Paso {
    background-image: url(img/fotoEma.jpeg);
    background-size: cover;
    background-position: center;


}

#imagen14Paso{
    background-image: url(img/fotoJuegos.jpg);
    background-size: cover;
    background-position: center;
}

#imagen01Futuro{
    background-image: url(img/imgFuturo01.jpeg);
    background-size: cover;
    background-position: center;

}


#paragraph01Futuro {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen02Futuro {
    background-image: url(img/fotoMochileras.JPG);
    background-size: cover;
    background-position: center;

}



#paragraph02Futuro{
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;

}


#imagen03Futuro {
    background-image: url(img/fotoVida.jpg);
    background-size: cover;
    background-position: center;
}

#imagen04Futuro {
    background-image: url(img/fotoCumple.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph04Futuro {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}


#imagenRandom01 {
    background-image: url("img/fotoLouCata.jpeg");
    background-position: center;
    background-size: cover;
}


#paragraph04 {
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;
}

#imagenRandom02 {
    background-image: url("img/fotoChapa.jpeg");
    background-position: center;
    background-size: cover;

}

#paragraphRandom02{
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;

}

#imagenrandom03 {
    background-image: url("img/fotoBondi.jpeg");
    background-position: center;
    background-size: cover;
}

#paragraph05 {
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;
}

#imagenrandom04 {
    background-image: url(img/fotoBrava.jpg);
    background-position: center;
    background-size: cover;
}

#paragraphrandom04 {
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;


}

#imagenrandom05 {
    background-image: url(img/fotoCascada.jpeg);
    background-position: center;
    background-size: cover;
}

#imagenRandom06 {
    background-image: url(img/FotoBrava2.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom07 {
    background-image: url(img/fotoBaño.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom08 {
    background-image: url(img/foto25deMayo.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom09 {
    background-image: url(img/fotoBar.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom10 {
    background-image: url(img/fotoDylan.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom11 {
    background-image: url(img/fotoIlliaRock.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom12 {
    background-image: url(img/fotoUvi2.jpg);
    background-position: center;
    background-size: cover;
}

}



@media screen and (min-width:720px) {

    
html, body {
    padding:0;
    margin:0;
    scroll-behavior: smooth;
    font-family:"Anton", sans-serif;
    background-color: rgb(48, 53, 179);
   
}



header {
    position:fixed;
    left:0vw;
    top:0vh;
    width: 100vw;
    height: 15vh;
    background-color: rgb(255, 88, 208);
    font-family:"Rubik Mono One", monospace;
    font-weight: 400;
    font-style: normal;
    color:black;
    text-align: center;
    font-size: 5vh;
    background-image: url(img/mariposas.jpeg);
    background-position: center;


}

#Anuarioweb {
    text-align: center;
}

nav {
    position: fixed;
    left: 0vw;
    top: 15vh;
    width: 100vw;
    height: 10vh;
    background-color: rgb(74, 126, 230);
    color:black;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
    

    }

nav a {
    color:black;
    font-family:'Times New Roman', Times, serif;
    border:rgb(214, 155, 165) 1px;
    border-radius: 5px;
    display:inline-block;
    padding:20px;
    height: 5vh;
    line-height: 5vh;
    
   

}

nav a:hover {
    background-color:rgb(0, 0, 0);
    color: whitesmoke;
    padding: 20px;
    filter: none;
    transition: 0.5s;

}

section {
    width: 150vw;
    height: 150vh;
    display: flex;
    flex-direction: grid;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15vh;
    
}

article {
    width: 300px;
    height: 300;
    border-radius: 5px;
    min-width: 200px;
    min-height: 300px;
    margin: 5px;
    transition: .5s;
}

article:hover {
    box-shadow: 5px 5px 10px rgb(236, 236, 236);
    transition: 0.5s;
}




#Perfil {
    background-color:rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content:space-around;
    flex-direction:row;
}


#miPaso {
    background-color: rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content: space-around;
}

#futuro {
    background-color: rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content: space-around;
}

#random {
    background-color: rgb(48, 53, 179);
    display:flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;

    
}

footer {
    background-color: crimson;
   
}

#imagen01 {
    background-image: url("img/foto perfil.jpeg" );
    background-size: cover;
    background-position: center;
}

#paragraph01 {
    color:ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: justify;
    font-size: 1.0vw;
}

#imagen02 {
    background-image: url("img/img perfil1.jpeg");
    background-size: cover;
    background-position: center;
    

}

#paragraph02 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
    
}

#imagen03 {
    background-image: url("img/img perfil2.jpeg");
    background-size: cover;
    background-position: center;


}

#paragraph03 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}


#imagen05{
    background-image: url(img/fotovVerano.JPG);
    background-size: cover;
    background-position: center;


}

#imagen06{
    background-image: url(img/fotoChiquita.jpg);
    background-size: cover;
    background-position: center;
}

#imagen07 {
    background-image: url(img/fotoChiquita2.jpg);
    background-size: cover;
    background-position: center;
}

#imagen08 {
    background-image: url(img/fotoMar.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph08 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
    

}

#imagen09 {
    background-image: url(img/fotoAtardecer.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph09 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
    

}

#imagen10{
    background-image: url(img/fotoChiquita3.jpg);
    background-size: cover;
    background-position: center;


}

#imagen11{
    background-image: url(img/fotoUvi.jpg);
    background-size: cover;
    background-position: center;

}

#paragraph011 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen12 {
    background-image: url(img/fotoYo.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen13 {
    background-image: url(img/fotoLuna.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph13 {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}



#imagen01Paso {
    background-image: url("img/fotoTodos.jpeg");
    background-size: cover;
    background-position: center;
}

#paragraph01Paso {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen02Paso {
    background-image: url("img/fotoLago.jpeg");
    background-size: cover;
    background-position: center;
}

#paragraph02Paso {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen03Paso {
    background-image: url("img/fotoMarcha.jpeg");
    background-size: cover;
    background-position: center;
}

#paragraph03Paso {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen04Paso {
    background-image: url(img/fotoVentana4.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen05Paso {
    background-image: url(img/fotoVentana3.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen06Paso  {
    background-image: url(img/fotoRisas.jpeg);
    background-size: cover;
    background-position: center;
}

#imagen07Paso {
    background-image: url(img/fotoChicas.jpeg);
    background-size: cover;
    background-position: center;
}


#imagen09Paso {
    background-image: url(img/fotoGato.JPG);
    background-size: cover;
    background-position: center;
}

#imagen10Paso {
    background-image: url(img/fotoNieve.JPG);
    background-size: cover;
    background-position: center;
}


#imagen11Paso {
    background-image: url(img/fotoUpd.jpg);
    background-size: cover;
    background-position: center;

}


#imagen13Paso {
    background-image: url(img/fotoEma.jpeg);
    background-size: cover;
    background-position: center;


}

#imagen14Paso{
    background-image: url(img/fotoJuegos.jpg);
    background-size: cover;
    background-position: center;
}

#imagen01Futuro{
    background-image: url(img/imgFuturo01.jpeg);
    background-size: cover;
    background-position: center;

}


#paragraph01Futuro {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}

#imagen02Futuro {
    background-image: url(img/fotoMochileras.JPG);
    background-size: cover;
    background-position: center;

}



#paragraph02Futuro{
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;

}


#imagen03Futuro {
    background-image: url(img/fotoVida.jpg);
    background-size: cover;
    background-position: center;
}

#imagen04Futuro {
    background-image: url(img/fotoCumple.jpg);
    background-size: cover;
    background-position: center;
}

#paragraph04Futuro {
    color: ghostwhite;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 1.0vw;
}


#imagenRandom01 {
    background-image: url("img/fotoLouCata.jpeg");
    background-position: center;
    background-size: cover;
}


#paragraph04 {
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;
}

#imagenRandom02 {
    background-image: url("img/fotoChapa.jpeg");
    background-position: center;
    background-size: cover;

}

#paragraphRandom02{
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;

}

#imagenrandom03 {
    background-image: url("img/fotoBondi.jpeg");
    background-position: center;
    background-size: cover;
}

#paragraph05 {
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;
}

#imagenrandom04 {
    background-image: url(img/fotoBrava.jpg);
    background-position: center;
    background-size: cover;
}

#paragraphrandom04 {
    background-color: rgba(0, 0, 0, 0.5);
    color: ghostwhite;
    text-align: center;
    font-size: 1.0vw;


}

#imagenrandom05 {
    background-image: url(img/fotoCascada.jpeg);
    background-position: center;
    background-size: cover;
}

#imagenRandom06 {
    background-image: url(img/FotoBrava2.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom07 {
    background-image: url(img/fotoBaño.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom08 {
    background-image: url(img/foto25deMayo.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom09 {
    background-image: url(img/fotoBar.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom10 {
    background-image: url(img/fotoDylan.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom11 {
    background-image: url(img/fotoIlliaRock.jpg);
    background-position: center;
    background-size: cover;
}

#imagenRandom12 {
    background-image: url(img/fotoUvi2.jpg);
    background-position: center;
    background-size: cover;
}

    
}





@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rubik+Mono+One&display=swap');
@import url("https://fonts.googleapis.com/css2?family=New+Amsterdam&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap" );