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

html, body {
  height: 100%;  /* Ensure the body takes up the full height of the viewport */
  margin: 0;     /* Remove default margin */
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  height: 100%;
  font-family: "Rubik", sans-serif;
  font-weight: 400;
  font-style: normal;
  color:#333;
  background-color: #fbfbfb;
  background: url('imgs/mapas.jpg') no-repeat center center fixed;
  background-size: cover;  /* Make the background image cover the entire viewport */

}

/* ---------- FONTS ---------- */
p { width:25%; font-size: 13px; margin:0 auto; min-width: 400px; background-color: #fbfbfb; }
a, a:hover { color: inherit; text-decoration: none; font-size: smaller;}

::-moz-selection, .highlight { /* Code for Firefox */
  color: rgb(255, 0, 115);
  background: rgb(245, 245, 122);
}

::selection, .highlight {
  display: inline;
  color: rgb(255, 0, 115);
  background: rgb(245, 245, 122);
}
.rubik-fonts {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/* ---------- LAYOUT ---------- */
#logo {
  position: absolute;
  width: 100%;
  padding: 0 5%;

  left: 0%;
  width: 100%;
  text-align: center;
  z-index: 100;
}

.responsive-img {
  max-width: 100%;
  height: auto;
  max-width: 220px;
}

.transparent-background {
  background-color: rgba(255, 255, 255, 0.5); /* Example with red color and 50% opacity */
}