@import url("https://fonts.googleapis.com/css2?family=Afacad:wght@400;600&family=Poppins:wght@300;400;600&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
  --primaryFont: "Afacad", sans-serif;
  --headingFont: "Poppins", sans-serif;
  --primaryColor: #769bb0;
  --darkColor: #264653;
  --lightColor: #f2efeb;
}

body {
  font-family: var(--primaryFont);
  font-size: 1.2rem;
  text-align: justify;
  color: var(--darkColor);
}

::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: var(--lightColor);
}

::-webkit-scrollbar-thumb {
  background: var(--primaryColor);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--darkColor);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headingFont);
}

h1, h2, h3, h4 {
  font-weight: bold;
  text-transform: uppercase; 
}

.btn {
  font-family: var(--headingFont);
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 1.5rem;
  border: 2px solid var(--primaryColor);
  border-radius: 20px;
}

.btn-primary {
  --bs-btn-bg: var(--primaryColor);
  --bs-btn-color: var(--lightColor);
  --bs-btn-border-color: var(--primaryColor);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--primaryColor);
  --bs-btn-hover-border-color: var(--primaryColor);
  --bs-btn-active-bg: transparent;
  --bs-btn-active-color: var(--darkColor);
  --bs-btn-active-border-color: var(--primaryColor);
}

.btn-secondary {
  background-color: transparent;
  color: var(--primaryColor);
  --bs-btn-hover-color: var(--lightColor);
}

.card {
  color: var(--darkColor);
}

.form-control {
  color: var(--darkColor);
  font-size: 1.2rem;
}

.form-control::placeholder {
  color: var(--darkColor);
}

.form-select:focus,
.form-control:focus {
  border-color: var(--primaryColor);
  border-width: 2px;
  box-shadow: none;
}

.form-select,
.form-select option:disabled {
  color: var(--darkColor);
  font-size: 1.2rem;
}

td {
  white-space: nowrap;
}