body{
    background-image: url(./imagenes/fondoestrellado.gif); 
}



#tabla-mensajes{
  color: black;
  margin: auto;
}
#tabla-mensajes td {
    margin-top: 10px;
    padding: 10px;
}
#tabla-mensajes tbody tr:nth-child(odd) {
    background-color: #00fa9a;
  }
  
#tabla-mensajes tbody tr:nth-child(even) {
    background-color: #80fbcc;
}
  
#tabla-mensajes table {
    background-color: #00fa9a;
}


#guestBook{
    color: #00fa9a;
}

#guestBook input[type=text], textarea {
    border: 2px solid #00fa9a;
    border-radius: 4px;
    width: 350px;
    background-color: #00fa9a;
  }
#guestBook input[type=text]:focus {
    background-color: #80fbcc;
  }
#guestBook  input[type=submit]{
    background-color: #00fa9a;
  }
#guestBook  input[type=submit]:hover{
    cursor: pointer;
  }
.contenedor {
    width: 98.5%;
    max-width: 2542px;
    margin:0 auto;
    overflow:hidden;
}

header{
    width: 97%;
    display: flex;
    justify-content: center;
    box-sizing:border-box;
    font-size: 115%;
    
}
xmp{
    color:mediumspringgreen;
    font-weight: bold;
}

@font-face {
    font-family: "retrofuente";
    src: url(./fonts/ARCADE_N.TTF);
}

section {
    margin: -25px 0 0 -10px;
}

h1{
    font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    font-size: 200%;
}

.locutor{
    font-family: "retrofuente";
    color:mediumspringgreen;
    font-size: 300%;
}

/*inicio tema banners*/
.contenedor-banner-texto {
    display: flex; /* Usa flexbox para alinear el banner y el contenido */
}

.contenido-entre-banners {
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    padding-left: 20px; /* Espacio entre el banner y el contenido */
    padding-right: 20px;
}

.banners-izquierdos {
    display: flex;
    flex-direction: column; /* Esto asegura que las imágenes se apilen verticalmente */
}

.banners-derechos {
    display: flex;
    flex-direction: column; /* Esto asegura que las imágenes se apilen verticalmente */
}

.banner_izquierdo1 {
    margin-top: 35px;
}

.banner_izquierdo1, .banner_izquierdo2, .banner_izquierdo3, .banner_izquierdo4 {
    width: 100px; /* Asegura que las imágenes mantengan su ancho original */
    height: auto; /* Asegura que las imágenes ocupen todo el alto disponible */
    flex-shrink: 0; /* Asegura que el banner no se reduzca */
    padding-right: 75px;
}

.banner_derecho1 {
    margin-top: 35px;
}

.banner_derecho1, .banner_derecho2, .banner_derecho3, .banner_derecho4, .banner_derecho5, .banner_derecho6, .banner_derecho7, .banner_derecho8 {
    width: 100px; /* Asegura que las imágenes mantengan su ancho original */
    height: auto; /* Asegura que las imágenes ocupen todo el alto disponible */
    flex-shrink: 0; /* Asegura que el banner no se reduzca */
    right:  0px;
}

.banner_horizontal1 {
    height: 50px;
    margin: 0;       /* Asegura que no haya márgenes */
    padding: 0;      /* Asegura que no haya relleno */
    float: left; /* Esto hará que las imágenes floten a la izquierda y se alineen horizontalmente */
}

.banner_horizontal2 {
    height: 50px;
    margin: 0;       /* Asegura que no haya márgenes */
    padding: 0;      /* Asegura que no haya relleno */
    flex-direction: column; /* Esto asegura que las imágenes se apilen verticalmente */
    
}

.banner_horizontal3 {
    height: 55px;
    margin: 0;       /* Asegura que no haya márgenes */
    padding: 0;      /* Asegura que no haya relleno */
    float: right;
}

.banner_centrado {
    display: block;
    margin: 0 auto;
    /* Si quieres especificar un ancho, puedes hacerlo aquí, por ejemplo: */
    /* width: 300px; */
}


.banner_horizontal4 {
    height: 50px;
    margin: 0;       /* Asegura que no haya márgenes */
    padding: 0;      /* Asegura que no haya relleno */
    flex-direction: column; /* Esto asegura que las imágenes se apilen verticalmente */
    display: flex;
    
}

.banner_horizontal5{
    display: none;
}




.notifications_msn {
    position: fixed;  /* Esto hará que la imagen tenga una posición fija en la pantalla */
    bottom: 10px;     /* Esto la coloca a 10px del borde inferior */
    right: 10px;      /* Esto la coloca a 10px del borde derecho */
    z-index: 1000;    /* Esto asegura que la imagen esté por encima de otros elementos */
}


/*final tema banners*/

.h_1nosotros{
    font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    font-size: 300%;
    text-transform: uppercase;
}

.h_3nosotros{
    color:mediumspringgreen;
    font: 'Courier New', Courier, monospace;
    font-size: 160%;
    text-transform: uppercase;
    text-align: left;
  
    padding-right: 100px;
}

h3{
    font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    text-transform: uppercase;
}

.consejo{
    text-transform:none;
}

.crocodile{
font-size: 25px;
max-width: 512px;
}

.pie_de_video{
    text-transform:none;
    width: 560px;
}

.h3index{
    font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    padding: 0px 20px 0px 20px;
    text-align:center;
    justify-content: center;
    font-size: 260%;
    text-transform: uppercase;
    
}


.h3indexb{
    font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    padding: 0px 20px 0px 20px;
    text-align:center;
    justify-content: center;
    font-size: 350%;
    font-weight: bold;
    text-transform: uppercase;
}




h4{
    color:mediumspringgreen;
    padding: 0px 20px; 
}

.h_4nosotros{
    color:mediumspringgreen;
    font-size: 100%;
    text-align: left;
}

.saludo{
    color:mediumspringgreen;
    margin: -35px 0 0 79px; 
}

.subseccion_miscelanea{
  font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    font-size: 200%;
}


.nav-enlace{
   display: block;
   font-size: 135% ;
    background-color: mediumspringgreen;
    color: black;
    padding: 10px 14.3px;
    text-decoration:yellowgreen;
    font-family: 'Courier New', Courier, monospace;
}

.gifs_email{

    display: block;
}

.lampa{
  height:auto;
  margin: 15px 0px ;
  }

.nav-enlace:hover{
background: rgb(90, 3, 0);
color: rgb(212, 255, 132);
}

nav{
    display:flex;
    justify-content:space-around;
    padding: 10px;
}

.gifs_de_construccion{
    display:block;
}

.videoChirlas {
    width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
 }.cartel_welcome{
    height: 65px;
 }
 

@media all and (max-width: 465px) {
/* PARA IPHONE 5 HASTA MI MÓVIL */
    header {
       
        padding: 40px 2px; /* Some padding */
        display: block;
        text-align: center; /* Centered text */
        font-size: 5.4px; /* Big font size */
        
        transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
    }

    .locutor {
        font-family: "retrofuente";
        color:mediumspringgreen;
        font-size: 89%;
        width: 89%; /* Establecer el ancho al 100% de su contenedor */
     
    }

     xmp {
    font-size: 6.4px; /* Ajusta el tamaño de la fuente según tus necesidades */
    font-weight: bold;
     }

    
    
    .cartel_welcome{
        height: 35px;
     }

     .banner_centrado{
        display:none;
    }
  .banner_derecho1, .banner_derecho2, .banner_derecho3, .banner_derecho4, .banner_derecho5, .banner_derecho6, .banner_derecho7, .banner_derecho8 {
    display: none;
    }

    .banner_horizontal1, .banner_horizontal2, .banner_horizontal3, .banner_horizontal4{
        display:none;
    }

.banner_izquierdo1, .banner_izquierdo2, .banner_izquierdo3, .banner_izquierdo4, .banner_izquierdo5, .banner_izquierdo6, .banner_izquierdo7, .banner_izquierdo8 {
    display:none;
}

.banner_horizontal5{
    display: block;
}

.h_3nosotros{
    padding: 0px;
    margin: auto;
}

    
    .lampa{
    /* tengo que aprender a modificar en index la posición de las lámparas para ponerlas al lado de "ALTA" */
        display: none;
        height: auto;
    }
      
    img {
        max-width: 100%;
        max-height: 100%;
       }
       .lampa {
        height: 50px;
       }

    nav{
        flex-direction: column;
        }       
        .nav-enlace{
            justify-content: center;
            margin:10px ;    
        }

    h1{
        font-size: 20px;
    }

    

    .h3index{
        font-size: 20px;
    color:mediumspringgreen;
    }
    
    .h3indexb{
      font-size: 30px;
    }

    .videoMrJeff{
        width: 95%;
    }

    .videoChirlas{
        width:300px;
    }
}

@media all and (max-width: 1200px) {
/* PARA MI MOVIL HORIZONTAL*/
    header {
        padding: 50px 5px; /* Some padding */
        display: block;
        justify-content: center;
        text-align: center; /* Centered text */
        font-size: 7.8px; /* Big font size */
        margin: -60px -15px;
        transition: 0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */
    }


   

    xmp {
       
      font-weight: bold;
      }
    
    .lampa{
    /* tengo que aprender a modificar en index la posición de las lámparas para ponerlas al lado de "ALTA" */
        display: none;
        height: auto;
      
    }
    
      
    img {
        max-width: 100%;
        max-height: 100%;
       }
       
    .lampa {
        height: 50px;
       }
   
    nav{
        flex-direction: column;
        
        }       
        .nav-enlace{
            justify-content: center;
            text-align: left;
            margin:10px ;  
        }

    h1{
        font-size: 20px;
    }

    .h_3nosotros{
        color:mediumspringgreen;
        font: 'Courier New', Courier, monospace;
        font-size: 20px;
        text-transform: uppercase;
    }

    

    .locutor{
        font-size: 31px;
    }

    .h3index{
        font-size: 30px;
    }
    
    .h3indexb{
      font-size: 40px;
    }
    
    .h_1nosotros{
    font-family: 'Courier New', Courier, monospace;
    color:mediumspringgreen;
    font-size: 240%;
    text-transform: uppercase;
    }

    .videoMrJeff{
        width:85%;
    }

    .banner_centrado{
        display:none;
    }
  .banner_derecho1, .banner_derecho2, .banner_derecho3, .banner_derecho4, .banner_derecho5, .banner_derecho6, .banner_derecho7, .banner_derecho8 {
    display: none;
    }

    .banner_horizontal1, .banner_horizontal2, .banner_horizontal3, .banner_horizontal4{
        display:none;
    }

.banner_izquierdo1, .banner_izquierdo2, .banner_izquierdo3, .banner_izquierdo4, .banner_izquierdo5, .banner_izquierdo6, .banner_izquierdo7, .banner_izquierdo8 {
    display:none;
}

.banner_horizontal5{
    display: block;
}
    
}