/*
 * @NOTE: Prepend a `~` to css file paths that are in your node_modules
 *        See https://github.com/webpack-contrib/sass-loader#imports
 */

@import "~font-awesome/css/font-awesome.css";
@import "~typeface-carter-one/index.css";
@import "~typeface-montserrat/index.css";

body {
  position: relative;
  color: white;
  height: 100vh;
  background-color: #232c39;
  background-image: linear-gradient(45deg, rgba(0, 216, 255, 0.5) 10%, rgba(0, 1, 127, 0.7));
  font-family: Arial, Helvetica, Helvetica Neue, serif;
  overflow-y: hidden;
  margin: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  float: left;
  background: transparent;
}

input[type="range"]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 22px;
  width: 12px;
  border-radius: 5px;
  background: #fff;
  margin-top: -9px;
  background-color: #eee;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.5s;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  box-shadow: 0 0 5px 2px #91d5fd;
}

.PageViewer {
  background: linear-gradient(45deg, rgb(184, 200, 203) 10%, rgba(110, 149, 248, 0.7));
  height: calc(100vh - 64px);
  margin-top: 64px;
  width: 100vw;
  overflow: auto;
}
