@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {
	--dark: #0f121a;
	--secondary: #282b36;
	--primary: #fff;
  --brand: #5b94de;
  --primary-hover: #c6cdd5;
  --red: #de5b5b;
  --yellow: #dea55b;
  --green: #68de5b;
  --cyan: #5bbfde;
  --blue: #5b94de;
  --purple: #895bde;
  --pink: #de5bdc;
}

body {
	background: var(--dark);
	color: var(--primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Public Sans', sans-serif;
  font-weight: 900;
}

p {
  font-family: 'Public Sans', sans-serif;
  font-weight: 400 !important;
}

.bg-dark {
  background-color: var(--dark);
}

.form-control {
  background-color: var(--dark);
  border: none !important;
  color: var(--primary);
  border-radius: 0px;
  transition: 0.2s;
  width: 10em;
  border-bottom: 2px solid var(--secondary) !important;
}

.form-control:focus {
  background-color: var(--dark);
  box-shadow: none !important;
  color: var(--primary);
  width: 16em;
}

.navbar-toggler {
  border: none !important;
}

.navbar-toggler:focus {
  box-shadow: none !important;
}

.offcanvas {
  background-color: var(--dark) !important;
  color: var(--primary);
  border: none !important;
  width: 100%;
  transition: 0.1s;
}

.mobile {
  width: 100% !important;
}

.btn-close:focus {
  box-shadow: none !important;
}

.link {
  margin-left: 1em;
  transition: 0.3s;
  margin-right: 1em;
  color: var(--primary) !important;
}

.link:hover {
  color: var(--brand) !important;
}

.offcanvas-title {
  font-size: 1.2em;
}

.header {
  padding-top: 5em;
  padding-bottom: 11em;
}

.program {
  font-size: 2em;
  background-color: var(--secondary);
  text-align: center;
  justify-content: center;
  padding: 0.5em;
  border-radius: 2em;
}

.program:hover {
  color: var(--primary-hover);
}

.bar {
  height: 20px;
  width: 100%;
  background-color: var(--secondary) !important;
}

.bar-progress {
  background-color: var(--primary);
  height: 20px;
  width: 95%;
  font-weight: 900;
  text-align: center;
  color: var(--secondary);
}

/*.arrow {
  transition: 0.2s;
  transform: translateX(10px);
}*/

footer {
  background-color: #000;
}

.subtitle {
  color: var(--primary-hover);
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active {
  border-radius: 4px !important;
  transition: 0.1s;
  color: var(--primary-hover);
  background-color: var(--secondary);
  box-shadow: none !important;
  border: none !important;
}

.btn-primary:hover {
  background-color: var(--primary);
  color: var(--dark);
}

.btn-primary:active {
  color: var(--primary);
  background-color: var(--secondary) !important;
}

.search-btn {
  background-color: transparent !important;
  color: var(--primary);
  border: none !important;
}

.search-btn:hover {
  background-color: transparent !important;
  color: var(--primary-hover) !important;
  border: none !important;
}

.nav-link {
  transition: 0.3s;
  color: var(--primary-hover);
}

.nav-link:hover {
  color: var(--primary);
}