body {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
  overflow-y: scroll;
}

.container-bg {
  /* filter: drop-shadow(0.5px 2px 4px black); */
}

.col-8 {
  width: 100%;
}

.nav {
  justify-content: center;
}

.form-control {
  font-family: Andale Mono, monospace;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.btn-pink {
  background-color: #e83e8c;
  color: #fff;
}

.btn-pink:hover {
  background-color: #d63384;
  color: #fff;
}

.btn-pink:active {
  background-color: #c8235c;
  color: #fff;
}

.btn-pink-outline {
  border-color: #e83e8c;
  color: #e83e8c;
}

.btn-pink-outline:hover {
  background-color: #e83e8c;
  color: #fff;
}

.btn-cyan {
  background-color: #17a2b8;
  color: #fff;
}

.btn-cyan:hover {
  background-color: #138496;
  color: #fff;
}

.btn-cyan:active {
  background-color: #117a8b;
  color: #fff;
}

.btn-cyan-outline {
  border-color: #17a2b8;
  color: #17a2b8;
}

.btn-cyan-outline:hover {
  background-color: #17a2b8;
  color: #fff;
}

.btn-skyblue {
  background-color: #87ceeb;
  color: #fff;
}

.btn-skyblue:hover {
  background-color: #76c3e0;
  color: #fff;
}

.btn-skyblue:active {
  background-color: #63b0d4;
  color: #fff;
}

.btn-skyblue-outline {
  border-color: #87ceeb;
  color: #87ceeb;
}

.btn-skyblue-outline:hover {
  background-color: #87ceeb;
  color: #fff;
}

.btn-deepskyblue {
  background-color: #00bfff;
  color: #fff;
}

.btn-deepskyblue:hover {
  background-color: #00a2e1;
  color: #fff;
}

.btn-deepskyblue:active {
  background-color: #009ac1;
  color: #fff;
}

.btn-deepskyblue-outline {
  border-color: #00bfff;
  color: #00bfff;
}

.btn-deepskyblue-outline:hover {
  background-color: #00bfff;
  color: #fff;
}

.btn-purple {
  background-color: #6f42c1;
  color: #fff;
  border: 1px solid #6f42c1;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-purple:hover {
  background-color: #5a32a3;
  color: #fff;
  border-color: #5a32a3;
  transform: translateY(-2px); 
}

.btn-purple:active {
  background-color: #4c2791;
  color: #fff;
  border-color: #4c2791;
  transform: translateY(2px); 
}

.btn-purple:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-orange {
  background-color: #fd7e14;
  color: #fff;
  border: 1px solid #fd7e14;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-orange:hover {
  background-color: #e76d07;
  color: #fff;
  border-color: #e76d07;
  transform: translateY(-2px); 
}

.btn-orange:active {
  background-color: #d65c04;
  color: #fff;
  border-color: #d65c04;
  transform: translateY(2px); 
}

.btn-orange:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-teal {
  background-color: #20c997;
  color: #fff;
  border: 1px solid #20c997;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-teal:hover {
  background-color: #1aa085;
  color: #fff;
  border-color: #1aa085;
  transform: translateY(-2px); 
}

.btn-teal:active {
  background-color: #148d66;
  color: #fff;
  border-color: #148d66;
  transform: translateY(2px); 
}

.btn-teal:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-lightblue {
  background-color: #17a2b8;
  color: #fff;
  border: 1px solid #17a2b8;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-lightblue:hover {
  background-color: #138496;
  color: #fff;
  border-color: #138496;
  transform: translateY(-2px); 
}

.btn-lightblue:active {
  background-color: #117a8b;
  color: #fff;
  border-color: #117a8b;
  transform: translateY(2px); 
}

.btn-lightblue:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-gold {
  background-color: #ffc107;
  color: #fff;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: #e0a800;
  color: #fff;
  border-color: #e0a800;
  transform: translateY(-2px);
}

.btn-gold:active {
  background-color: #c69500;
  color: #fff;
  border-color: #c69500;
  transform: translateY(2px);
}

.btn-gold:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-teal {
  background-color: #20c997;
  color: #fff;
  border: 1px solid #20c997;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-teal:hover {
  background-color: #17a085;
  color: #fff;
  border-color: #17a085;
  transform: translateY(-2px);
}

.btn-teal:active {
  background-color: #138f6a;
  color: #fff;
  border-color: #138f6a;
  transform: translateY(2px);
}

.btn-teal:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-darkred {
  background-color: #8b0000;
  color: #fff;
  border: 1px solid #8b0000;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-darkred:hover {
  background-color: #7a0000;
  color: #fff;
  border-color: #7a0000;
  transform: translateY(-2px);
}

.btn-darkred:active {
  background-color: #660000;
  color: #fff;
  border-color: #660000;
  transform: translateY(2px);
}

.btn-darkred:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-darkblue {
  background-color: #003366;
  color: #fff;
  border: 1px solid #003366;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-darkblue:hover {
  background-color: #00264d;
  color: #fff;
  border-color: #00264d;
  transform: translateY(-2px);
}

.btn-darkblue:active {
  background-color: #001a33;
  color: #fff;
  border-color: #001a33;
  transform: translateY(2px);
}

.btn-darkblue:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-darkgreen {
  background-color: #006400;
  color: #fff;
  border: 1px solid #006400;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-darkgreen:hover {
  background-color: #004d00;
  color: #fff;
  border-color: #004d00;
  transform: translateY(-2px);
}

.btn-darkgreen:active {
  background-color: #003300;
  color: #fff;
  border-color: #003300;
  transform: translateY(2px);
}

.btn-darkgreen:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-brown {
  background-color: #8B4513;
  color: #fff;
  border: 1px solid #8B4513;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-brown:hover {
  background-color: #7a3c0f;
  color: #fff;
  border-color: #7a3c0f;
  transform: translateY(-2px);
}

.btn-brown:active {
  background-color: #682a0f;
  color: #fff;
  border-color: #682a0f;
  transform: translateY(2px);
}

.btn-brown:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-aquamarine {
  background-color: #7fffd4;
  color: #fff;
  border: 1px solid #7fffd4;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-aquamarine:hover {
  background-color: #66e0b3;
  color: #fff;
  border-color: #66e0b3;
  transform: translateY(-2px);
}

.btn-aquamarine:active {
  background-color: #55c39f;
  color: #fff;
  border-color: #55c39f;
  transform: translateY(2px);
}

.btn-aquamarine:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-fuchsia {
  background-color: #d500f9;
  color: #fff;
  border: 1px solid #d500f9;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-fuchsia:hover {
  background-color: #b400d1;
  color: #fff;
  border-color: #b400d1;
  transform: translateY(-2px);
}

.btn-fuchsia:active {
  background-color: #9a00b3;
  color: #fff;
  border-color: #9a00b3;
  transform: translateY(2px);
}

.btn-fuchsia:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}

.btn-rose-gold {
  background-color: #b76e79;
  color: #fff;
  border: 1px solid #b76e79;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-rose-gold:hover {
  background-color: #a05a66;
  color: #fff;
  border-color: #a05a66;
  transform: translateY(-2px);
}

.btn-rose-gold:active {
  background-color: #8a4b58;
  color: #fff;
  border-color: #8a4b58;
  transform: translateY(2px);
}

.btn-rose-gold:disabled {
  background-color: #e0e0e0;
  color: #9e9e9e;
  border-color: #bdbdbd;
  cursor: not-allowed;
}