@charset "utf-8";

/*                                                   */
/* Escriba su nombre  Juan Manuel Torres Martínez     */
/*                                                    */
/* CSS ejercicio: Efemerides 14 diciembre             */
/*                                                    */
/* Escriba la fecha  20-1-2020                        */
/*                                                    */




/* Estrecho */

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

  body {
    background-color: hsl(54, 100%, 75%);
    font-family: sans-serif;
    font-size: 120%; /* Reducimos el tamaño de la letra para que se pueda leer bien todo cuando la pantalla sea estrecha */
  }
  
  h1 {
    margin: 0;
  }
  
  main {
    display: block;
    padding: 15px; /* Aumentamos un poco el padding para aumentar un poco la distancia de color blanco con las cajas principales */
    background-color: white;
  }
  
  section {
    border:  hsl(43, 100%, 60%) 5px solid;
    border-top: none;
    background-color: hsl(54, 100%, 60%);
    padding-bottom: none; /* ADD */
  }
  
  h2 {
    margin: 0;
    text-align: left;
    background-color: hsl(43, 100%, 60%);
    margin-top: 10px; /* Esta es la distancia entre las cajitas (ya que si tocamos el margin normal los títulos h2 también se desplazarian a la derecha ) */
  }
  
  article {
    border: hsl(28, 100%, 50%) 5px solid;
    border-top: none;
    background-color: hsl(49, 100%, 60%);
    margin: 10px; /* ADD */
    padding-bottom: 1px;  /* ADD */
  }
  
  h3 {
    margin: 0;
    padding-left: 5px;
    background-color: hsl(28, 100%, 50%);
    color: white;
  }
  
  p {
    margin: 5px;
  }
  
  footer p {
    margin: 10px 0;
    font-size: 0.75rem;
  }
  


 
}



/* Pantalla completa */

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

  body {
    background-color: hsl(54, 100%, 75%);
    font-family: sans-serif;
    font-size: 200%; /* Tamaño general de la pantalla */
    width: 75%; /* Ponemos a esta anchura para que no se salga el texto de las cajas debido al estrechamiento antes de que se active la parte del código que trata pantallas estrechas */
    margin: 0 auto; /* Centramos la página */
  }
  
  h1 {
    margin: 0;
  }
  
  main {
    display: block;
    padding: 15px; /* Aumentamos un poco el padding para aumentar un poco la distancia de color blanco con las cajas principales */
    background-color: white;
  } 

  
  section {
    border:  hsl(43, 100%, 60%) 5px solid;
    border-top: none;
    background-color: hsl(54, 100%, 60%);
    padding-bottom: none; /* ADD */
  }
  
  h2 {
    margin: 0;
    text-align: left;
    background-color: hsl(43, 100%, 60%);
    margin-top: 10px; /* Esta es la distancia entre las cajitas (ya que si tocamos el margin normal los títulos h2 también se desplazarian a la derecha ) */
  }
  
  article {
    width: 40%; /* Estrechamiento de las cajitas */
    display: inline-block; /* Dispone las cajitas en una sola línea dentro de las amarillas */
    border: hsl(28, 100%, 50%) 5px solid;
    border-top: none;
    background-color: hsl(49, 100%, 60%);
    margin: 25px; /* ADD */
    padding-bottom: 1px;  /* ADD */
  }
  
  h3 {
    margin: 0;
    padding-left: 5px;
    background-color: hsl(28, 100%, 50%);
    color: white;
  }
  
  p {
    margin: 10px;
  }
  
  footer p {
    margin: 10px 0;
    font-size: 0.75rem;
  }
  
 
}