html{
  overscroll-behavior: none;
}

body { 
  background: #f7f7f7;
  overflow-y: hidden;
  touch-action: none;
  -ms-touch-action: none;
}

.navbar {
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  background-color: #f6f6f6;
  padding: calc(3px + 0.76vw);
  .navbar-brand {
    font-size: calc(25px + 0.390625vw);
  }
}

/* card styling */
.empty, .card {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  border: .05rem solid #dadee4;
  background: #fff;
}

/* grid container */
.page-layout {
  display:grid;
  height: 100vh;
  height: 100dvh;
  grid-template-rows: auto 1fr;
  grid-template-areas:
      'header'
      'main-content';
}

.page-layout > .header {
  grid-area: header;
  z-index: 1;
}
.page-layout > .main-content {
  grid-area: main-content;
  overflow-y: scroll;
  padding: calc(2px + 1.2625vw);
}

.landing-text, .error-text{
  margin: calc(20px + 1.2625vw);
}

.algorithm:not(:last-child) {
  margin-bottom: 2rem;
}

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