*{ /* Ajustes para toda la página
    font-family:  Courier, "Helvética", monospace; */

    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #448888;
    color: #000000;     
  }
  
h1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    color: #ffffff ;
    background: #225555; 
    padding: 0.3em;
    border-radius: 8px;
}

h2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    color: #A3D57E ;
    background: #235706;     
}

h3 {
    font-family: 'Zen Dots', sans-serif;
    font-size: 1.6em;
    font-weight: bold;
    text-align: center;
    color: #393E41;
}

h4 {
    font-family: 'Noto Sans JP', sans-serif;
    border: 2px solid rgba(1, 1, 1, 0.3);     
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    color: #ffffff ;
    background: #225555; 
    padding: 0.3em;
    border-radius: 8px;
}


.calculadora {
    width: 95%;
    max-width: 600px;  /* Ancho máximo permitido */
    background: #fdfcdc; 
    padding: 20px;
    border-style: solid;
    border-radius: 8px;
    border-width: 3;
    border-color: #343a40;
    margin-left: auto;
    margin-right: auto;
    }

/* Alineacion y propiedades del contenedor principal (Es el div que está dentro del body y 
  contiene todo  el cuerpo de la página) */
.wrapper {
    width: 95%;
    max-width: 1800px;  /* Ancho máximo permitido */
    margin: 10px auto;  /* Margen con el borde del navegador */
    display: grid;
    grid-gap: 20px;     /* Margen entre elementos dentro del grid */
    /*grid-template-columns: repeat(4, 95%);  /*4 comumnas */
    grid-template-rows:    repeat(3, auto); /*4 filas */
}

.wrapper > * { /*Propiedades de TODOS los elementos dentro del contenedor ppal. */
    padding: 20px;
    border-radius: 8px;
    flex: 1 100%;
    font-size: 1.5em;
  }
  

.wrapper .header {  /*Propiedades del header*/
  background: #ffffff;
  grid-column-start: 1;   /* Inicio del header.... */
  grid-column-end: 5;     /* .....final del header */
  overflow:hidden; /* Eliminamos errores de float */
}

/* Tres cajas en el header, para logos y menu */
#header1 { width: 15%; float: left; }
#header2 { width: 70%; float: left;}
#header3 { width: 15%; float: right;}


.wrapper  .main {/*Propiedades del texto del articulo principal*/
    /* grid-column: span 2;   Main ocupa "x"" columnas */
    grid-column: 1 / 5;
    text-align: justify;
    background: #ffffff; 
}

.wrapper .footer {/*Propiedades del footer*/
    text-align: center;
    color: #000000;
    background: #E7E5DF;
    grid-column-start: 1;   /* Inicio del footer.... */
    grid-column-end: 5;     /* .....final del footer */    
    font-size: 1em;
  }

/* -------------Barra de navegacion superior --------------- */
.navigation {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    font-size: 0.8em;
    list-style: none;
    margin: 0; 
    background: #ffffff; /*#7EA3D5 ;*/
    border-radius: 8px;
  }
  
  .navigation a { 
    text-align: center; 
    text-decoration: none;
    font-family: 'Zen Dots', sans-serif;
    border-bottom: 2px solid rgba(1, 1, 1, 0.3); 
    display: block;
    padding: 0.5em;
    background: #225555; 
    border-radius: 8px;
    color: #ffffff;   
    /*justify-content: space-around; */

  }
  
  .navigation a:hover {
    background: #88BBBB;
    border-radius: 8px;
    color: #000000;   
  }  


/* -------------Barra de navegacion Lista de temas --------------- */
.navigation-v {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    font-size: 1.0em;
    font-weight: bold;
    list-style: none;
    margin: 1px; 
    background: #A3D57E; /*#7EA3D5 ;*/
    border-radius: 8px;
  }
  
  .navigation-v a {
    text-decoration: none;
    display: block;
    padding: 0.3em;
    border-bottom: 2px solid rgba(1, 1, 1, 0.3); 
    color: #235706;
    border-radius: 8px;
  }
  
  .navigation-v a:hover {
    font-weight: bold;
    background: #235706;
    color: #ffffff;  
    border-radius: 8px;
  }

/*------------Cortes para que sea responsivo ----------------*/
@media screen and (max-width: 768px){
    .wrapper  .main{
        font-size: 1em;
        grid-column: 1/5; /*  Main ocupa todo el ancho columnas */
    }
    .navigation {
        flex-flow: column wrap;
        padding: 0;
        font-size: 0.6em;
      }
      #header1 { width: 25%; float: left; }
      #header2 { width: 50%; float: left;}
      #header3 { width: 25%; float: right;}     
      h3 { font-size: 1em; }
}

@media screen and  (min-width: 769px) and (max-width: 1024px){
    .wrapper  .main{
        font-size: 1.2em;
        grid-column: 1/5; /*  Main ocupa todo el ancho columnas */
    }
    .navigation {
        justify-content: space-around;
        font-size: 0.6em;
      }
      #header1 { width: 25%; float: left; }
      #header2 { width: 50%; float: left;}
      #header3 { width: 25%; float: right;}   
}

@media screen and  (min-width: 1025px) and (max-width: 1280px){
    .wrapper  .main{
        font-size: 1.3em;
        grid-column: 1/5; /*  Main ocupa todo el ancho columnas */
    }
    .navigation {
        justify-content: space-around;
        font-size: 0.7em;
      }
      #header1 { width: 20%; float: left; }
      #header2 { width: 60%; float: left;}
      #header3 { width: 20%; float: right;}
}

@media screen and  (min-width: 1281px) {
    .wrapper  .main{
        font-size: 1.4em;
        grid-column: 1/5; /*  Main ocupa todo el ancho columnas */
    }
    .navigation {
        justify-content: space-around;
        font-size: 0.7em;
      }

}





  /* -------- Imagen animada a la derecha -------------*/
  .derecha {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto
    }

/* -------animacion imagen -----*/
   #imagend{
    animation-duration: 2s;
    animation-delay: 0s;
    animation-name: logo_imgd;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  
  @keyframes logo_imgd{
    from { margin-right: 90px; width:10% }
      to { margin-right: 100px; width:0%; }
    }

  /* -------- Imagen animada a la izquierda -------------*/
  .izquierda {
    display: block;
    margin-left: auto;
    margin-right: auto;
   }

/* -------animacion imagen -----*/
   #imageni{
    animation-duration: 2s;
    animation-delay: 0s;
    animation-name: logo_imgi;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  
  @keyframes logo_imgi{
    from { margin-left: 10px; width:0% }
      to { margin-left: 0px; width:10%; }
    }