*,
*::before,
*::after {
  box-sizing: border-box;
}

html, html:focus-within {
  scroll-behavior: smooth;
}


body {
  padding: 0;
  margin: 0;
}

section {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.list-group,
#scale-degrees {
  list-style: none;
}

.footer-link {
  text-decoration: none;
  color: white;
}

.footer-link:hover {
  color: #ad8129;
}

.lg {
  background-image: linear-gradient(to bottom left, rgb(173, 129, 41), rgb(0, 0, 0));
  // background-image: linear-gradient(to bottom left, rgb(62, 62, 153), rgb(42, 148, 42));
}

.lg-rev {
  background-image: linear-gradient(to bottom left, rgb(0, 0, 0), rgb(173, 129, 41));
  // background-image: linear-gradient(to bottom left, rgb(42, 148, 42), rgb(62, 62, 153));
}

// fieldset {
//   display: inline-block;
//   width: max-content;
// }

input[type="number"] {
  font-size: 1.125rem;
  width: 3.5em;
  height: 1.25em;
  padding: 0.25em 0.5em;
  color: rgb(166, 8, 8);
}

.note,
.form-control {
  border: 1px solid rgb(1, 1, 133);
  height: 1rem;
  width: 5rem;
}

/* Stop Bootstrap from going full-width */
.custom {
  flex: 0 0 auto;
  width: 16.66%;
}

p {
  padding: 0;
  margin: 1em 0 0.75em;
}

p::first-letter {
  padding-left: 1.5rem;
}

ul {
  padding: 0;
  margin: 0;
}

ul > ul {
  margin-left: 1.5em;
}

.user-notes {
  font-size: 3.25rem;
  font-weight: 300;
}

.user-notes::selection,
.user-notes-output::selection {
  background-color: black;
  color: rgb(173, 129, 41);
}

// .fade-in-down {
//   color: red;
// }

/* The animation code */
@keyframes fixFlash {
  0% {
    opacity: 0%;
    color: rgb(242, 162, 15);
  }

  25% {
    opacity: 25%;
    color: rgb(226, 63, 63);
  }

  50% {
    opacity: 67%;
    color: rgb(133, 14, 133);
  }

  100% {
    opacity: 100%;
    color: #333;
  }
}

/* The element to apply the animation to */
.fade-in-one {
  animation-name: fixFlash;
  animation-duration: 750ms;
}

.fade-in-two {
  animation-name: fixFlash;
  animation-duration: 1125ms;
}

.fade-in-three {
  animation-name: fixFlash;
  animation-duration: 1500ms;
}

.fade-in-four {
  animation-name: fixFlash;
  animation-duration: 1875ms;
}

.fade-in-five {
  animation-name: fixFlash;
  animation-duration: 2250ms;
}

.fade-in-six {
  animation-name: fixFlash;
  animation-duration: 2625ms;
}

@media (min-width: 468px) {
  button.user-tuning {
    margin-top: 0!important;
  }
}