@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  background-color: #E3E3DD !important; 
}

a {
  text-decoration: none;
  color: #333;
}

h1 {
  font-size: 2.5em;
  font-weight: 100;
  margin: 0;
}

h2 {
  color: #333;
}

nav i {
  padding-right: 12px;
}

.nav-link {
  color: #044257;
}

.page-header {
  border-bottom: 6px solid #666;
  margin-bottom: 6px;
  padding: 4px 0;
}

.watermark {
  position: absolute;
  margin-top: 90px;
  right: 0.5em;
  color: #f5f5f5;
  pointer-events: none;
  font-size: 20em !important;
  z-index: 0;
}

.item {
  border-bottom-color: #5d99bb;
}

.regulation {
  border-bottom-color: #c2bb00;
}

.result {
  border-bottom-color: #b33f00;
}

.hotkey {
  text-decoration: underline;
}

/* mud overrides */
.mud-button {
  text-transform: initial !important;
}

/* animations */
.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes animatedSlideIn {
  0% {
    margin-left: -20px;
    opacity: 0.3;
  }

  100% {
    margin-left: 0px;
    opacity: 1;
  }
}

.slideIn {
  animation-name: animatedSlideIn;
}

@keyframes animatedSlideRight {
  0% {
    margin-left: 20px;
    opacity: 0.3;
  }

  100% {
    margin-left: 0px;
    opacity: 1;
  }
}

.slideRight {
  animation-name: animatedSlideRight;
}

@keyframes animatedSlideDown {
  0% {
    margin-top: -15px;
    opacity: 0.2;
  }

  100% {
    margin-top: 0px;
    opacity: 1;
  }
}

.slideDown {
  -webkit-animation-name: animatedSlideDown;
  animation-name: animatedSlideDown;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}