* {
    box-sizing: border-box;
}

/* Estilo de body */
body {
    font-family: Arial;
    margin: 0;
    font-size: 18px;
}

/* Estilo marquesina */
#marquesina{
background:rgb(240, 240, 240);
padding:5px;
}

/* Estilo de h4 */
h4{
text-align: center;
}

/* Estilo de h2 */
h2{
    text-align: center;
    font-family: Arial;
    }

/* Estilo de h5 */
h5{
    text-align: center;
    font-family: Arial;
    }

/* Estilo para texto a la izquierda */
.cool {
    text-align: left;
    font-family: Arial;
    padding: 1%; 
    width: 40%;
    float: left;
    margin-left: 7%;
    padding-bottom: 3%; 
    background-color: rgb(243, 224, 255); 
    color: rgb(112, 68, 122);
    }

/* Estilo 2 para la imagen a la derecha */
.derecha { 
    float: left;
    text-align: center;
    padding: 1%;
    padding-bottom: 3%;
    width: 40%;   
}

.vacio {
    float: left;
    width: 10%;
    padding: 1%;
    padding-bottom: 3%;  
}

/* Estilo de header */
.header {
padding: 60px;
text-align: center;
background: rgb(252, 232, 236);
color: rgb(172, 143, 158);
}

/* Estilo para div logo */
div.cajalogo {
width: 150px;
max-height: 100px;
float: left;
}

/* Estilo para logo */
img.logo {
width: 100px;
max-height: 100px;
padding-bottom: 15px;
float: center;
display: block;
}

/* Estilo de top navigation bar - la barra de navegacion superior */
.navbar {
display: flex;
background-color: rgb(214, 185, 191);
}

/* Estilo de navigation bar links -las ligas de la barra de vinculos*/
.navbar a {
color: rgb(83, 68, 68);
padding: 14px 20px;
text-decoration: none;
text-align: center;
}

/* Estilo para los enlaces al pasar el cursor encima*/
a:hover {
    color: rgb(169, 192, 255);
    text-decoration-line: none;
}


/* Cambiar color al pasar el cursor sobre opcion del menu */
.navbar a:hover {
background-color: rgb(254, 255, 238);
color: rgb(180, 125, 146);
}

/* Contenedor de columna */
.row {
display: flex;
flex-wrap: wrap;
}



/* Columna principal */
.main {
flex: 70%;
background-color: rgb(255, 255, 255);
padding: 20px;
}



/* Estilo para la imagen */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: none;
    max-height: 400px;
    width: 600px;
    height: 500px;
}

/* Estilo para el pie de pagina */
.footer {
    background-color: rgb(183, 205, 224);
    padding: 10px;
    text-align: center;
    color: white;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 10px;
}

/* Estilo para que el texto quede en el centro */
.textoCentro { 
    text-align: center;
    
}


/* Estilo para que el titulo rosa */
.textoPink { 
    padding: 10px;
    text-align: center;
    background: rgb(252, 232, 236);
    color: rgb(172, 143, 158);
    font-size: 15px;   
}

/* Estilo para texto en el centro */
.pez{
    text-align: left;
    font-family: Arial;
    padding: 60px; 
    width: 1600px;
    margin-left: 5%;
    }

/* Estilo para lista a la izquierda */
.mochi{
    text-align: left;
    font-family: Arial;
    padding: 50px; 
    width: 550px;
    margin-left: 20%;
    background: rgb(255, 255, 229);
    color: rgb(211, 166, 189);
    }















/* Diseño responsivo: cuando la pantalla tiene menos de 700 px de ancho, hacer que las
dos columnas se apilen una encima de otra en lugar de una al lado de otra */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}