html {
  scroll-behavior: smooth;
}

body {
  font-family: "Quicksand", sans-serif;
  transition: background 0.3s linear;
  user-select: none;
}

.bgColorLight {
  background-color: #c8c8c870;
  transition: background 0.3s linear;
}

.bgColorDark {
  background-color: #383838ee;
  transition: background 0.3s linear;
  color: white;
}

.flip-card-container {
  perspective: 1000px;
  margin-left: auto;
  margin-right: auto;

  height: 600px;
  width: 300px;
}

/* .flip-card */
.flip-card {
  width: 100%;
  height: 100%;

  position: relative;
  transform-style: preserve-3d;
  transition: 0.6s 0.1s;
}

/* hover and focus-within states */
.flip-card-container:hover .flip-card,
.flip-card-container:focus-within .flip-card {
  transform: rotateY(180deg);
}

/* .card-... */
.card-front,
.card-back {
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;

  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;

  backface-visibility: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* .card-front */
.card-front {
  transform: rotateY(0deg);
  z-index: 2;
}

/* .card-back */
.card-back {
  transform: rotateY(180deg);

  z-index: 1;
}

/* figure, .img-bg */
figure,
.img-bg {
  position: absolute;

  height: 100%;
}

/* img */
.flip-card-container img {
  height: inherit;
  border-radius: 0.5rem;
}

.card-back .cardBackText {
  color: white !important;
  text-shadow: 1px 2px 1px black;
}

.card-title {
  color: white !important;
  text-shadow: 2px 2px 2px black;
}

#mh .card-back .img-bg {
  background-image: url("./img/mh.png");
  filter: blur(7px);
  -webkit-filter: blur(7px);

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#ms .card-back .img-bg {
  background-image: url("./img/ms.png");
  filter: blur(7px);
  -webkit-filter: blur(7px);

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#ea .card-back .img-bg {
  background-image: url("./img/edapi.png");
  filter: blur(7px);
  -webkit-filter: blur(7px);

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* .img-bg */
.img-bg {
  background: hsla(var(--hue), 0, 0%, 0%);
  height: 100%;
}

/* figure */
figure {
  z-index: -1;
}

/* figure, .img-bg */
figure,
.img-bg {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}
.bgCardDark {
  background-color: #1d1d1dee;
  transition: background 0.3s linear;
  color: white;
}

.fontSpace {
  font-family: "Space Mono", monospace;
}

.blurBackgroundLight {
  background-color: rgba(223, 223, 223, 0.541);
  transition: background 0.3s linear;
  backdrop-filter: blur(10px);
}
.blurBackgrounDark {
  background-color: rgba(29, 29, 29, 0.541);
  transition: background 0.3s linear;
  color: white;
  backdrop-filter: blur(10px);
}
.form-switch .form-check-input:checked[type="checkbox"]:after {
  background-color: white;
  transition: background 0.3s linear;
}
.form-check-input[type="checkbox"]:checked:focus {
  background-color: rgb(114, 0, 195);
  transition: background 0.3s linear;
}
.form-check-input[type="checkbox"]:checked {
  background-color: rgb(114, 0, 195);
  transition: background 0.3s linear;
}

.maskLight {
  background-color: rgba(255, 255, 255, 0.455);
  transition: background 0.3s linear;
}
.maskDark {
  background-color: rgba(0, 0, 0, 0.708);
  transition: background 0.3s linear;
}

/** botones degradados */

/* btn-indigo */

.btn-gradIndigo {
  background-image: linear-gradient(
    to right,
    #6441a5 0%,
    #2a0845 51%,
    #6441a5 100%
  );
}
.btn-gradIndigo {
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
}

.btn-gradIndigo:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

/* btn-light */

.btn-gradLight {
  background-image: linear-gradient(
    to right,
    #e0eafc 0%,
    #cfdef3 51%,
    #e0eafc 100%
  );
}
.btn-gradLight {
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: black;
  box-shadow: 0 0 20px #eee;
}

.btn-gradLight:hover {
  background-position: right center; /* change the direction of the change here */
  color: rgb(0, 0, 0);
  text-decoration: none;
}

/* btn-red */

.btn-gradRed {
  background-image: linear-gradient(
    to right,
    #e52d27 0%,
    #b31217 51%,
    #e52d27 100%
  );
}
.btn-gradRed {
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
}

.btn-gradRed:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

/* btn-dark */

.btn-gradDark {
  background-image: linear-gradient(
    to right,
    #232526 0%,
    #414345 51%,
    #232526 100%
  );
}
.btn-gradDark {
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
}

.btn-gradDark:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

/* btn-blue */

.btn-gradBlue {
  background-image: linear-gradient(
    to right,
    #00d2ff 0%,
    #3a7bd5 51%,
    #00d2ff 100%
  );
}
.btn-gradBlue {
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
}

.btn-gradBlue:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

#contact {
  margin-top: 100px;
}

.btn-gitHub {
  background-color: #333333;
}
.btn-gitHub-indigo {
  background-color: rgb(89, 0, 152);
  transition: background 0.3s linear;
}