body {
  width: 100%;
  text-align:center;
  font-family: FreqMod Dear Book, monospace!important; font-size:16pt!important;
  color:silver!important;
  background-color:#101010!important;
}

/* ---------------------------------------------------- */
/* MEDIA QUERIES APLICADAS */
/* ---------------------------------------------------- */

/* 1. VISTA MÓVIL (hasta 600px) */
@media only screen and (max-width: 600px) {
    .container {                
        width: 100% !important;     
    }
    
    /* APLICAMOS LA ESCALA A TODO EL CONTENIDO DEL BODY */
    body {
        /* Calcular la escala necesaria. 
           Si tu diseño original es para ~685px y el móvil es ~400px, 
           la escala es aprox 0.58. Ajusta el valor (0.6, 0.7, etc.) según necesites. */
        transform: scale(0.61); 
        transform-origin: top left; /* Escala desde la esquina superior izquierda */
        
        /* Asegúrate de añadir los prefijos para compatibilidad */
        -moz-transform: scale(0.61);
        -moz-transform-origin: top left;
        -webkit-transform: scale(0.61);
        -webkit-transform-origin: top left;
        
        /* 
           Ajusta el ancho del body para que ocupe el 100% del viewport
           después de la escala, eliminando el scroll horizontal sobrante.
        */
        width: 100% !important; 
        box-sizing: border-box;
    }
    
    /* Elimina cualquier otra regla de escala o ancho fijo que hayas añadido aquí para #mainContainer */
}

title {
	text-align: center;
	color: white;
}

h2 {
	font-family: FreqMod Dear Book, monospace;
    font-size:33px;
    text-align: center;
    color: #000000;
    font-weight:bold;
}

a {
	color:honeydew;
	font-weight:bold;
	text-decoration:none;
	text-shadow: 1px 1px #000000;
	}
a:hover {
	color:honeydew;
	font-weight:bold;
	text-decoration:none;
	}
	
a:visited {
    color: tan;
}	
#mainContainer {
  margin:auto;
  width: 685px;
  height: 315px;
  text-align: left;
  padding: 5px 0px 5px 5px; 
  border: 2px solid sienna; 
}
.clear {
  clear: both;
}
#DHTMLgoodies_panel_one, #DHTMLgoodies_arrows, #DHTMLgoodies_thumbs {
  width: 240px;
}
#DHTMLgoodies_panel_one {
  float: left;
}
#DHTMLgoodies_thumbs {
  overflow: hidden;
  height: 280px;
  position: relative;
  float: left;
}
#DHTMLgoodies_largeImage {
  width: 400px;
  height: 310px;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}
#DHTMLgoodies_largeImage table {
 /*width: 100%;*/
 height: 100%;
 text-align: center;
}
#DHTMLgoodies_largeImage img {
/*
 border: 1px solid #FFBF00;
*/
 width: auto;
 height: 310px;
 max-width: 418px;
 object-fit: cover;
/*
 establezco el ancho automático y el alto, según se definió en el diseño de la página; la imagen se escala cuando se muestra la vista previa.
*/
}
.strip_of_thumbnails {
  width: 114px;
  padding-top: 5px;
  padding-right: 1px;
  padding-bottom: 1px;
  padding-left: 5px;
  position: absolute;
}
.strip_of_thumbnails div {
 width: 110px;
 height: 90px;
 padding: 1px;
 text-align: center;
}
.strip_of_thumbnails img {
 border: 0px none;
 padding: 5px;
}
.strip_of_thumbnails .activeImage {
  border: 1px solid sienna; 
  padding: 5px;
}
.leftArrow {
  float: left;
}
.rightArrow {
  float: right;
}
#DHTMLgoodies_thumbs_inner {
  position: relative;
  width: 1000px;
}
#bg_color {
  color: #FFBF00;
}

#escalado{
	zoom: 1.2; /* Old IE only */
	-zoom-transform-origin: top left;
    -moz-transform: scale(1.2);
    -moz-transform-origin: top left;
    -webkit-transform: scale(1.2);
    -webkit-transform-origin: top left;
    transform: scale(1.2);
    transform-origin: top left;
}