html, body {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  display: flex;
  flex-direction: column;
  width:100%;
}

.navbar {
  background-color: white;
  flex-shrink: 0;
}

.main-content {
  flex-grow:1;
  overflow-y: auto;
  background-color: #FAFAFA;
}

.dashboard {
  background-color: white;
}


.bg-grid {
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,1)), url("/static/assets/img/bg/ve-hexagon-sm.jpg");
    /* background-size: contain; */
    background-size: 10%;
    background-repeat: repeat;
}

.bg-grid-muted {
    background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255,255,255,0.95)), url("/static/assets/img/bg/ve-hexagon-sm.jpg");
    /* background-size: contain; */
    background-size: 10%;
    background-repeat: repeat;

}

.navbar-link {
    text-decoration: none;
    color: black;
    font-size: medium;
}

a {
    text-decoration: none;
    color:black
}

a:hover {
  transition: 150ms;
  color: #00B050;
}

.blue {
    color: #74abe3;
}

.blue-back {
    background-color: #74abe3;
}

.green {
    color: #77dd77;
}

.orange {
    color: #faa14b;
}

.purple {
    color: #ab8cde;
}

.red {
    color: #d44459;
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-top {
  from { transform: translateY(-360px); }
}
@keyframes slide-to-bottom {
  to { transform: translateY(360px); }
}

.slide-it {
  view-transition-name: slide-it;
}

::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
             600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-bottom;
}
::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
             600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-top;
}