@charset "UTF-8";
/* Typografía
font-family: "Montserrat", sans-serif;
*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: rgb(33, 33, 33);
  font-family: "Montserrat", sans-serif;
  color: rgb(255, 255, 255);
  font-size: 20px;
}

/* CSS Mobile first
X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap */
a {
  text-decoration: none;
  background-color: transparent;
  color: rgb(255, 255, 255);
  font-size: 1em;
  padding: 0.1em;
  /* Extend */
}
a:hover {
  background-color: rgb(255, 251, 0);
  color: rgb(33, 33, 33);
}
a.active {
  color: rgb(255, 251, 0);
}
a.portfolio {
  background-color: rgb(255, 251, 0);
}

.figure-caption-gabi {
  color: rgb(255, 255, 255);
  font-size: 0.5em;
  font-style: italic;
}

h1 {
  font-size: 2.5em;
  font-weight: 300;
  margin: 100px auto 50px;
}
h1 span {
  color: rgb(255, 251, 0);
}

h2 {
  font-size: 1.5em;
  font-weight: 600;
}

label {
  font-size: 0.8em;
  font-style: italic;
}

p {
  font-size: 0.8em;
  line-height: 1.8em;
}
p.home {
  font-size: 1em;
  line-height: 1.8em;
  margin-bottom: 80px;
}

.portfolio {
  height: 250px;
  width: 250px;
}

.mapa {
  width: 100%;
  margin-bottom: 20px;
}

nav {
  background-color: rgb(33, 33, 33);
  box-shadow: 5px 5px 15px 3px rgba(0, 0, 0, 0.5);
}
nav div a.navbar-brand {
  font-size: 1em;
  color: rgb(255, 255, 255);
}
nav div a.navbar-brand:hover {
  background-color: rgb(33, 33, 33);
  color: rgb(255, 255, 255);
}
nav div a.navbar-brand:focus {
  color: rgb(255, 255, 255);
}
nav div a.navbar-brand img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}
nav div .navbar-toggler {
  border: 1px solid rgb(255, 255, 255);
}
nav div .navbar-toggler:focus {
  border: 1px solid rgb(255, 251, 0);
  box-shadow: none;
}
nav div .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24' /%3E%3C/svg%3E");
}
nav .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
  padding-left: 10px;
  border-radius: 5px;
}
nav .navbar-nav .nav-link.active {
  color: rgb(255, 251, 0);
  font-weight: bold;
}
nav .navbar-nav .nav-link:hover {
  color: rgb(33, 33, 33);
}
nav .navbar-nav .nav-link img {
  width: 20px;
  animation: wapp-beat 3s ease 0s infinite normal forwards;
}

footer {
  background-color: rgb(33, 33, 33);
  padding: 5px;
}
footer span {
  font-size: 0.6em;
}
footer a {
  margin: 5px;
  vertical-align: middle;
}
footer a:hover {
  border-radius: 5px;
}

.card-gabi {
  margin: 20px;
}
.card-gabi .card-text, .card-gabi .card-title {
  color: rgb(255, 255, 255);
  line-height: 1.3em;
  font-size: 0.7em;
}
.card-gabi .card-title {
  font-size: 0.8em;
  font-weight: bold;
}
.card-gabi .card-update {
  font-size: 0.6em;
}
.card-gabi img {
  filter: brightness(40%);
}

.tecnica-collage {
  font-size: 0.6em;
  color: white;
  border-radius: 10px;
  background-color: rgba(231, 111, 81, 0.5);
  display: inline-block;
  padding: 0 15px 0 0;
}
.tecnica-collage::before {
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
  margin: auto 5px auto 10px;
  content: "\f0c4"; /* Código del ícono */
}

.tecnica-tinta {
  font-size: 0.6em;
  color: white;
  border-radius: 10px;
  background-color: rgba(244, 162, 97, 0.5);
  display: inline-block;
  padding: 0 15px 0 0;
}
.tecnica-tinta::before {
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
  margin: auto 5px auto 10px;
  content: "\f5ad"; /* Código del ícono */
}

.tecnica-mixta {
  font-size: 0.6em;
  color: white;
  border-radius: 10px;
  background-color: rgba(233, 196, 106, 0.5);
  display: inline-block;
  padding: 0 15px 0 0;
}
.tecnica-mixta::before {
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
  margin: auto 5px auto 10px;
  content: "\f3cb"; /* Código del ícono */
}

.tecnica-crayon {
  font-size: 0.6em;
  color: white;
  border-radius: 10px;
  background-color: rgba(42, 157, 143, 0.5);
  display: inline-block;
  padding: 0 15px 0 0;
}
.tecnica-crayon::before {
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
  margin: auto 5px auto 10px;
  content: "\f304"; /* Código del ícono */
}

.carouselGabi {
  padding-bottom: 80px;
  max-width: 500px;
}

.carouselGabi img, .side-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.formGabi {
  margin: 20px auto 100px;
  text-align: right;
}
.formGabi .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgb(255, 251, 0);
}
.formGabi textarea {
  height: 100px !important;
  border: none;
}
.formGabi input {
  padding: 10px;
  color: rgb(33, 33, 33);
  border: none;
}

/* -lg Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .carouselGabi {
    margin-top: 15vh;
  }
}
/* -xl X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .card-gabi div p {
    line-height: 1.5em;
    font-size: 0.7em;
  }
}
/* Contact form - SEND*/
.btn-enviar {
  font-size: 0.8em;
  margin: 20px 0px;
  border: 1px solid rgb(255, 251, 0);
  color: rgb(255, 251, 0);
  background-color: rgb(33, 33, 33);
  display: flex;
}
.btn-enviar:hover {
  color: rgb(33, 33, 33);
  background-color: rgb(255, 251, 0);
}

/* Portfolio - ZOOM IN */
.btn-zoom {
  font-size: 0.8em;
  margin: 20px 0px;
  border: 1px solid rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  background-color: rgb(33, 33, 33);
  display: flex;
}
.btn-zoom:hover {
  color: rgb(33, 33, 33);
  background-color: rgb(255, 255, 255);
}

@keyframes wapp-beat {
  0% {
    animation-timing-function: ease-out;
    transform: scale(1);
    transform-origin: center center;
  }
  10% {
    animation-timing-function: ease-in;
    transform: scale(0.91);
  }
  17% {
    animation-timing-function: ease-out;
    transform: scale(0.98);
  }
  33% {
    animation-timing-function: ease-in;
    transform: scale(0.87);
  }
  45% {
    animation-timing-function: ease-out;
    transform: scale(1.5);
  }
  100% {
    transform: scale(1); /* Mantiene el estado final durante la pausa */
  }
}

/*# sourceMappingURL=style.css.map */