:root {
  --primary: #d63384;
  --secondary: #101012;
  --main-font-color: #e0e0de
}

html {
  scrollbar-color: var(--primary) var(--secondary);
  scrollbar-width: thin;
}

body {
  background-color: var(--secondary);
  color: var(--main-font-color);
  font-family: "Work Sans";
}

nav {
  background-color: var(--primary);
  color: var(--secondary);
  font-family: "Bangers";
  font-size: 2.2rem;
}

.name {
  font-size: 2.5rem;
  text-decoration: none;
  color: var(--secondary);
}

.btn-brand {
  background-color: var(--primary);
  color: var(--secondary);
  font-weight: bold;
}

.btn-brand:hover {
  border: 1px solid var(--primary);
  color: var(--primary);
  background-color: var(--secondary);
}

#myCarousel img {
  min-height: 600px;
  object-fit: cover;
}

.card {
  background-color: var(--secondary);
  border: 2px solid var(--primary);
  color: var(--main-font-color);
}

#skillsAccordion {
  --bs-accordion-bg: var(--secondary);
  --bs-accordion-color: var(--main-font-color);
  --bs-accordion-border-color: var(--primary);

  --bs-accordion-btn-bg: var(--secondary);
  --bs-accordion-btn-color: var(--main-font-color);

  --bs-accordion-active-bg: var(--primary);
  --bs-accordion-active-color: #fff;
} 

#skillsAccordion .accordion-button::after {
  filter: invert(1);
}

.form-control, .form-select {
  background-color: var(--secondary);
  color: var(--main-font-color);
  border-color: var(--primary);
}
.form-control:focus, .form-select:focus {
  background-color: var(--secondary);
  color: var(--main-font-color);
  border-color: var(--primary);
  outline: none;
  box-shadow: none;
}

#projects .card img {
  height: 320px;
  object-fit: cover;
}