@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

.Perfil{
    background-color: rgb(247, 213, 63);
    height: 90vh;
    margin-right: 4vw;
    margin-left: 4.5vw;
    width: 80vw;
    font-family: "Indie Flower", cursive;
    font-weight: 400;
    font-style: normal;
    color: rgb(0, 0, 0);
    text-align:justify;
    font-size: 24px;
    
}
.Mipasoporelillia{
  background-color: rgb(255, 174, 0);
  height: 90vh;
  margin-right: 4vw;
  margin-left: 4.5vw;
  width: 80vw;
  font-family: "Indie Flower", cursive;
  color: rgb(0, 0, 0);
  text-align:justify;
  font-size: 21px;
}
.Futuro{
  background-color: rgb(255, 115, 0);
  height: 90vh;
  margin-right: 4vw;
  margin-left: 4.5vw;
  width: 80vw;
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
  color: rgb(0, 0, 0);
  text-align:justify;
  font-size: 24px;
}
.Random{
  background-color: #af2d05;
  height: 90vh;
  margin-right: 4vw;
  margin-left: 4.5vw;
  width: 80vw;
}

.videazo{
  width: 80vw;
  height: 70vh;
  border: rgb(255, 115, 0) solid 3px;
  border-radius: 10px;
  transition: 1.5s;
}


.images01 {
  width: auto;
  height: 38vh;
  border: rgb(255, 123, 0) solid 4px;
  opacity: 0.4;
  transition: 1.5s;
  margin-left: 33px;
 }
 
 .images01:hover {
  opacity: 1;
  border-radius: 10px;
 }

 
.images02 {
   width: auto;
   height: 38vh;
   border:rgb(255, 123, 0) solid 4px;
   opacity: 0.4;
   transition: 1.5s;
 }

 .images02:hover { 
  opacity: 1;
  border-radius: 10px;
 }


 .images03 {
   width: auto;
   height: 38vh;
   border:rgb(255, 123, 0) solid 4px;
   opacity: 0.4;
   transition: 1.5s;
 }

 .images03:hover { 
  opacity: 1;
  border-radius: 10px;
 }


 .images04 {
  width: auto;
  height: 25vh;
  border: rgb(255, 115, 0) solid 3px;
  opacity: 1;
  transition: 1.5s;
  margin-left: 28px;
 }

 .images04:hover { 
  opacity: 0.4;
  border-radius: 10px;
 }


 .images05 {
  width: auto;
  height: 25vh;
  border: rgb(255, 115, 0) solid 3px;
  opacity: 0.4;
  border-radius: 10px;
  transition: 1.5s;
 }

 .images05:hover { 
  opacity: 1;
  border-radius: 1px;
 }

 .images06 {
  width: auto;
  height: 25vh;
  border: rgb(255, 115, 0) solid 3px;
  opacity: 1;
  transition: 1.5s;
 }

 .images06:hover { 
  opacity: 0.4;
  border-radius: 10px;
 }


 .images07 {
  width: auto;
  height: 25vh;
  border: rgb(255, 115, 0) solid 3px;
  opacity: 0.4;
  border-radius: 10px;
  transition: 1.5s;
 }

 .images07:hover { 
  opacity: 1;
  border-radius: 10px;
  border-radius: 1px;
 }


 .images08 {
  width: auto;
  height: 25vh;
  border: rgb(255, 115, 0) solid 3px;
  opacity: 1;
  transition: 1.5s;
 }
 
 .images08:hover { 
  opacity: 0.4;
  border-radius: 10px;
 }


 .images09 {
  width: auto;
  height: 30vh;
  border: rgb(255, 0, 85) solid 3px;
  opacity: 1;
  transition: 1.5s;
  margin-left: 40px;
 }

 .images09:hover { 
  opacity: 0.4;
  border-radius: 10px;
 }


 .images10 {
  width: auto;
  height: 30vh;
  border: rgb(255, 0, 85) solid 3px;
  opacity: 0.4;
  border-radius: 10px;
  transition: 1.5s;
 }

 .images10:hover { 
  opacity: 1;
  border-radius: 1px;
 }


 .images11 {
  width: auto;
  height: 30vh;
  border: rgb(255, 0, 85) solid 3px;
  opacity: 1;
  transition: 1.5s;
 }

 .images11:hover { 
  opacity: 0.4;
  border-radius: 10px;
 }


 .images12 {
  width: auto;
  height: 30vh;
  border: rgb(255, 0, 85) solid 3px;
  opacity: 0.4;
  border-radius: 10px;
  transition: 1.5s;
 }

 .images12:hover { 
  opacity: 1;
  border-radius: 10px;
  border-radius: 1px;
 }


 .images13 {
  width: auto;
  height: 30vh;
  border: rgb(255, 0, 85) solid 3px;
  opacity: 1;
  transition: 1.5s;
 }
 
 .images13:hover { 
  opacity: 0.4;
  border-radius: 10px;
 }


@media only screen and (max-width: 650px){
  .Perfil,.Mipasoporelillia,.Futuro,.Random{
    font-size: 15px;
    display: flex;
    flex-direction: column;
    height: fit-content;
    text-align: justify;
  }
  .imgperfil{
    display: flex;
    flex-direction: column;
  }
  .images01,.images02,.images03,.images04,.images06,.images08{
    margin-left: 85px;
    height: 25vh;
    width: 40vw;
  }
  .images05,.images07{
    height: 25vh;
    width: 50vw;
    margin-left: 60px;
  }

  .images09, .images10, .images11, .images12, .images13{
    margin-left: 100px;
    height: 25vh;
    width: 38vw;
  }

}