@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';

$font-family-sans-serif: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-family: "PT Sans Caption",$font-family-sans-serif;
$font-family-base: $font-family-sans-serif;

$grey-color: #cc925d;
$body-bg: white;
$content-bg: #ffffff22;
$body-color: black;
$link-color: #7D6393;
$link-button-background: rgb(202, 158, 185);
$link-button-background-hover: $body-color;
$link-button-foreground: $body-color;
$link-button-foreground-hover: $body-bg;
$status-color: #7E5980;
$btn-bg: grey;
$btn-color: lighten($btn-bg, 50%);
$secondary-bg: #F1EED9;

$primary: $link-color;
$brand-primary: lighten($body-color, 20%);
$brand-danger: darken($body-bg, 30%);

$waycolor: $link-color;
$animation_duration: 2s;

$enable-rounded:            true;
$enable-shadows:            false;
$enable-gradients:          false;
$enable-transitions:        false;
$enable-hover-media-query:  false;
$enable-grid-classes:       true;
$enable-print-styles:       true;

$ok-color: $link-color;
$neutral-color: brown;
$warning-color: darkred;

@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/tables';
//@import 'bootstrap/scss/transitions';

h1,h2,h3 {
  font-weight: bold;
  text-align: center;
}
h1 {
  color: #333;
}
h2 {
  color: #666;
}
#page {
  background: $content-bg;
  border-radius: 5px;
  margin-top: $font-size-base;
  padding-top: $font-size-base * 0.5;
}
#content {
  .subtitle {
    display: none;
  }
  p.old {
    color: #999;
  }
}
body {
  /*
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("images/background.png");
  */
  height: 100vh;
  width: 100vw;
}
#options,
#options ul,
#verbs {
  padding: 0;
  list-style-type: none;
  border-radius: 4px;
  &:empty {
    display: none;
  }
  li {
    background-color: $link-button-background;
    padding: 0.5em;
    border-bottom: 1px solid #876;
    &,a {
      color: $link-button-foreground;
    }
  }
  li:hover {
    background-color: $link-button-background-hover;
    cursor: pointer;
    &,a {
      color: $link-button-foreground-hover;
    }
  }
  li:last-child {
    border-bottom: none;
  }
  .subtitle {
    display: block;
    font-size: ($font-size-base * 0.9);
    font-style: italic;
  }
}

.room-start {
  border-top: none;
}

.portrait {
  font-size: ($font-size-base * 1.5);
}

.portraits {
  float: right;
  margin: ($font-size-base * 0.5);
}

.text-right {
  text-align: right;
}
.center {
  text-align: center;
}
.bigger {
  font-size: ($font-size-base * 1.15);
  small {
    font-size: ($font-size-base * 0.8);
  }
}
.fright {
  float: right;
}
.disclaimer {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 20%;
  margin-right: 15%;
  width: 65%;
  font-size: ($font-size-base * 0.8);
}
.clearboth {
  clear: both;
}

.center {
  text-align: center;
}
.spell {
  margin: 0 auto;
  display: block;
  text-align: center;
  font-size: ($font-size-base * 1.1);
}
.text-center {
  text-align: center;
}
.sticky {
  position: sticky;
  top: 0;
}
#settings_page,
#transcript_page {
  display: none;
}
.btn-outline {
  border: 1px solid $btn-bg;
}
#background, #picture, .char {
  position: relative;
  height: 483px;
  max-width: 100%;
}
#background {
  background-size: cover;
}
.char {
  max-width: 300px;
  max-height: 300px;
  .chartop {
    z-index: 2;
  }
  .charbottom {
    z-index: 1;
  }
  .chartop,
  .charbottom {
    position: absolute;
    max-width: 100%;
    display: inline-block;
  }
  &.posleft {
    .chartop,
    .charbottom {
      left: 0;
      bottom: 0;
    }
  }
  &.posright {
    .chartop,
    .charbottom {
      right: 0;
      bottom: 0;
    }
  }
  &.poscenter {
    .chartop,
    .charbottom {
      left: 30%;
      bottom: 0;
    }
  }
}
#current_quest {
  background-color: rgba(255,255,255, 0.5);
}
.error {
  color: red;
}