@charset "UTF-8";
/*RESET*/
* {
  /* El '*' hace que se aplique a TODOS los html linkeados a este CSS */
  margin: 0;
  /*NO SE SI LO APLICA PORQUE NO ME PONE LAS IMAGENES PEGADAS AL BORDE???
  O DONDE ESTOY PONIENDO UN MARGIN????? */
  padding: 0;
  box-sizing: border-box;
}

/*=============== ESTILOS GENERALES ===================================*/
/* al NO tener el '.' ANTES del Nombre hace que se APLIQUE en TODOS los  BODYS */
body {
  background-color: rgb(214, 200, 226);
  font-family: "Times New Roman", Times, serif;
}

/*img {
    max-width: 100%;
    /*ocupa el 100% del espacio destinado*/
/*que a su vez ese espacio destinado DEPENDE del tipo de pantalla que se este utilizando*/
/*por lo tanto esa linea de alguna manera es RESPONSIVE */
/*  border-radius: 20px;



}*/
/* ESTILOS HEADER */
header {
  display: flex;
  /* coloca el menu al lado del logo */
  justify-content: space-between;
  /* el logo va a la izquierda y el menu a la derecha */
  align-items: left;
  /* centra el contenido del menu, sino se "pega" al borde de arriba */
  padding-right: 0;
  margin-right: 0;
}
header nav ul {
  color: black;
  list-style: none;
  display: flex;
  /* coloca el menu al lado del logo */
  justify-content: space-between;
  /* el logo va a la izquierda y el menu a la derecha */
  align-items: left;
  /* centra el contenido del menu, sino se "pega" al borde de arriba */
  padding-right: 0;
  margin-right: 0;
  gap: 20px;
  /*es la separacion entre las palabras del menú. Mientras mayor sea este valor, se va achicando la imagen del logo */
  flex-direction: row;
  padding-right: 40px;
  /*distancia que se aleja la ultima palabra del menu respecto del borde derecho de la pagina */
}

body header nav div img {
  /*este estilo SOLO lo aplica en la ruta 'body header nav div img', es decir que se aplica SOLO en la imagen del Logo */
  max-width: 100%;
  border-radius: 10px;
}

/*--------------- ESTILOS del MAIN --------------------------------------*/
/*------APLICABLES PARA "only-murders-uno.html"--------------------------------*/
main {
  flex-wrap: wrap;
  /*asi se adapta a pantallas pequeñas */
  margin-top: 1.5%;
}

main.textos {
  text-align: center;
}

section {
  /*Es la Etiqueta PADRE */
  display: flex;
  /* padding-left: 0.8%; 
  /* padding-right: 0.2%; */
  font-size: large;
}

section div p {
  text-align: justify;
  align-content: center;
  padding-right: 20px;
  /* se ve en la version mobile y es solo para los cuadros de textos */
  padding-left: 20px;
}

section div h1 {
  padding-left: 20px;
}

section div h2 {
  padding-left: 20px;
}

section div img {
  /*se aplicar en TODOS los 'img' que hay dentro de un'section' y luego de un 'div' SIN IMPORTAR si estoy 'llamando' a otra clase */
  align-content: center;
  border-radius: 20px;
  padding-right: 10px;
  /* ME RECORTA UN POCO EL border-radius PERO ELIJO ESTE YA QUE EL margin-right NO LO ESTA TOMANDO */
  /*margin-right: 20px; */
  margin-left: 10px;
  padding-left: 2px;
  /*NO usar padding porque sino me corta el border-radius */
  /*height: 100%; */
  /*width: auto;*/
  max-width: 100%;
  margin-right: 2%;
  margin-top: 4%;
  margin-bottom: 1%;
}

/*----------------------------------------------------------------------------------*/
.imagen {
  /* al SI llevar el '.' es una CLASE por lo que se aplica CADA vez que la llame */
  text-align: center;
  border-radius: 20px;
}

/* Texto al lado de la imagen en el index */
.titulo {
  text-align: center;
  color: black;
  font: bold;
  padding-top: 1%;
  padding-bottom: 1%;
}

.intro-a-la-nota {
  text-align: center;
  font-style: italic;
  font-size: large;
  font-weight: bold;
  margin-left: 5%;
  margin-right: 5%;
}

.fuente-fuente {
  text-align: center;
  font-size: small;
}

.texto-de-la-nota {
  text-align: left;
  padding-bottom: 1%;
  padding-right: 0px;
  margin-right: 0px;
}

.autor {
  color: rgb(221, 22, 39);
  font-weight: bold;
  margin-left: 2.5%;
}

.fecha {
  color: rgb(221, 22, 39);
  font-weight: bold;
  font-style: italic;
  margin-left: 2.5%;
}

.negrita {
  font-weight: bold;
}

.cursiva {
  font-style: italic;
}

.negritacursiva {
  font-weight: bold;
  font-style: italic;
}

/*--------------- ESTILOS del FOOTER  -----------------------------------*/
/*  al NO tener el '.' ANTES del Nombre hace que se APLIQUE en TODOS los FOOTERS */
footer {
  background-color: rgb(214, 247, 139);
  text-align: center;
  color: black;
  /*PADDING = distancia que hay respecto a los margenes del contenedor */
  /*MARGIN = distancia que hay respecto a los  marganes de la pantalla */
  margin-bottom: 0px;
  padding-top: 1%;
  padding-bottom: 1%;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-left: 1%;
}

div ul li {
  /* SOLO se aplica en esa ubicacion que corresponde a las palabras del menu */
  font-weight: bold;
  font-size: x-large;
}

div img {
  border-radius: 20px;
  max-width: 100%;
  align-content: center;
  border-radius: 20px;
  padding-right: 10px;
  /* ME RECORTA UN POCO EL border-radius PERO ELIJO ESTE YA QUE EL margin-right NO LO ESTA TOMANDO */
  margin-left: 10px;
  padding-left: 2px;
  margin-right: 2px;
  margin-bottom: 1%;
}

/*=============== ESTILOS PARA EL BOOTSTRAP con PSEUDOCLASES ===============*/
.titulo-boot {
  text-align: center;
  font-size: xx-large;
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.texto-boot-negrita {
  font-size: large;
  text-align: center;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  margin-bottom: 2%;
  margin-left: 2%;
}

.texto-boot-parrafos {
  font-size: large;
  text-align: justify;
  font-family: "Times New Roman", Times, serif;
  margin-left: 1%;
  /*align-content: center;*/
  /*=============== ESTILOS para el INDEX ===========================================*/
}
.texto-boot-parrafos .imagen-boot {
  margin-bottom: 2%;
  width: 100%;
}
.texto-boot-parrafos .imagen-boot-logo {
  /*width: 100%;*/
  margin-left: 2%;
}
.texto-boot-parrafos .container-fluid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-left: 1%;
}
.texto-boot-parrafos .div-index-texto-e-imagen {
  display: flex;
  text-align: left;
  margin-left: 1%;
  margin-top: 1%;
  margin-right: 2%;
  align-content: center;
}
.texto-boot-parrafos .h2-index-titulo {
  margin-left: 2%;
}
.texto-boot-parrafos .p-index-texto {
  margin-left: 2%;
}
.texto-boot-parrafos .imagen-index {
  max-width: 100%;
}

/*======= TABLET ===========*/
@media screen and (min-width: 600px) {
  .container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
  }
}
/*======= TABLET  ===========*/
@media screen and (min-width: 600px) {
  .container-fluid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
  }
}
/*

 VER "https://mdbootstrap.com/docs/standard/extended/hamburger-menu/#section-basic"




 <nav class="navbar bg-body-tertiary">
  <div class="container-fluid">
    <button data-mdb-button-init class="navbar-toggler" type="button" data-mdb-collapse-init
      data-mdb-target="#navbarToggleExternalContent2" aria-controls="navbarToggleExternalContent2"
      aria-expanded="false" aria-label="Toggle navigation">
      <i class="fas fa-bars"></i>
    </button>
  </div>
</nav>
<div class="collapse" id="navbarToggleExternalContent2">
  <div class="bg-body-tertiary shadow-3 p-4">
    <button data-mdb-button-init data-mdb-ripple-init
      class="btn btn-link btn-block border-bottom m-0">Link 1</button>
    <button data-mdb-button-init data-mdb-ripple-init
      class="btn btn-link btn-block border-bottom m-0">Link 2</button>
    <button data-mdb-button-init data-mdb-ripple-init class="btn btn-link btn-block m-0">Link
      3</button>
  </div>
</div>


*/
/*======= DESKTOP  ===========*/
@media screen and (min-width: 1024px) {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    margin-right: 0px;
  }
}
/*======= DESKTOP ===========*/
@media screen and (min-width: 1024px) {
  .container-fluid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}

/*# sourceMappingURL=style.css.map */