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

body {
    font: 13px/1.5 'Paprika', cursive;
    padding: 0;
    margin: 0;
    background-color: white;
  }
  
  /* Estilos para el contenedor global del as páginas */
  .contenedor {
    width: 80%;
    margin: auto;
    overflow: hidden;
  }
  
  /* posicionamos el menú */
  ul {
    padding: 0;
    margin: 0;
  }
  
 



                              /* HEADER */


  


  /* Le damos estilo al header con un borde, fondo negro, separaciones y color de fuente */
  header {
    background: #000000;
    color: #ffffff;
    padding-top: 30px;
    min-height: 70px;
    border-bottom: #e8491d 3px solid;
  }
  
  /* Le damos estilo a los apartados del menú para que no salgan modo link */
  header a {
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
  }
  
  /* posicionamos el menu que quede recto */
  header li {
    float: left;
    display: inline;
    padding: 0 20px 0 20px;
  }
  

  header #logo {
    float: left;
  }
  
  header #logo h1 {
    margin: 0;
  }
  
  /* posicionamos el menu a la derecha */
  header nav {
    float: right;
    margin-top: 10px;
  }
  
  /* damos el color naranja a una parte del logo y también a la pestaña en la que nos encontremos actualmente */
  header .destacado, header .actual a {
    color: #e8491d;
    font-weight: bold;
  }
  
  /* ponemos efecto al pasar el raton por encima del menú */
  header a:hover {
    color:#e8491d;
    font-weight: bold;
  }





                          /* Presentación de Pelayo */




/* empleamos estilo al contenedor de la presentación con mi nombre */
  #presentacion {
    min-height: 400px;
    background: #424B68;
    text-align: center;
    color: #ffffff;
  }
  
  #presentacion h1 {
    margin-top: 100px;
    font-size: 55px;
    margin-bottom: 10px;
  }
  
  #presentacion p {
    font-size: 20px;
  }





                          /* Ponemos estilo al cuadro que da comienzo a alguna de mis competencias de DAW */
  
  



  #texto {
    padding: 15px;
    color: #ffffff;
    background: #5D6C9A;
  }
  
  #texto h1 {
    justify-content: center;
  }
  
  



                          /* COMPETENCIAS */





  #cajas {
    margin-top: 10px;
  }

  img {
    width: 200px;
    height: 200px;
  }
  
  .html {
    width: 300px;
    height: 150px;
    margin-top: 25px;
  }
  
  .html-word {
    margin-top: 19px;
  }
  
  /* Las posicionamos en linea */
  #cajas .caja {
    float: left;
    width: 30%;
    padding: 10px;
    text-align: center;
    background-color:white;
  }

  .imagenuno{
    width: 200px;
  }

  .imagendos{
    width: 250px;
  }

  .imagentres{
    width: 320px;
  }
  
  



                        /* Ponemos estilo al pie de página */





  footer {
    padding: 20px;
    margin-top: 20px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
  }


  


  /* Empleamos una media query para que quede bien*/
  @media (max-width: 768px) {
    #logo, 
    header nav, 
    header nav li, 
    #texto h1, 
    #texto form,
    #cajas .caja {
      float: none;
      text-align: center;
      width: 100%;
    }
  }