* {
  box-sizing: border-box;
}

body {
  background: #050505;
  color: #ffffff;
  font-family: "Inter", sans-serif;
}

/*Navbar*/

.navbar {
  background: rgba(20, 20, 20, 0.75) !important;

  backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.navbar-brand {
  color: white !important;

  font-weight: 700;
}

.nav-link {
  color: #bdbdbd !important;

  transition: 0.3s;
}

.nav-link:hover,
.nav-link.active {
  color: white !important;
}

/*BUTTONS*/

.btn {
  border-radius: 12px;

  transition: 0.3s;
}

.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #2563eb);

  border: none;
}

.btn-primary:hover {
  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
}

.btn-outline-primary {
  color: white;

  border-color: #6366f1;
}

.btn-info {
  margin-top: 20px;

  background: linear-gradient(135deg, #7c3aed, #2563eb);

  border: none;

  color: white;
}

.btn-info:hover {
  transform: translateY(-2px);

  box-shadow: 0 10px 25px rgba(124, 58, 237, 0.4);
}

/*Title*/

main h1 {
  margin-top: 70px;

  text-align: center;

  font-size: 3rem;

  font-weight: 800;

  background: linear-gradient(90deg, white, #8b5cf6, #38bdf8);

  -webkit-background-clip: text;

  color: transparent;
}

main > p {
  text-align: center;

  color: #999;

  margin-bottom: 40px;
}

/*FORM*/

.input-group {
  margin-bottom: 20px;
}

.form-control,
.input-group-text {
  background: #111 !important;

  color: white !important;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.form-control::placeholder {
  color: #777;
}

.form-control:focus {
  border-color: #8b5cf6;

  box-shadow: none;
}

/*Intro_section*/

.final {
  margin-top: 70px;

  padding: 40px;

  background: rgba(20, 20, 20, 0.75);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 30px;
}

.final h2 {
  font-size: 2rem;

  font-weight: 800;
}

.final p {
  color: #aaa;
}

/*Credits*/

.credits-section {
  margin-top: 50px;

  padding: 40px;

  background: rgba(20, 20, 20, 0.75);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 30px;
}

.credits-section h2 {
  text-align: center;

  font-size: 2.5rem;

  font-weight: 800;
}

.credits-section > p {
  text-align: center;

  color: #999;
}

/* Cards container */

.resources-container {
  margin-top: 40px;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 25px;
}

/* Resource cards */

.resource-card {
  margin: 0;

  background: rgba(15, 15, 15, 0.8);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 25px;

  overflow: hidden;

  transition: 0.35s;
}

.resource-card:hover {
  transform: translateY(-10px);

  border-color: #6366f1;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.resource-card img {
  width: 100%;

  height: 180px;

  object-fit: cover;
}

.resource-card figcaption {
  padding: 25px;
}

.resource-card h3 {
  font-size: 1.25rem;

  font-weight: 700;
}

.resource-card p {
  color: #aaa;

  font-size: 0.95rem;
}

.resource-card a {
  color: #8b5cf6;

  text-decoration: none;

  font-weight: 600;
}

.resource-card a:hover {
  color: white;
}

/*Footer*/

.footer {
  margin-top: 100px;

  background: linear-gradient(180deg, #080808, #020202);

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
  max-width: 1200px;

  margin: auto;

  padding: 60px 30px;

  display: flex;

  justify-content: space-between;

  gap: 40px;
}

.footer h2 {
  font-size: 2rem;

  font-weight: 800;
}

.footer h4 {
  color: white;

  margin-bottom: 20px;
}

.footer a {
  display: block;

  color: #aaa;

  text-decoration: none;

  margin: 10px 0;

  transition: 0.3s;
}

.footer a:hover {
  color: white;

  transform: translateX(5px);
}

.footer-social i {
  margin-right: 8px;
}

.footer-bottom {
  text-align: center;

  padding: 20px;

  color: #777;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/*Responsive*/

@media (max-width: 768px) {
  main h1 {
    font-size: 2rem;
  }

  .credits-section {
    padding: 25px;
  }

  .footer-container {
    flex-direction: column;

    text-align: center;
  }
}

/*Css hecho con ayuda de la Ia */