.btn-light {
  background: linear-gradient(145deg, #fff5f9, #d6ced2);
  box-shadow: 5px 5px 8px #5f5c5d, -5px -5px 8px #ffffff;
}
.btn-light:hover, .btn-light:focus {
  background: linear-gradient(145deg, #d6ced2, #fff5f9);
}
.btn-light[disabled] {
  background: #5f5c5d;
  box-shadow: none;
}

.section-light {
  box-shadow: 5px 5px 8px #c3bcbf, -5px -5px 8px #ffffff;
}

.inset-light {
  box-shadow: inset 4px 4px 8px #cac3c6, inset -4px -4px 8px #ffffff;
}

.btn-dark {
  background: linear-gradient(145deg, #2e333e, #272b34);
  box-shadow: 5px 5px 8px #111317, -5px -5px 8px #454d5d;
}
.btn-dark:hover, .btn-dark:focus {
  background: linear-gradient(145deg, #272b34, #2e333e);
}

.section-dark {
  color: white;
  background: #2b303a;
  box-shadow: 5px 5px 8px #242831, -5px -5px 8px #323843;
}

.btn-warning {
  background: linear-gradient(145deg, #e54e37, #c1422e);
  box-shadow: 5px 5px 8px #561d14, -5px -5px 8px #ff7552;
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(145deg, #c1422e, #e54e37);
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
form > div {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 5px;
}

.required::after {
  content: " *";
  color: #d64933;
}

#form-help {
  color: #d64933;
}

label {
  width: 40%;
  text-align: right;
  margin-right: 5px;
}

#dropdown {
  position: relative;
}
#dropdown:focus-within #dropdown-content {
  display: block;
}

#dropdown-content {
  display: none;
  position: absolute;
  top: 34px;
  width: 100%;
  max-height: 100px;
  overflow: auto;
  background: white;
  border: 1px solid #2b303a;
  border-top: none;
}

.dropdown-item {
  padding: 5px;
  margin: 0;
  border-bottom: 1px solid;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: #7c7c7c;
  color: white;
}

.results-item {
  text-transform: capitalize;
  border-top: 1px solid;
  padding: 5px;
  margin: 5px;
  width: 100%;
}
.results-item .results-link {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100px;
  height: 80%;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  margin-block: 0;
  padding: 0;
}