@import "mixins";
@import "variables";
// Bootstrap v4 stripped core
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/normalize";
@import "../node_modules/bootstrap/scss/print";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/buttons";

@import "../node_modules/bootstrap/scss/nav";
@import "../node_modules/bootstrap/scss/responsive-embed";
@import "../node_modules/bootstrap/scss/utilities";

body {
  overflow-y: scroll;
  overflow-x: hidden;
  background: $body-bg;
}
// The title block
.title {
  margin-top: 2em;
  @include col(10,12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  .label {
    margin: 1em auto;
    max-width: 18em;
    text-align: center;
  }
  .subtitle {
    font-size: smaller;
    color: #aaa;
  }
  h1,
  h2,
  h3 {
    text-shadow: rgba(255,255,255,0.5) 2px 2px 2px,
    rgba(0,0,0,0.1) -1px -1px 2px;
  }
  h2 {
    font-size: 1.5rem;
  }
  .warnings {
    font-size: small;
    font-style: italic;
    p {
      margin-bottom: 1em;
    }
  }
  .noscript_message {
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
    color: #943;
  }
}
#tools_wrapper {
  .ways {
    padding: 0.5em;
    @include col(8, 9);
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-offset(1);
    }
  }
  .destination {
    font-weight: bold;
  }
  .menu {
    @include col(3, 4);
    span {
      cursor: pointer;
    }
  }
}
#content_wrapper {
  background: $text_background;
  border-radius: 5px;
}
.content {
  @include col(10, 12);
  @media (min-width: breakpoint-min(sm)) {
    @include make-col-offset(1);
  }
  .pic {
    text-align: center;
    margin-bottom: 1em;
  }
  p {
    hyphens: auto;
  }
  padding: 1em;
  ul {
    margin: 0;
    padding: 0 0 0 1em;
  }
  ul.options {
    padding: 0;
    text-align: center;
    margin-top: 0.5em;
    margin-bottom: 0.7em;
    list-style-type: none;
    border-radius: 4px;
    li {
      padding: 0.5em;
    }
    li:hover {
      cursor: pointer;
    }
    li:last-child {
      border-bottom: none;
    }
  }
  section {
    border-top: 1px dashed #bbb;
  }
  .situation-start {
    border-top: none;
  }
  img.right {
    float: right;
    margin: 1.1em 0 1.1em 1.1em;
  }
  img.left {
    float: left;
    margin: 1.1em 1.1em 1.1em 0;
  }
  h3 {
    text-align: center;
  }
}
#legal {
  margin-top: 1em;
  color: darken($body-color, 10%);
  font-size: smaller;
  #footleft {
    @media (min-width: breakpoint-min(sm)) {
      @include make-col-offset(2);
      @include make-col(5);
    }
    @media (max-width: breakpoint-max(xs)) {
      @include make-col(12);
    }
  }
  #footright {
    text-align: right;
    @media (min-width: breakpoint-min(sm)) {
      @include make-col(3);
      @include make-col-offset(2);
    }
    @media (max-width: breakpoint-max(xs)) {
      @include make-col(12);
      margin-bottom: 1em;
    }
  }
}

.way {
  color: $waycolor;
  margin-right: 1em;
}
.cycle {
  color: darkgreen;
  border-bottom: darkgreen dashed 1px;
}
ul.options {
  border: 1px solid #876;
  li {
    border-bottom: 1px solid #876;
  }
  li:hover {
    background-color: rgba(153,136,119,0.2);
  }
}
#legal {
  .muted {
    color: grey;
  }
}
hr {
  width: 50%;
  border-color: $body-color;
}

// fade-in animation
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

.center {
  text-align: center;
}