#progressBarContainer {
  width: 100%;
  height: 30px;
  background-color: #ddd;
  color: white;
}

#progressBar {
  width: 1%;
  height: 30px;
  display: block;
  background-color: #AA4A44;
}

.main-override {
  max-width: 95%;
  flex-direction: column;
}

.center-text {
  text-align: center;
}

.site-announcement {
  margin-top: 1rem;
  align-self: center;
  max-width: 65ch;
  font-size: 1.3rem;
}

@media (max-width: 430px) {
  .site-announcement {
    font-size: .85rem;
    max-width: 55ch;
  }
}

.arrow {
  border: solid var(--h1);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.active>.arrow {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.nav-brand {
  font-size: 1.85rem;
  padding-left: 1rem;
  color: var(--cs) !important;
}

.nav-brand:hover {
  color: var(--a2) !important;
  text-decoration: underline !important;
}

.nav-style {
  display: flex;  
  justify-content: space-between;
}

.right-justify {
  display: flex;
  justify-content: end;
}

.mode-switch {
  padding-right: 1rem;
}

.form-and-results {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 1rem;
  column-gap: 2rem;
}

@media (max-width: 440px) {
  .form-and-results {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
  }
}

.form-button {
  font-size: 1.2rem;
}

.tutorial-container {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  max-width: 60ch;
}

@media (max-width: 440px) {
  .tutorial-container {
    max-width: 50ch;
    font-size: .8rem;
  }
}

.form-fields {
  display: flex;
}

.form-grids {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.all-tutorials-link {
  text-align: center;
  font-size: 1.4rem;
}