:root {
  --pink: hsl(332, 73%, 54%);
  --pink-darken: hsl(332, 80%, 44%);
  --purple: hsl(268, 57%, 48%);
  --purple-darken: hsl(268, 57%, 38%);
  --green: hsl(62, 73%, 54%);
  --green-darken: hsl(62, 73%, 44%);
  --blue: hsl(242, 73%, 54%);
  --blue-darken: hsl(242, 73%, 44%);
  --yellow: hsl(48, 100%, 67%);
  --yellow-darken: hsl(48, 100%, 57%);
  --red: hsl(0, 73%, 54%);
  --red-darken: hsl(0, 73%, 44%);
  --black: hsl(0, 0%, 13%);
  --dark-grey: hsl(0, 0%, 19%);
  --grey: hsl(0, 0%, 68%);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pink);
  --bs-btn-border-color: var(--pink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--pink-darken);
  --bs-btn-hover-border-color: var(--pink-darken);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--pink-darken);
  --bs-btn-active-border-color: var(--pink);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--pink);
  --bs-btn-disabled-border-color: var(--pink);
}

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--purple);
  --bs-btn-border-color: var(--purple);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--purple-darken);
  --bs-btn-hover-border-color: var(--purple-darken);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--purple-darken);
  --bs-btn-active-border-color: var(--purple);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--purple);
  --bs-btn-disabled-border-color: var(--purple);
}

.btn-info{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--blue-darken);
  --bs-btn-hover-border-color: var(--blue-darken);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--blue-darken);
  --bs-btn-active-border-color: var(--blue);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--blue);
  --bs-btn-disabled-border-color: var(--blue);
}

.btn-danger{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--red-darken);
  --bs-btn-hover-border-color: var(--red-darken);
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--red-darken);
  --bs-btn-active-border-color: var(--red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--red);
  --bs-btn-disabled-border-color: var(--red);

}

.btn {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rubik Mono One', sans-serif;
  color: var(--pink);
}

.nav-item.active {
  background-color: var(--pink);
}

.nav-item.active a {
  color: #fff;
}


.navbar-dark {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: var(--pink);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: var(--pink);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e);
}

.navbar-icon {
  font-size: 2rem;
  text-decoration:none;
}

.main-content {
  padding-top: 10px;
  padding-bottom: 100px;
}

.gradient-title {
  background-image: linear-gradient(to right, var(--pink), var(--purple), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-color: transparent;
}

a.gradient-title {
  display: inline-block;
  font-family: Rubik Mono One, sans-serif;
  background-image: linear-gradient(to right, var(--pink), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-color: transparent;
}

a.gradient-title:hover {
  background-image: linear-gradient(to right, var(--pink-darken), var(--purple-darken));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-color: transparent;
}

.gradient-python {
  background-image: linear-gradient(to bottom right, var(--blue), var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration-color: transparent;
}

         
.btn-grad-primary {
  background-image: linear-gradient(to right, var(--pink) 0%, var(--purple)  51%, var(--pink)  100%);
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad-primary:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.nav-link-grad {
  background-image: linear-gradient(to right, var(--pink) 0%, var(--purple)  51%, var(--pink)  100%);
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.nav-link-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

.navbar-toggler-grad{ 
  background-image: linear-gradient(to right, var(--pink) 0%, var(--purple)  51%, var(--pink)  100%);
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;            
  box-shadow: 0 0 20px var(--grey);
  border-radius: 10px;
  display: block;
}