:root {
  --color-primary: #fc6666;
  --color-secondary: #66fcf1;
}

body {
  font-family: "Lexend";
  color: #d9d9d9;
  background-color: #0b1834;
}

.title-primary,
.text-primary {
  color: var(--color-primary) !important;
}

.title-secondary,
.text-secondary {
  color: var(--color-secondary) !important;
}

.text-justify {
  text-align: justify;
}

#main-navbar {
  background-color: rgba(7, 17, 38, 0.59);
  backdrop-filter: blur(6.5px);

  .navbar-brand img {
    height: 45px;
  }

  /* Boton menu*/
  .navbar-toggler {
    border: none;

    &:focus {
      box-shadow: none;
    }

    .navbar-toggler-icon {
      background-image: none;
      width: 30px;
      height: 20px;
      background-color: transparent;
      padding: 0;
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;

      &::before,
      &::after {
        display: block;
        position: relative;
        content: "";
        top: 50%;
        left: 0;
        height: 1px;
        background-color: #fff;
      }
    }
  }
  /* * */

  a.nav-link {
    color: #fff;
    font-size: 1.2rem;
    padding: 0.5rem 1.25rem;

    &:hover {
      color: var(--color-primary);
    }
  }
}
/* * */

@keyframes spin {
  from {
    -webkit-transform: translateY(-50%) rotate(0deg);
    -ms-transform: translateY(-50%) rotate(0deg);
    transform: translateY(-50%) rotate(0deg);
  }

  to {
    -webkit-transform: translateY(-50%) rotate(360deg);
    -ms-transform: translateY(-50%) rotate(360deg);
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes spin2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.spinner-inicio-disco {
  max-width: 300px;
  animation: spin2 7000ms infinite linear;
}

.spinner-acerca-disco {
  max-width: 600px;
  animation: spin2 7000ms infinite linear;
}
/* * */

.btn {
  border: none;
  border-radius: unset;

  &:hover {
    filter: brightness(110%);
  }

  &:active {
    filter: brightness(90%);
  }

  &.btn-primary {
    &,
    &:active {
      color: #000000;
      background-color: var(--color-primary);
    }
  }
}

.bg-section {
  background-color: #071126;
}

.card {
  border: none;
  border-radius: 0px;
  color: #fff;
  background-color: #0b1834;

  .card-img,
  .card-img-top,
  .card-img-bottom,
  .card-img-overlay {
    border-radius: 0px;
  }

  &.card-acerca {
    img {
      background-color: var(--color-primary);
    }
  }

  &.card-contacto {
    img {
      background-color: #28344c;
    }
  }

  &.card-audio-player {
    .row:first-child {
      background-color: #28344c;
    }

    audio {
      background-color: #fff!important;
    }
  }

  &.card-programa {
    .card-img-overlay {
      background: linear-gradient(
        0deg,
        rgba(2, 0, 36, 0.5) 50%,
        rgba(0, 212, 255, 0.85) 100%
      );
    }
  }
}

form {
  .form-control {
    border: none;
    border-radius: 0px;
    color: #fff;
    background-color: #242f48;
    padding: 1.5rem;

    &::placeholder {
      color: #fff;
    }
  }
}

#social-links {
  a {
    color: var(--color-primary);
    border: 1px solid var(--color-secondary);
    padding: 0.5rem;

    &:hover {
      color: #0b1834;
      background-color: var(--color-secondary);
    }
  }
}

.btn-whatsapp {
  margin-bottom: 5rem;

  &,
  &:hover {
    color: #fff;
    background-color: #25d366;
  }
}