/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/*===== VARIABLES CSS =====*/
:root {
  --header-height: 3rem;

  /*========== Colors ==========*/
  --first-color: #069C54;
  --first-color-alt: #048654;
  --title-color: #393939;
  --text-color: #707070;
  --text-color-light: #A6A6A6;
  --body-color: #FBFEFD;
  --container-color: #FFFFFF;

  /*========== Font and typography ==========*/
  --body-font: 'Poppins', sans-serif;
  --biggest-font-size: 2.25rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;

  /*========== Margenes ==========*/
  --mb-1: .5rem;
  --mb-2: 1rem;
  --mb-3: 1.5rem;
  --mb-4: 2rem;
  --mb-5: 2.5rem;
  --mb-6: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
} 

.imgRedonda {
  width: 300px;
  height: 300px;
  border-radius: 150px;
}

@media screen and (min-width: 768px){
  :root{
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*========== BASE ==========*/
*,::before,::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth; 
  background-color: rgb(5, 25, 5);
}

/*========== Variables Dark theme ==========*/
body.dark-theme{
  --title-color: #F1F3F2;
  --text-color: #C7D1CC;
  --body-color: #1D2521;
  --container-color: #27302C;
}

/*========== Button Dark/Light ==========
.change-theme{
  position: absolute;
  right: 1rem;
  top: 1.8rem;
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
}
*/
body{
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size); 
  color: var(--text-color);
  line-height: 1.6;
}

h1,h2,h3,p,ul{
  margin: 0;
}

ul{
  padding: 0;
  list-style: none;
}
 
 


/*========== CLASS CSS ==========*/
.section{
  padding: 4rem 0 2rem;
}

.section-title, .section-subtitle{
  text-align: center;
}

.section-title{
  font-size: var(--h1-font-size);
  color: var(--title-color);
  margin-bottom: var(--mb-3);
}

.section-subtitle{
  display: block;
  color: var(--first-color);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-1);
}

/*========== LAYOUT ==========*/
.bd-container{ 
  width: calc(100% - 2rem);
  margin-left: var(--mb-2);
  margin-right: var(--mb-2);
}
 

.l-header{ /*Header Menu*/
  width: 100%;
  position: fixed;
  height: 60px;
  margin-top: -20px;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color:rgb(12, 58, 21); /*color de la barra de menu*/
}

/*========== NAV ==========*/
.nav{
  max-width: 1024px;  /*Separacion del menu*/
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top:  10px; /*posicicion del nombre en el menu emerg*/
}

@media screen and (max-width: 768px){
  .nav {
    padding-top: 10px;
      /*posicicion del nombre en el menu emerg*/
    }

  .nav__menu{
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    padding: 1.5rem 0 rem;
    text-align: center;
    background-color: rgb(2, 3, 11); /*Color del menu emergente*/
    transition: .4s;
    box-shadow: 0 4px 4px rgba(0,0,0,.1);
    border-radius: 0 0 1rem 1rem;
    z-index: var(--z-fixed);
      }
}

.nav__item{
  margin-bottom: var(--mb-2);
}

.nav__link, .nav__logo, .nav__toggle{
  color:rgb(255, 242, 0);
  font-weight: var(--font-medium);
}

.nav__logo:hover{
  color:rgb(168, 188, 143);
}

.nav__link{
  transition: .3s;
}

.nav__link:hover{
  color: rgb(80, 182, 193);
}

.nav__toggle{ /*tamaño de la hamburgesa*/
  font-size: 2.3rem;
  cursor: pointer;
}

/* Show menu */
.show-menu{
  top: var(--header-height);
}

/* Active menu */
.active-link{
  color: rgb(163, 76, 83);
}

/* Change background header */
.scroll-header{
  box-shadow: 0 2px 4px rgba(71, 88, 166, 0.1);
}

/* Boton de subir */
.scrolltop{
  position: fixed;

  right: 1rem;
  bottom: -20%; 
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .3rem;
  background: rgba(79, 97, 27, 0.3);
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  transition: .4s;
  visibility: hidden;
}

.scrolltop:hover{
  background-color:rgb(175, 144, 45 );
}

.scrolltop__icon{
  font-size: 1.8rem;
  color: var(--body-color);
}

/* Show scrolltop */
.show-scroll{
  visibility: visible;
  bottom: 1.5rem;
}

/*========== GRID ==========*/

.contenedor {
  width: 100vw;
  /* el ancho del contenedor*/
  height: 100vh;
  max-width: 98vw;
  /* y este es el ancho máximo puede variar*/
  margin: 0px auto;
  margin-top: 50px;
  /* margen arriba y abajo y "auto" para centrar la web*/
  display: grid;
  /* esto formatea el gri*/
  grid-gap: 0px;
  /* margen entre las columnas y filas*/
  border: rgb(14, 4, 4) 1px solid;
  grid-template-columns: repeat(4, 1fr);
  /* 3 columnas de un mismo tamaño*/
  grid-template-rows: repeat(36, auto);
  grid-template-areas:  
  "porta1 porta1 porta2 porta2"
  "biogr1 biogr1 biogr1 biogr1"
  "biogrb biogrb biogrb biogrb"
  "biogr2 biogr2 biogr3 biogr3" 
  "publib publib publib publib"
  "public public public public"
  "publi0 publi0 publi0 publi0"
  "publi1 publi1 publi1 publi1"
  "poesia poesia poesia poesia"
  "libroa libroa librob librob" 
  "libroc libroc librod librod"
  "libroe libroe librof librof"
  "fotog1 fotog1 fotog1 fotog1" 
  "fotog2 fotog2 fotog3 fotog3"
  "foto2a foto2a foto3a foto3a"
  "fotog4 fotog4 fotog5 fotog5"
  "fotog6 fotog6 fotog7 fotog7"
  "fotog8 fotog8 fotog9 fotog9"
  "foto10 foto10 foto11 foto11"
  "foto12 foto12 foto13 foto13"
  "foto14 foto14 foto15 foto15"
  "foto16 foto16 foto17 foto17"
  "foto18 foto18 foto19 foto19"
  "foto20 foto20 foto21 foto21"
  "foto22 foto22 foto23 foto23"
  "foto24 foto24 foto25 foto25"
  "foto26 foto26 foto27 foto27"
  "foto28 foto28 foto29 foto29"
  "foto30 foto30 foto31 foto31"
  "foto32 foto32 foto33 foto33" 
  "foto34 foto34 foto35 foto35"
  "foto36 foto36 foto37 foto37"
  "foto38 foto38 foto39 foto39"
  "foto40 foto40 foto41 foto41"
  "links1 links1 links1 links1"
  "footer footer footer footer";
}

.contenedor>div, 
.contenedor .porta1,
.contenedor .porta2,
.contenedor .biogr1,
.contenedor .biogrb,
.contenedor .biogr2,
.contenedor .biogr3,
.contenedor .publib,
.contenedor .public,
.contenedor .publi0,
.contenedor .publi1,
.contenedor .poesia,
.contenedor .libroa,
.contenedor .librob,
.contenedor .libroc,
.contenedor .librod,
.contenedor .libroe,
.contenedor .librof,
.contenedor .texto1,
.contenedor .fotog1,
.contenedor .fotog2,
.contenedor .fotog3,
.contenedor .foto2a,
.contenedor .foto3a,
.contenedor .fotog4,
.contenedor .fotog5,
.contenedor .fotog6,
.contenedor .fotog7,
.contenedor .fotog8,
.contenedor .fotog9,
.contenedor .foto10,
.contenedor .foto11,
.contenedor .foto12,
.contenedor .foto13,
.contenedor .foto14,
.contenedor .foto15,
.contenedor .foto16,
.contenedor .foto17,
.contenedor .foto18,
.contenedor .foto19,
.contenedor .foto20,
.contenedor .foto21,
.contenedor .foto22,
.contenedor .foto23,
.contenedor .foto24,
.contenedor .foto25,
.contenedor .foto26,
.contenedor .foto27,
.contenedor .foto28,
.contenedor .foto29,
.contenedor .foto30,
.contenedor .foto31,
.contenedor .foto32,
.contenedor .foto33,
.contenedor .foto34,
.contenedor .foto35,
.contenedor .foto36,
.contenedor .foto37,
.contenedor .foto38,
.contenedor .foto39,
.contenedor .foto40,
.contenedor .foto41,
.contenedor .links1,
.contenedor .footer {  
  padding: 10px;  /*baja pagina hasta el final del header para q los links caigan exacto*/
  border-radius: 4px;
  border: rgb(23, 21, 21) 1px solid; /*borde de la grilla*/
}
 

.contenedor .porta1 {
  grid-area: porta1; 
flex-wrap: wrap;
  display: flex;
    align-items: center;
    justify-content: center; 
margin-left: 10px;
margin-right: 10px;
}

.contenedor .porta2 { /*Foto de la portada*/
  grid-area: porta2;    
  margin-left: 0px;
  text-align: center
}

.fot1{
margin-left: 0px;
}

.contenedor .biogr1 {
  grid-area: biogr1;  
}
.contenedor .biogrb {
  grid-area: biogrb;
  padding-top: 20px;
  padding-bottom: 40px;
}

 
.texjus{
  text-align: justify;
}
.texcenter{
  text-align: center;
  width: 100%;
}

.textder{
  text-align: right;
}
.ti1{
font-size: 18px;
font-weight: bold;
color: rgb(187, 244, 160);
}

.ti2a {
  font-size: 16px;
  font-weight: bold;
  color: rgb(187, 244, 160); 
}
.ti2 {
  font-size: 16px;
  font-weight: bold;
  color: rgb(226, 201, 109);
}
.ti3 {
  font-size: 12px;
  font-weight: bold;
  color: rgb(226, 201, 109);
}
.contenedor .biogr2 {
  grid-area: biogr2;  
  padding: 0px; 
  text-align: center;
} 
.contenedor .biogr3 {
  grid-area: biogr3;  
  padding: 0px;
  text-align: center;
}
.imgb img{
  width: 75%;
}


.contenedor .publib {
  grid-area: publib;
  padding-top: 20px;
    padding-bottom: 40px;

}

.contenedor .public {
  grid-area: public;
  display: flex;
    flex-wrap: wrap; 
    justify-content: center;

    color: bisque
}
.contenedor .publi0 {
  grid-area: publi0;
  padding: 0;

}  
.contenedor .publi1 {
 grid-area: publi1; 
  display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    margin-left: 0px;
   color: bisque
}
/* COLOR y ESILOSDE LOS ENLACES*/
a {
  text-decoration: none;
}

a {
  color: rgb(197, 173, 112);
}

a:visited {
  color: rgb(197, 173, 112);
}

.star img{
width: 19px;

}
.contenedor .poesia {
  grid-area: poesia;
  padding-bottom: 0px;
}
.contenedor .libroa {
  grid-area: libroa; 
}
 
.contenedor .librob {
  grid-area: librob;
  background-color: #0d0b2f;
}

.contenedor .libroc {
  grid-area: libroc; 
  background-color: #0d0b2f;
}

.contenedor .librod {
  grid-area: librod; 
}

.contenedor .libroe {
  grid-area: libroe; 
}

.contenedor .librof {
  grid-area: librof;
  background-color:#0d0a4a;
}

.contenedor .fotog1 {
  grid-area: fotog1; 
background-color: #080d07;
padding-bottom: 0px;
} 

.contenedor .fotog2 {
  grid-area: fotog2;
  background-color: #080d07;  
  text-align: center;  
  padding-bottom: 0px; 
  padding-top: 0px; 
}
.ftgf img{
  width: 100%;
  height: 359px; 
}


.contenedor .fotog3 {
  grid-area: fotog3;
  background-color: #080d07; 
  text-align: center; 
  padding-bottom: 0px; 
  padding-top: 0px;

}

.contenedor .foto2a {
  grid-area: foto2a;
  background-color: #080d07;
  text-align: center;
  padding-bottom: 0px;
  padding-top: 0px;

}

.contenedor .foto3a {
  grid-area: foto3a;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}


.contenedor .fotog4 {
  grid-area: fotog4;
  background-color: #080d07; 
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .fotog5 {
  grid-area: fotog5;
  background-color: #080d07; 
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .fotog6 {
  grid-area: fotog6;
  background-color: #080d07; 
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .fotog7 {
  grid-area: fotog7;
  background-color: #080d07; 
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .fotog8 {
  grid-area: fotog8;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .fotog9 {
  grid-area: fotog9;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto10 {
  grid-area: foto10;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto11 {
  grid-area: foto11;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto12 {
  grid-area: foto12;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto13 {
  grid-area: foto13;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto14 {
  grid-area: foto14;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto15 {
  grid-area: foto15;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}


.contenedor .foto16 {
  grid-area: foto16;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto17 {
  grid-area: foto17;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}







.contenedor .foto18 {
  grid-area: foto18;
  background-color: #080d07;
  text-align: center;
  padding-bottom: 0px;
  padding-top: 0px;

}

.contenedor .foto19 {
  grid-area: foto19;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto20 {
  grid-area: foto20;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto21 {
  grid-area: foto21;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto22 {
  grid-area: foto22;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto23 {
  grid-area: foto23;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto24 {
  grid-area: foto24;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto25 {
  grid-area: foto25;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto26 {
  grid-area: foto26;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto27 {
  grid-area: foto27;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto28 {
  grid-area: foto28;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto29 {
  grid-area: foto29;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto30 {
  grid-area: foto30;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}


.contenedor .foto31 {
  grid-area: foto31;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto32 {
  grid-area: foto32;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto33 {
  grid-area: foto33;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}
 

.contenedor .foto34 {
  grid-area: foto34;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto35 {
  grid-area: foto35;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}



.contenedor .foto36 {
  grid-area: foto36;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}


.contenedor .foto37 {
  grid-area: foto37;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.contenedor .foto38 {
  grid-area: foto38;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto39 {
  grid-area: foto39;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}


.contenedor .foto40 {
  grid-area: foto40;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;

}

.contenedor .foto41 {
  grid-area: foto41;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}
.contenedor .links1 {
  grid-area: links1;
  background-color: #080d07;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}


.contenedor .footer {
  grid-area: footer;
  background-color:#080d07;
}





/*========== HOME ==========*/ 

/*========== BUTTONS ==========*/
.button{
  display: inline-block;
  background-color: var(--first-color);
  color: #FFF;
  padding: .75rem 1rem;
  border-radius: .5rem;
  transition: .3s;
}

.button:hover{
  background-color: var(--first-color-alt);
}

/*==========  biografia ==========*/
 

/*========== publicaciones ==========*/
 

/*========== libros==========*/
 

/*========== fotografias ==========*/
 

/*========== Textos ==========*/
 

/*========== FOOTER ==========*/
 

/*========== MEDIA QUERIES ==========*/




@media screen and (max-width: 760px) {
.contenedor { 
grid-template-areas: 
    "porta1 porta1 porta1 porta1"
    "porta2 porta2 porta2 porta2"
    "biogr1 biogr1 biogr1 biogr1"
    "biogrb biogrb biogrb biogrb"
    "biogr2 biogr2 biogr2 biogr2"
    "biogr3 biogr3 biogr3 biogr3"
    "publib publib publib publib"
    "public public public public"
    "publi0 publi0 publi0 publi0"
    "publi1 publi1 publi1 publi1"
    "poesia poesia poesia poesia"
    "libroa libroa libroa libroa"
    "librob librob librob librob"
    "libroc libroc libroc libroc"
    "librod librod librod librod" 
    "libroe libroe libroe libroe"
    "librof librof librof librof"
    "fotog1 fotog1 fotog1 fotog1"
    "fotog2 fotog2 fotog2 fotog2"
    "fotog3 fotog3 fotog3 fotog3"
    "foto2a foto2a foto2a foto2a"
    "foto3a foto3a foto3a foto3a"
    "fotog4 fotog4 fotog4 fotog4"
    "fotog5 fotog5 fotog5 fotog5"
    "fotog6 fotog6 fotog6 fotog6"
    "fotog7 fotog7 fotog7 fotog7"
    "fotog8 fotog8 fotog8 fotog8"
    "fotog9 fotog9 fotog9 fotog9"
    "foto10 foto10 foto10 foto10"
    "foto11 foto11 foto11 foto11"
    "foto12 foto12 foto12 foto12"
    "foto13 foto13 foto13 foto13"
    "foto14 foto14 foto14 foto14"
    "foto15 foto15 foto15 foto15"
    "foto16 foto16 foto16 foto16"
    "foto17 foto17 foto17 foto17"
    "foto18 foto18 foto18 foto18"
    "foto19 foto19 foto19 foto19"
    "foto20 foto20 foto20 foto20"
    "foto21 foto21 foto21 foto21"
    "foto22 foto22 foto22 foto22"
    "foto23 foto23 foto23 foto23"
    "foto24 foto24 foto24 foto24"
    "foto25 foto25 foto25 foto25"
    "foto26 foto26 foto26 foto26"
    "foto27 foto27 foto27 foto27"
    "foto28 foto28 foto28 foto28"
    "foto29 foto29 foto29 foto29"
    "foto30 foto30 foto30 foto30"
    "foto31 foto31 foto31 foto31"
    "foto32 foto32 foto32 foto32"
    "foto33 foto33 foto33 foto33"
    "foto34 foto34 foto34 foto34"
    "foto35 foto35 foto35 foto35"
    "foto36 foto36 foto36 foto36"
    "foto37 foto37 foto37 foto37"
    "foto38 foto38 foto38 foto38"
    "foto39 foto39 foto39 foto39"
    "foto40 foto40 foto40 foto40"
    "foto41 foto41 foto41 foto41"
    "links1 links1 links1 links1"
    "footer footer footer footer";  
        padding: -20px;   
      } 
            
            .ftgf img {
              width: 100%;
              height: 259px;
            }
  
.imgb img{
  width: 100%;
}


.contenedor .publi1 { 
  margin-left: 10px;
  color: rgb(240, 178, 102);
  
}


.l-header {
  /*Header Menu*/
  width: 100%;  
  margin-top: 10px;
    margin-top:  -10px;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  background-color: rgb(12, 58, 21);
  /*color de la barra de menu*/
}

.nav {

  padding-top: 20px;

}

.contenedor .porta1 {
  grid-area: porta1;  
  flex-wrap: wrap;
    display: flex;
    align-items: center;
  justify-content:  center;
  text-align: center;
}

.contenedor .porta2 {
  /*Foto de la portada*/
  grid-area: porta2;
  margin-left: -10px;

}

.porta2 {
  margin-top: -40px;
}


.porta2 img {
  padding-left: 5px;
  text-align: center;

}


.fot1 {
  margin-left: -10px;
}



          } 
     
      
@media screen and (min-width: 768px){
 

  .section{
    padding-top: 8rem;
  }

  .nav{
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__list{
    display: flex;
  }
  .nav__item{
    margin-left: var(--mb-5);
    margin-bottom: 0;
  }
  .nav__toggle{
    display: none;
  }

  .change-theme{
    position: initial;
    margin-left: var(--mb-2);
  }
  

  .menu__container{
    grid-template-columns: repeat(3, 210px);
    column-gap: 4rem;
  }
  .menu__content{
    padding: 1.5rem;
  }
  .menu__img{
    width: 130px;
  }
 
}

@media screen and (min-width: 960px){
  .bd-container{
    margin-left: auto;
    margin-right: auto;
  }
 
}

/* For tall screens on mobiles y desktop*/
@media screen and (min-height: 721px) {
    .home__container {
        height: 640px;
    }
}