/*------------------------------------------------------------
  Buttons
------------------------------------------------------------*/

.btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.btn-primary,
.btn-secondary {
  font-family: "Orbitron", Arial, Helvetica, sans-serif;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  outline: 1px solid transparent;
  border-radius: 3px;
  padding: 10px 30px;
  min-width: 200px;
}

.btn-primary {
  color: var(--dark);
  background: var(--light-green);
  border: 2px solid var(--light-green);
  -webkit-transition: background 0.25s ease-in-out;
  -o-transition: background 0.25s ease-in-out;
  transition: background 0.25s ease-in-out;
}

.btn-primary:hover {
  cursor: pointer;
  border: 2px solid var(--bright-green);
  background: var(--bright-green);
}

.btn-secondary {
  color: var(--light-green);
  background: transparent;
  border: 2px solid var(--light-green);
  -webkit-transition: background 0.25s ease-in-out;
  -o-transition: background 0.25s ease-in-out;
  transition: background 0.25s ease-in-out;
}

.btn-secondary:hover {
  cursor: pointer;
  background: var(--bright-green);
  border: 2px solid var(--bright-green);
  color: var(--dark);
}

/*------------------------------------------------------------ 
  max-width: 1280px
------------------------------------------------------------*/

@media only screen and (max-width: 80em) {
  .btn-primary {
    padding: 8px 20px;
  }
}

/*------------------------------------------------------------ 
  max-width: 992px
------------------------------------------------------------*/

@media only screen and (max-width: 62em) {
  .btn-group {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

/*------------------------------------------------------------ 
  max-width: 480px
------------------------------------------------------------*/

@media only screen and (max-width: 30em) {
  .btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 8px 10px;
    min-width: 150px;

  }
}