
body {
    /*background-color: blue;*/
    background-color: white;
    color: darkviolet;
    font-size: larger;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 700px;
   
   }
   #principal{
    width: 100%;
    height: 100%;
   }

header{
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: xx-large;
    margin: 0;
    padding: 0;
    border: none;
    border-style: none;
    letter-spacing: 5px;
}
header p {
    padding: 0 0.75em;
    margin: 0;
}
header h1{
    text-shadow: 2px 2px 4px #000000;
}

nav{
    color: honeydew;
    text-decoration: none;
    font-weight: bold;
    background: linear-gradient(white, blue);
    /*background: linear-gradient(rgba(255, 255, 255, 1),rgba(0, 0, 255, 1));*/
    font-size: xx-large;
    width: 100%;
    height: 100%;
    /*height: 3.5em;*/
    /*display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    border: none;
    border-style: none;
    position: sticky;
    top: 0;
    z-index: 10000;
    box-shadow: 0px 6px 6px -6px maroon;
    transition-duration: 0.3s;
  }
  nav ul{
    list-style: none;
    list-style-type: none;
    display: flex;
    padding: 0; 
    
  }
  nav li{
    list-style: none;
    list-style-type: none;
  }
/*nav ul li {
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    list-style: none;
} */
nav a {
  /*display:block;*/
  color: #322a2a;
  padding: 0 0.75em;
  text-decoration: none;
  font-weight: bold;
  transition-duration: 0.3s; 
}

nav a:hover { 
  color: #0505fd;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em rgb(247, 247, 250);
  font-weight: bold;
  transition-duration: 0.3s;
 }
 .actual{
  color: azure;
}
nav.abajo{
  opacity: 0.8;
  /*background: linear-gradient(rgba(255, 255, 255, 0.8),rgba(0, 0, 255, 0.8));*/
}
nav:hover{
  /*background: linear-gradient(rgba(255, 255, 255, 1),rgba(0, 0, 255, 1));*/
  opacity: 1;
  transition-duration: 0.3s; 
}
main{  
    color: antiquewhite;
    font-size: larger;
    width: 100%; 
    height: 100%; 
    margin: 0;
    padding: 0;
    border: none;
    border-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
    
    /*background-color: rgba(0, 0, 255, 1);*/
    /*background-image: url("../Imagenes/FondoMain.png");*/
    /*box-shadow: inset 0 0 30px 10px rgb(13, 2, 109);   */

    background: linear-gradient(to bottom, transparent, transparent, blue), url("../Imagenes/FondoMain.png");
}
main ul{
    text-align: justify;
    
  }

main h1, main h2{
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
p.galeria{
  padding: 20px;
  text-align: justify;
}

footer{
  
    background: linear-gradient(to top, transparent 90%, blue), url("../Imagenes/4884340.jpg") fixed;
    background-size: 100% 100%;
    /* background-image: url("../Imagenes/4884340.jpg");*/
    /*background-attachment: fixed;*/
    /*background-repeat: no-repeat;*/
   
    color: rgb(209, 209, 209);
    font-size: large;
    line-height: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border: none;
    border-style: none;
    /*background: linear-gradient(to top, transparent 90%, blue), url("../Imagenes/carbon_fibre.png");*/
    /*background: linear-gradient(blue, white);*/
    /*background-image: url("../Imagenes/carbon_fibre.png");*/
    /*background-blend-mode: multiply;*/
    /*box-shadow: inset 0 0 30px 10px rgb(13, 2, 109);*/
    /*centrar el div hijo*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    
}
footer h1, footer h2{
    text-shadow: -1px -1px white, 1px 1px #333;
    
}
footer p{
    margin: 10px;
    padding: 0;
    border: 0;  
 }


 

   hr {
    align-self: center;
    border: 0;
    border-top: solid 3px #444;
    border-top-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.1);
    height: 3px;
    margin: 3em 0;
    width: 90%;
  }
  main a {
    color: white;
    text-decoration: none;
  }
  main a:hover { 
    color: #fd0505;
    text-shadow: 1px 1px 2px black, 0 0 1em rgb(233, 88, 16), 0 0 0.2em rgb(247, 247, 250);
    font-weight: bold;
   }

  .Caja{

    width: auto;
    font-family: 'Open Sans', sans-serif;
	  line-height: 1.85em;
	  color: #888;
    padding: 20px;
    margin: 2em;
    border: 1px solid;
    border-color: #888;
    border-radius: 15px;
    background: #fff;
	  /*box-shadow: 0 6px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19);*/
    box-shadow: 0 0 15px 0px rgb(255, 254, 254);
    background-image: url("../Imagenes/bg.png");
    overflow: hidden;
    animation-name: show;
    animation-duration: 1s;
    animation-fill-mode: forwards;

    view-timeline-name: --image;
	  view-timeline-axis: block;

	  animation-timeline: --image;
	  animation-name: show;

	  animation-range: entry 25% cover 30%;
	  animation-fill-mode: both;
  }
  @keyframes show{
    0%{
      opacity: 0;
      scale: 0;
    }
    100%{
      opacity: 1;
      scale: 1;
    }
  }
  .Caja h1, .Caja h2{
    color: #3e3e3e;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
  }

 diviconos{
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
 }
 diviconos p{
    margin: 5px;
 }
   
   a.vermas {
    color: blueviolet;
   }
   .middle{
    width: 90%;
    margin: 0;
    padding: 0;
    border: 0;
     /*centrar el div hijo*/
    display: flex;
    justify-content: space-around;
   
 }

 .DatosFooter{
   width: 45%;
   height: 350px;
   
   text-align: center;
   display: table;
 }
 
 .Enlaces{
   width: 45%;
   height: 350px;
   
   text-align: center;
   display: table;
 }
 
 .V{
    vertical-align: middle;
    border: 1;
    border-right: solid 3px #444;
    border-right-color: rgba(0, 0, 0, 0.35);
    /*box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.1);*/
    border-left: solid 1px #444;
    margin: 3em 0;
    width: 4px;
    height: 250px;
    
 }
 a.afooter{
    color: rgb(209, 209, 209);
    text-decoration: none;
  }
  a:hover.afooter{
    color: #fd0505;
    text-shadow: 1px 1px 2px black, 0 0 1em rgb(233, 88, 16), 0 0 0.2em rgb(247, 247, 250);
  }




  /*Diseño Responsive*/

  @media (max-width: 720px) {
    header{
      letter-spacing: 2px;
    }
    header p{
      padding: 0 0.25em;
      margin: 0;
    }
   
    footer{
      font-size: medium;
    }
  }

img.borde{
  width: 98%;
  border-color: #888;
  border-radius: 15px;
  box-shadow: 0 0 15px 0px rgb(255, 254, 254);
}

Div.Caja img.izquierda {
  float: left;
  margin-right: 15px;
  border-radius: 50%;
}
Div.Caja a img:hover {
  box-shadow: 0 0 2px 3px red;
  opacity: 0.8;
  
}