:root {
  --navbar-margin: clamp(1em, 10vw, 20em);
}

.navbar {
  padding-left: var(--navbar-margin) !important;
  padding-right: var(--navbar-margin) !important;
}

.navbar-brand {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  margin: 0em 0em !important;
}

.brand-lexifer, .brand-plus {
  transition: color 0.5s ease;
}

.navbar-brand:hover .brand-lexifer {
  color: #de0000;
}

.full-width {
  width: 100%;
}

body {
  font-weight: 300;
}

p {
  text-align: justify !important;
}

a {
  color: #de0000 !important;
}

#shortcut-cheats {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #777777;
  color: #ffffff;
  padding: 2em;
  border-radius: 0.5em;
  max-width: 650px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 0 20px #00000080;
  font-size: 0.95rem;
}

#shortcut-list {
  margin: 1em 0em;
  padding-left: 1em;
}

#errors {
  color: #de0000 !important;
  white-space: normal !important;
}

#number {
  width: 5em !important;
  font-family: "Cousine", monospace !important;
  border-radius: 0.125em !important;
}

#lexurgy-changes {
  font-family: "Cousine", monospace !important;
  text-align: left !important;
  padding: 0.2em 0.4em !important;
  width: 100% !important;
}

textarea {
  font-family: "Cousine", monospace !important;
  font-size: 0.95rem;
  font-weight: 400;
  border: 1px solid #555555;
  border-radius: 0.25em;
  width: 100% !important;
  padding: 0.2em 0.4em !important;
  resize: both !important;
}

textarea::placeholder, input[type="number"]::placeholder {
  color: #bbbbbb !important;
}

input[type="number"] {
  border: 1px solid #555555;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #555555;
  width: 1.1em;
  height: 1.1em;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

button, .btn {
  font-size: 0.95rem;
  font-weight: 300;
  border: 1px solid #555555 !important;
  padding: 4px 6px !important;
}

#shortcut-list li {
  margin-bottom: 0.25em;
}

#switches span {
  margin-left: 0.5em;
  font-size: 1.75rem;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.5s ease, text-shadow 0.5s ease;
  transform-origin: center center;
}

#switches span:hover {
  transform: scale(1.5);
  text-shadow: 0 0 1px #de0000e6, 0 0 2px #de000099, 0 0 3px #de00004c;
  animation: flash 0.5s ease-in-out;
}

.navbar-brand:hover {
  transform: scale(1.1);
  text-shadow: 0 0 1px #de0000e6, 0 0 2px #de000099, 0 0 3px #de00004c;
  animation: flash 0.5s ease-in-out;
}

@keyframes flash {
  0% {
    text-shadow: 0 0 1px #de0000e6, 0 0 2px #de000099, 0 0 3px #de00004c;
  }
  50% {
    text-shadow: 0 0 2px #de0000ff, 0 0 3px #de0000cc, 0 0 4px #de000080;
  }
  100% {
    text-shadow: 0 0 1px #de0000e6, 0 0 2px #de000099, 0 0 3px #de00004c;
  }
}

footer {
  text-align: center !important;
  text-transform: uppercase !important;
  font-size: 0.666rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}