@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif/static/NotoSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

body {
    text-align: justify;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 1rem;
    background-color: white;
}
header img {width: 125px;margin: 0px;height: 125px;}
header {font-family: 'Times New Roman', Times, serif;text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);}

.color-de-fondo-marrón{background-color: #a4001eff;}
.color-de-fondo-blanco{background-color: white;}
.color-de-fuente-blanco{color:white;}
.texto-centrado{text-align:center;}
.tipo-de-fuente{font-family: 'Times New Roman', Times, serif;}
.tamaño-de-fuente-grande{font-size: large;}

.text-container {width: 100%;max-width: 800px;margin: 0 auto;background-color: white;}

.imagen-principal {max-width: 100%;height: auto;display: block;}

span {background-color: grey;color: white;padding: 4px;}

/* View Transition (SPA) */

@view-transition {navigation: auto;}

.transicion-noticia-367{aspect-ratio: 1140 / 641; view-transition-name:Noticia-367;}



img {max-width: 800px;}

/* figure y figcaption */

figure {border: thin #c0c0c0 solid;display: flex;flex-flow: column;padding: 5px;max-width: 800px;margin: auto;}
  
figcaption {background-color: #222;color: #fff;font: italic smaller sans-serif;padding: 3px;text-align: center;}

/* Enlaces */

.link-images {display: flex;justify-content: center;gap: 10px;}
  
.link-images img {max-width: 30px;margin-top: 20px;pointer-events: auto;}

.link-container {text-align: center;}

/* Formulario de comentarios */

textarea {width: 800px;padding: 10px;margin-top: 10px;border: 1px solid #ddd;border-radius: 5px;display: flex;flex-direction: column;align-items: center;justify-content: center; height: auto;}

input {width: 800px;padding: 10px;margin-top: 10px;border: 1px solid #ddd;border-radius: 5px;display: flex;flex-direction: column;align-items: center; justify-content: center;height: auto;}

button {font-family: 'Times New Roman', Times, serif;font-size: 18px;font-weight: normal;color: black;background: #f7f7d4;border-radius: 2.5px;padding: 10px;box-shadow: 2px 2px 5px #888888;transition: all 0.5s ease;border: 0px solid black;}

button:active {box-shadow: inset 2px 2px 5px #888888;background: #e0e0b0;}

#nombre {padding: 10px;margin-top: 10px;border: 1px solid #ddd;border-radius: 5px;display: flex;flex-direction: column; 
align-items: center;justify-content: center; height: auto; background: white;}

#comentario {background: white;padding: 10px;margin-top: 10px;border-radius: 5px;}

button {position: relative;cursor: pointer;font-weight: normal;margin-top: 10px;margin-bottom: 0px;padding: 10px;}

.form-background {background-color: #f7f7d4;padding: 20px;justify-content: center; justify-items: center;}

.form-button-centrado {display: flex;justify-content: center;}

#comentarios-lista {background-color: #f7f7d4;}

#comentarios-lista p {margin: 0;padding: 10px;}

.buttons-background {background-color: #f7f7d4;padding: 10px;}

p {direction: ltr;unicode-bidi: isolate;}

[dir="ltr" i] {unicode-bidi: isolate;}

.leer-voz-alta {margin-top: 0px;margin-bottom: 0px;}

.detener-voz {margin-top: 0px;margin-bottom: 0px;}

/* Media Queries */

@media (max-width: 768px) {figure {border: none;display: flex;flex-flow: column;padding: 0px;max-width: 800px;margin: auto;}}

@media (max-width: 768px) {textarea, input {width: 100%;}}

@media (max-width: 768px) {body {
    text-align: justify;
    font-family: "Noto Serif", Georgia, serif;
    font-size: 1rem;
    background-color: white;
}}

@media (max-width: 768px) {.form-background {background-color: #f7f7d4;padding: 20px;justify-content: center;justify-items: center;}}




@media (max-width: 768px) {
  .transicion-noticia-367 {
    aspect-ratio: 1140 / 641;
  }
}


/* Bold */
@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif/static/NotoSerif-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Italic */
@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif/static/NotoSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Bold Italic */
@font-face {
    font-family: 'Noto Serif';
    src: url('fonts/NotoSerif/static/NotoSerif-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Extra Condensed ExtraBold Italic */
@font-face {
    font-family: 'Noto Serif Extra Condensed';
    src: url('fonts/NotoSerif/static/notoserif_extracondensed-extrabolditalic.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: italic;
}