/* ==== CSS Variables ====*/
:root {
  --page-logo-color: rgb(54, 150, 161);
}

/* ========= GLOBAL STYLES ========= */
body {
  background: linear-gradient(180deg, rgb(55, 83, 86), rgb(140, 174, 178));
  color: rgb(255, 255, 255);
}

/* ========= HEADER STYLES ========= */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0);
}

#page-logo a {
  color: var(--page-logo-color);
  background-color: transparent;
}

header a {
  color: var(--page-logo-color);
  background-color: darkslategray;
}

.menu-btn span {
  background-color: var(--page-logo-color);
}

/* ========= HERO SECTION ========= */

#hero video {
  position: absolute;
  top: 50%;
  left: 62%;
  min-width: 126%;
  min-height: 100%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
}

#hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 5% 20%;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  margin-top: 4rem;
}

/* ========= CITY INTRODUCTION ========= */
#city-introduction {
  background: linear-gradient(180deg, #978367, rgb(88, 113, 116));
  padding: 4rem;
}

#introduction-content {
  margin: 0 11%;
  text-align: justify;
}

/* ========== CITIES BEAUTIES ===========*/
.cities-beauties p {
  text-align: justify;
  margin: 2rem 14%;
}

.cities-beauties li {
  margin-bottom: 5rem;
}

/* ========= IMG MODAL STYLES | ASIDE  ========= */

/* === Fullscreen Image Styles === */
.fullscreen-img {
  color: blue;
  font-weight: bold;
}

.fullscreen-img:hover {
  text-decoration: underline;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}

.close {
  /*Use JS to add the class*/
  position: fixed;
  top: 0.9375rem;
  right: 2.1875rem;
  color: #f1f1f1;
  font-size: 2.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 1000;
  display: none;
}

.modal.show .close {
  /*Use JS to add the class*/
  display: block;
}

/* ======= Parallax Effect =======*/

.parallax {
  /* The image used */
  background-image: url("/img/places/madrid/royal-palace-of-madrid.jpg");

  /* Full height */
  height: 32rem;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#idRoyalPalace {
  background-image: url("/img/places/madrid/royal-palace-of-madrid.jpg");
}

#plazaMayor {
  background-image: url("/img/places/madrid/plaza-mayor2.jpeg");
}

#retiroParc {
  background-image: url("/img/places/madrid/retiro-park2.jpeg");
}

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */
@media only screen and (max-width: 85.375rem) {
  .parallax {
    background-attachment: scroll;
  }
}

.caption {
  position: sticky;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 1.125rem;
  font-size: 1.5625rem;
  letter-spacing: 0.625rem;
}

/* ========= MEDIA QUERIES ========= */
@media (max-width: 64rem) {
  /* 1024px */
  #hero-content {
    width: 80%;
  }

  #hero-content h1 {
    font-size: 2.5rem;
  }

  #hero-content p {
    font-size: 1.25rem;
  }

  .item-content {
    margin: 1.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  p {
    font-size: 1.2rem;
    text-align: justify;
  }

  main li img {
    width: 14.5rem;
    height: 24rem;
  }

  .horizontal-images {
    width: 15.5rem;
  }

  .styled-table {
    width: 95%;
  }
}

@media (max-width: 48.5rem) {
  /* 768px */
  #hero-content {
    width: 90%;
  }

  #hero-content h1 {
    font-size: 2.5rem;
  }

  #hero-content p {
    font-size: 1.25rem;
  }

  #hero-content a {
    font-size: 1rem;
  }

  #city-introduction {
    padding: 1.2rem 0.1rem;
  }

  #city-introduction h2 {
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
  }
}

@media (max-width: 40rem) {
  /* 630px */
  .caption span.border {
    font-size: 1rem;
  }

  #introduction-content,
  .cities-beauties p {
    margin: 2rem 10%;
  }

  .cards {
    flex-direction: column;
  }
}

@media (max-width: 30rem) {
  /* 630px */
  .caption span.border {
    font-size: 1rem;
    letter-spacing: 0.2rem;
  }

  #introduction-content,
  .cities-beauties p {
    margin: 2rem 5%;
  }
}

/* ================= Food Cards ================*/
#cities-foods h2 {
  margin: 2rem auto;
  text-align: center;
}

.cards {
  margin: 2rem auto;
}

.cards h3 {
  color: black;
}

#cities-foods article {
  margin: 2rem;
}

.cards {
  width: 100%;
  display: flex;
  /* display: -webkit-flex; */
  justify-content: center;
  align-content: center;
  /* -webkit-justify-content: center; */
  max-width: 51rem;
  flex-wrap: wrap;
}

.cards article {
  min-width: 20rem;
}

.card--1 .card__img,
.card--1 .card__img--hover {
  background-image: url("/img/places/madrid/food/tortilla-espanola.jpg");
}

.card--2 .card__img,
.card--2 .card__img--hover {
  background-image: url("/img/places/madrid/food/torreznos.webp");
}

.card--3 .card__img,
.card--3 .card__img--hover {
  background-image: url("/img/places/madrid/food/callos-a-la-madrileña.jpg");
}

.card--4 .card__img,
.card--4 .card__img--hover {
  background-image: url("/img/places/madrid/food/flan.jpg");
}

.card--5 .card__img,
.card--5 .card__img--hover {
  background-image: url("/img/places/madrid/food/churros.jpg");
}

.card__like {
  width: 1.125rem;
}

.card__clock {
  width: 15px;
  vertical-align: middle;
  fill: #ad7d52;
}
.card__time {
  font-size: 12px;
  color: #ad7d52;
  vertical-align: middle;
  margin-left: 5px;
}

.card__clock-info {
  float: right;
}

.card__img {
  visibility: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 14.6875rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.card__info-hover {
  position: absolute;
  padding: 1rem;
  width: 100%;
  opacity: 0;
  top: 0;
}

.card__img--hover {
  transition: 0.2s all ease-out;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  position: absolute;
  height: 14.6875rem;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
}
.card {
  margin-right: 25px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0, 1);
  background-color: #fff;
  width: 33.3%;
  position: relative;
  border-radius: 1.5625rem;
  overflow: hidden;
  box-shadow: 0px 13px 10px -7px rgba(0, 0, 0, 0.1);
}
.card:hover {
  box-shadow: 0px 30px 18px -8px rgba(0, 0, 0, 0.1);
  transform: scale(1.1, 1.1);
}

.card__info {
  z-index: 2;
  background-color: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 16px 24px 24px 24px;
}

.card__category {
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.125rem;
  font-weight: 500;
  color: #868686;
}

.card__title {
  margin-top: 0.3125rem;
  margin-bottom: 0.625rem;
  font-family: "Roboto Slab", serif;
}

.card__by {
  font-size: 0.75rem;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
}

.card__author {
  font-weight: 600;
  text-decoration: none;
  color: #ad7d52;
}

.card:hover .card__img--hover {
  height: 100%;
  opacity: 0.3;
}

.card:hover .card__info {
  background-color: transparent;
  position: relative;
}

.card:hover .card__info-hover {
  opacity: 1;
}