/* Colores y Fuentes */

:root {
  --priamry-text-color: #1d2327;
  --priamry-back-color: #f0f0f1;
  --priamry-link-color: #2271b1;
  --priamry-hover-color: #145991;
  --secondary-text-color: #f0f0f1;
  --secondary-back-color: #1d2327;
  --secondary-link-color: #f0f0f1;
  --secondary-hover-color: #72aee6;
  --button-link-color: #f0f0f1;
  --button-back-color: #2271b1;
  --button-hover-color: #f0f0f1;
  --button-hoverb-color: #145991;
  --priamry-font-family: "Roboto", sans-serif;
  --secondary-font-family: "Poppins", sans-serif;
}

/* Personalizado */

.container {
  max-width: 60rem;
}

/* Logotipo */

.custom-logo {
  height: auto;
  max-width: 33rem;
  margin: 0 auto;
  margin-top: 3rem;
}
@media only screen and (min-width: 600px) {
  .custom-logo {
      max-width: 45rem;
    }
}

/* Servicios */

.servicios {
  font-size: 125%;
}

/* Mapa */

.mapa {
  margin-bottom: 3rem;
}

/* Contacto */

.contacto {
  margin-bottom: 3rem;
}
.contacto a {
  display: block;
}
.contacto i {
  margin-right: 1.5rem;
}

/* Social */

.social {
  margin-bottom: 3rem;
}
.social a {
  display: inline-block;
}

/* General */

#body {
  background: var(--priamry-back-color);
  color: var(--priamry-text-color);
  font-family: var(--priamry-font-family);
  background-image:url(https://moflesmario.papeleriapip.com/assets/images/background.jpg);
  color: white;
}
#nav {
  background: var(--secondary-back-color);
  color: var(--secondary-text-color);
}
#nav a {
  color: var(--secondary-link-color);
}
#nav a:hover {
  color: var(--secondary-hover-color);
}
#footer {
  background: var(--secondary-back-color);
  color: var(--secondary-text-color);
}
#footer a {
  color: var(--secondary-link-color);
}
#footer a:hover {
  color: var(--secondary-hover-color);
}
a {
  color: var(--priamry-link-color);
}
a:hover {
  color: var(--priamry-hover-color);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--secondary-font-family);
}
input:not([type="submit"]),
select,
textarea {
  font-family: var(--priamry-font-family);
}
button,
.btn {
  background: var(--button-back-color);
  color: var(--button-link-color);
  font-family: var(--priamry-font-family);
  border: 1px solid var(--button-back-color);
  background: #C70039;
  border: 1px solid #FF5733;
}
button:hover,
.btn:hover {
  background: var(--button-hoverb-color);
  color: var(--button-hover-color);
  background: #900C3F;
  color: #ffffff;
}

.sombra {
    text-shadow: 1px 1px 2px black, 0 0 1em grey, 0 0 0.2em black;
}