/** Add your CSS Code here **/
:root {
  --IBF-pink: #e01983;
  --IBF-light-pink: #f7f0f2;
  --IBF-extra-light-pink: #fefbfd;
  --IBF-dark-pink: #b3166a;

  --IBF-green: #0c331f;
  --IBF-medium-green: #365c54;
  --IBF-light-green: #13a110;

  --IBF-white: white;
  --IBF-medium-grey: #d9d9d9;
  --IBF-grey: #f5f5f5;
  --IBF-dark-grey: #999999;

  --IBF-cream: #f8f6f5;
  --IBF-dark-cream: #f5f0f0;
}
/*****************************************/
/* Button stylings                       */
/*****************************************/
.btn {
  padding: 0.8em 1.5em !important;
  font-size: 16px;
  text-decoration: none;
  border-radius: 6px;
  border: none;
  transition: 0.3s ease;
  z-index: 10;
  width: fit-content;
  min-width:0px !important;
  white-space: nowrap;
}
.btn:hover {
  cursor: pointer;
}

/*****************************************/

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

/*****************************************/

.btn-secondary {
  color: var(--IBF-pink);
  background: none;
  border: 1px solid var(--IBF-pink);
}
.btn-secondary:hover {
  color: var(--IBF-white);
  background: var(--IBF-pink);
}

/*****************************************/

.btn-tertiary {
  color: var(--IBF-green);
  background: none;
  border: 1px solid var(--IBF-green);
}
.btn-tertiary:hover {
  color: var(--IBF-white);
  background: var(--IBF-green);
}

/*****************************************/

.btn-confirmed {
  background-color: var(--IBF-green);
  color: white;
}

.btn-confirmed:hover {
  background-color: var(--IBF-soft-green);
  color: white;
  border: none;
  cursor: default !important;
}

/*****************************************/

.btn-footer {
  background-color: none;
  color: var(--IBF-green);
  border: 1px solid var(--IBF-green);
}

.btn-footer:hover {
  background-color: var(--IBF-green);
  color: white;
  border: 1px solid var(--IBF-green);
}

/*****************************************/

/* Confirmed state styling */
button.confirmed {
  background-color: var(--IBF-medium-green);
  color: white;
  cursor: default;
}

button.confirmed:hover {
  background-color: var(--IBF-medium-green);
  color: white;
}

/*****************************************/
/* Button moves down from the container  */
/*****************************************/

/*show button next to h2 on desktop*/
#desktop-btn {
  display: flex;
}

#mobile-btn {
  display: none;
}

/*show button below section on mobile*/
@media (max-width: 767px) {
  #desktop-btn {
    display: none;
  }

  #mobile-btn {
    display: flex;
    align-self: center;
  }
}