:root {
  --orange: #c46900;
  --blue: #004cff;
  --green: #00ab1a;
  --white: white;
  
  --navbarColor: var(--orange);
  --headerTextColor: var(--white);
}

html {
  scroll-padding-top: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .scroller {
    scroll-behavior: smooth;
  }
}

/* Changing the background color of the navbar */
.navbar-custom {
  transition: 0.3s all;
  background-color: var(--navbarColor);
  color: var(--headerTextColor);
  height: 90px;
  /* background: linear-gradient(0deg, rgba(3,199,16,1) 55%, rgba(255,255,255,1) 100%); */
}

.navbar-custom::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0.2rem;
  width: var(--markerWidth, 0);
  background-color: currentColor;
  transform: translate3d(var(--markerLeft, 0), 0, 0);
}

.navbar-custom::after {
  transition: transform 200ms, width 200ms, background-color 2000ms;
  will-change: width;
}

[data-theme="main"]  {
  --navbarColor: var(--orange);
}

[data-theme="faq"] {
  --navbarColor: var(--blue);
}

[data-theme="about"]  {
  --navbarColor: var(--green);
}

[data-section="message"] {
  font-family: Arial, Helvetica, sans-serif;
}

.invitation {
  margin-bottom: 2.5rem;
  text-align: center;
}

.progress-bar {
  background: rgb(240, 240, 240);
  height: 100%;
  width: 0%;
  top: 0;
}

[id^=add_password] + *{ 
  display: none;
 
}
[id^=add_password]:checked + *{
  display: block;
  animation: open 0.5s; 
}

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