/* Colors */
/* Borders */
/* Fonts */
/* Just en aquesta pagina, no podem tenir els texte dels links blanc*/
a {
  color: black;
}

.page {
  display: flex;
  /* align vertical */
  align-items: center;
  /* align horizontal */
  justify-content: center;
}

.title,
.text-content {
  color: white;
}

/* LEFT SIDE */
.page .left {
  margin-right: 2rem;
  width: 25%;
}

.page .left .image-header {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
}

.page .left .title {
  font-weight: bold;
  color: white;
  font-size: 1.5rem;
  text-align: center;
  margin-top: 0.5rem;
}

.page .left .text-content {
  color: white;
}

.page .left .buttons {
  display: flex;
  justify-content: center;
}

.page .left .buttons .image {
  width: 2rem;
  height: auto;
  margin: 1rem;
}

/*Botons grans verds*/
.page .left .flex {
  display: flex;
  /* align vertical */
  align-items: center;
  /* align horizontal */
  justify-content: space-betwen;
  /* make space */
  margin-bottom: 0.75rem;
  /* style of elements */
  background-color: #a5c51e;
  border-radius: 20px;
}

.page .left .flex-image {
  width: 3rem;
  height: 3rem;
  margin-left: 1rem;
}

.page .left .flex-text {
  flex-grow: 1;
  text-align: center;
}

/* ---------------------------------------------- */
/* RIGHT SIDE */
.page .right-image {
  width: 100%;
  border-radius: 20px;
  border: 4px solid black;
  filter: drop-shadow(0 0 0.75rem black);
}

/* ---------------------------------------------- */
/* Media Queries

Aixo es tot el que aplica quan la pantalla te menys de 768px d'ample (mobils)

Amb aquestes opcions es sobreescriuen les anteriors, no cal reescriure tot

https://threkk.medium.com/how-to-make-a-css-only-hamburger-menu-f7ad41e13399

--------------------------------------------- */
@media all and (max-width: 1170px) {
  .page .left {
    width: 100%;
    margin: 0.5rem;
  }
  .page .right-image {
    display: none;
  }
}
/*--------------------------------------------- */