@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Comforter+Brush&family=Heebo:wght@100;400;900&family=Lora&display=swap');

:root{

  /**
   * colores
   */

  --battleship-gray: hsl(0, 0%, 53%);
  --viridian-red: hsl(0, 82%, 31%);
  --silver-chalice: hsl(0, 0%, 69%);
  --mikado-yellow: hsl(139, 88%, 16%);
  --granite-gray: hsl(0, 0%, 40%);
  --independence: hsl(219, 20%, 32%);
  --spanish-gray: hsl(0, 0%, 61%);
  --oxford-blue: hsl(222, 46%, 17%);
  --black-coral: hsl(223, 8%, 44%);
  --eerie-black: hsl(210, 11%, 15%);
  --light-gray: hsl(0, 0%, 80%);
  --white-2: hsl(0, 0%, 98%);
  --white-1: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --jet:hsl(17, 90%, 31%);


  /**
   * typografia
   */
  --font-family1: 'Abril Fatface', cursive;
  --font-family2: 'Comforter Brush', cursive;
  --font-family3: 'Heebo', sans-serif;


/**
   * transition
   */

   --transition-1: 0.15s ease;
   --transition-2: 0.35s ease;
   --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);
 
}

/***************************************/



.container {
    margin-top: 50px;
  }

 .container h2 {
    margin-top: 0;
    font-family: var(--font-family2);
    font-size: 3em;
  }

.container p{
font-size: 1.4em;
    font-family: var(--font-family3);
}
  video {
    width: 100%;
    height: auto;
  }

  .btn_leer{

    background-color: var(--viridian-red);
    color: var(--white-2);
    width: 50%;
    font-size: 1.2em;
    border-radius: 20px;
    margin-bottom: 10px;
  }

  .btn_leer:hover{
background-color: var(--mikado-yellow);
transition: var(--transition-1);
  }

/* ALOJAMIENTO */

.alojamiento{
    padding: 5%;

}

.alojamiento h2{

    font-family: var(--font-family2);
    font-size: 3em;
}
.alojamiento p{

    font-family: var(--font-family3);
    font-size: 1.4em;
    font-weight: 300;
}


/* HACER Y VER */

.hacer{
    padding: 5%;

}

.hacer h2{
    font-family: var(--font-family2);
    font-size: 3em;
    
}

.hacer p{
    font-family: var(--font-family3);
    font-size: 1.4em;
    font-weight: 300;

}

/* GASTRONOMIA */

.gastronomia{

    padding: 5%; 
}

.gastronomia h2{

    font-family: var(--font-family2);
    font-size: 3em;
}
.gastronomia p{

    font-family: var(--font-family3);
    font-size: 1.4em;
    font-weight: 300;
}


/* TRANSPORTE EN RABAT */

.transporte{

    padding: 5%;
}

.transporte h2{

    font-family: var(--font-family2);
    font-size: 3em;
}

.transporte p{

    font-family: var(--font-family3);
    font-size: 1.4em;
    font-weight: 300;
}


  /* GALERIA */
  
  .galeria_rabat{

    width: 100%;
    height: auto;
  }
.close {
    font-size: 1.5em;
  }
  
  .col-12 img {
    opacity: 0.8;
    cursor: pointer;
    width: 100%;
  }
  
  .col-12 img:hover {
    opacity: 1;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }


  /* ENLACE DE MICROSOFT */

  .btn_micro p{

    font-family: var(--font-family1);
    font-size: 2em;
  }

  .centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
  }

  .centered .btn{
background-color: var(--viridian-red);
  }

  .centered .btn:hover{

    background-color: var(--mikado-yellow);
    transition: var(--transition-1);
  }