:root {
  --dark: #404345;
  --brown: #4e342e;
  --lightbrown: #795548;
  --DEEP-RED: #800000;
  --LIGHT-RED: hsla(0, 100%, 25%, 0.753);
  --RED-GRADIENT: linear-gradient(var(--LIGHT-RED), var(--DEEP-RED));
}

/* General */
html, body {
  height: 100%;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brown);
  font-weight: 600;
}

h2, h3 {
  padding-bottom: 2vh;
}

i {
  width: 20px;
}

i.align {
  color: #4e342e;
  text-align: center;
}

.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: @screen-sm-min) {
  .text-sm-left { text-align: left; }
  .text-sm-right { text-align: right; }
  .text-sm-center { text-align: center; }
  .text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min) {
  .text-md-left { text-align: left; }
  .text-md-right { text-align: right; }
  .text-md-center { text-align: center; }
  .text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
  .text-lg-left { text-align: left; }
  .text-lg-right { text-align: right; }
  .text-lg-center { text-align: center; }
  .text-lg-justify { text-align: justify; }
}

.form-signin {
  max-width: 350px;
}

.btn-outline-brown {
  color: var(--lightbrown);
  border-color: var(--lightbrown);
}

.btn-outline-brown:hover {
  color: #fff;
  background-color: var(--lightbrown);
  border-color: var(--lightbrown);
}

.btn-outline-brown:focus, .btn-outline-brown.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-outline-brown.disabled, .btn-outline-brown:disabled {
  color: var(--lightbrown);
  background-color: transparent;
}

.btn-outline-brown:not(:disabled):not(.disabled):active, .btn-outline-brown:not(:disabled):not(.disabled).active,
.show > .btn-outline-brown.dropdown-toggle {
  color: #fff;
  background-color: var(--lightbrown);
  border-color: var(--lightbrown);
}

.btn-outline-brown:not(:disabled):not(.disabled):active:focus, .btn-outline-brown:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-brown.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.page-heading {
  z-index: 0;
}

/* Animations */
@keyframes extend {
  0%   {width:0%;}
  100% {width:100%;}
}

@keyframes moveAndFadeIn {
  0%   {left: -15px; opacity: 0;}
  100% {left: 0px; opacity: 1;}
}

@keyframes fadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes moveToLeft {
  0%   {left: 0px; width: calc(100% + 250px);}
  100% {left: -250px; width: calc(100% + 250px);}
}