html,
body {
  font-family: 'Pompiere', cursive;
  margin: 0; }

* {
  box-sizing: border-box; }

html {
  height: 100%; }

body {
  min-height: 100%; }

pre {
  margin: 0 !important; }

.header {
  background-color: #00b8d4;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
  color: white;
  z-index: 0; }
  .header .page-title {
    font-weight: 400;
    margin: 0;
    padding: 10px;
    text-align: center; }

.content {
  flex-grow: 2; }

.container {
  display: flex;
  flex-grow: 1;
  height: calc(100vh - 58px); }

.sidebar {
  background: #1a1a1a; }
  .sidebar .sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0; }
  .sidebar .sidebar-item {
    border-bottom: 1px solid #737373;
    color: white;
    cursor: pointer; }
    .sidebar .sidebar-item:hover .sidebar-icon {
      color: #08deff; }
  .sidebar .sidebar-icon {
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    display: inline-block;
    font-size: 24px;
    padding: 15px;
    transition: 150ms color linear; }
    .sidebar .sidebar-icon.active {
      color: #00b8d4; }

.editor {
  background-color: #404040;
  color: white;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 30px 15px;
  width: 300px; }
  .editor .input-group {
    margin-bottom: 25px; }
    .editor .input-group.breakout {
      padding-bottom: 25px; }
      .editor .input-group.breakout:not(:first-child) {
        padding-top: 25px; }
    .editor .input-group.separate {
      padding-top: 25px; }
  .editor .label-full-width {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
    width: 100%; }
  .editor .templates {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px; }
    .editor .templates .template-item {
      border: 2px solid #a6a6a6;
      cursor: pointer;
      margin: 5px 0;
      padding: 5px 10px;
      text-align: center;
      transition: 150ms linear; }
      .editor .templates .template-item:hover {
        background: rgba(26, 26, 26, 0.1);
        border-color: #008ca1;
        color: #008ca1; }
      .editor .templates .template-item.active {
        border-color: #00b8d4;
        color: #00b8d4; }

.result {
  background-color: white;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  width: 100%; }
  .result .full {
    width: 100%; }
  .result .card {
    margin: 4% auto;
    overflow: hidden;
    transition: 100ms box-shadow linear; }
    .result .card.full-width {
      width: 92%; }
    .result .card.half-width {
      width: 42%; }
    .result .card .card-header {
      align-items: flex-end;
      color: #f5f5f5;
      display: flex;
      font-size: 24px;
      height: 220px;
      justify-content: space-between;
      padding: 20px 40px; }
    .result .card .card-content {
      align-items: center;
      background-color: #ffffff;
      display: flex;
      font-size: 18px;
      min-height: 100px;
      padding: 20px 40px; }
  .result .image .card .card-header {
    border-radius: 5px; }
  .result .multiple-cards {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap; }
  .result .border-radius {
    border: 3px solid #00b8d4;
    overflow: hidden; }
    .result .border-radius .card-header {
      border-radius: 0; }
  .result .mountain {
    background-image: url("https://images.unsplash.com/photo-1477209560495-270790f2251a?dpr=1&auto=compress,format&fit=crop&w=767&h=512&q=80&cs=tinysrgb&crop=&bg=");
    background-position: center center;
    background-size: cover; }
  .result .explorer {
    background-image: url("https://images.unsplash.com/photo-1488572384981-eac03dfeb6b9?dpr=1&auto=format&fit=crop&w=1080&h=720&q=80&cs=tinysrgb&crop=");
    background-position: center center;
    background-size: cover; }
  .result .desert {
    background-image: url("https://images.unsplash.com/photo-1462496591979-5ba58a2ddec6?dpr=1&auto=compress,format&fit=crop&w=767&h=511&q=80&cs=tinysrgb&crop=&bg=");
    background-position: center center;
    background-size: cover; }
  .result .jewels {
    background-image: url("https://images.unsplash.com/photo-1450297166380-cabe503887e5?dpr=1&auto=compress,format&fit=crop&w=767&h=515&q=80&cs=tinysrgb&crop=&bg=");
    background-position: center center;
    background-size: cover; }
  .result .road {
    background-image: url("https://images.unsplash.com/photo-1474496517593-015d8b59450d?dpr=1&auto=compress,format&fit=crop&w=767&h=512&q=80&cs=tinysrgb&crop=&bg=");
    background-position: center center;
    background-size: cover; }

pre {
  -moz-hyphens: none;
  -moz-tab-size: 4;
  -ms-hyphens: none;
  -o-tab-size: 4;
  -webkit-hyphens: none;
  background: #ffffff;
  border-top: 1px solid #e0e0e0;
  color: black;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  font-family: 'Fira Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  height: 15%;
  hyphens: none;
  line-height: 1.5;
  margin: .5em 0;
  min-height: 105px;
  overflow: auto;
  padding: 1em;
  tab-size: 4;
  text-align: left;
  text-shadow: 0 1px white;
  white-space: pre;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal; }

.f-row {
  display: flex;
  flex-direction: row; }

.f-column {
  display: flex;
  flex-direction: column; }

.f-self-center {
  align-self: center; }

.f-between {
  justify-content: space-between; }

.f-center {
  justify-content: center; }

.f-wrap {
  flex-wrap: wrap; }

.f-grow {
  flex-grow: 1; }

.o-auto {
  overflow: auto; }

.w-100 {
  width: 100%; }

.w-50 {
  width: 50%; }

.w-30 {
  width: 30%; }

.w-20 {
  width: 20%; }

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.5px 0; }

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

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  box-shadow: 0px 0px 0.1px #000000, 0px 0px 0px #0d0d0d;
  background: #00b8d4;
  border-radius: 2px;
  border: 0px solid #18d501; }

input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #b3e5fc, 0px 0px 0px #ccedfd;
  border: 0px solid #b3e5fc;
  height: 20px;
  width: 20px;
  border-radius: 12px;
  background: #b3e5fc;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -6.5px; }

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #00d3f3; }

input[type=range]::-moz-range-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  box-shadow: 0px 0px 0.1px #000000, 0px 0px 0px #0d0d0d;
  background: #00b8d4;
  border-radius: 2px;
  border: 0px solid #18d501; }

input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #b3e5fc, 0px 0px 0px #ccedfd;
  border: 0px solid #b3e5fc;
  height: 20px;
  width: 20px;
  border-radius: 12px;
  background: #b3e5fc;
  cursor: pointer; }

input[type=range]::-ms-track {
  width: 100%;
  height: 7px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent; }

input[type=range]::-ms-fill-lower {
  background: #009db5;
  border: 0px solid #18d501;
  border-radius: 4px;
  box-shadow: 0px 0px 0.1px #000000, 0px 0px 0px #0d0d0d; }

input[type=range]::-ms-fill-upper {
  background: #00b8d4;
  border: 0px solid #18d501;
  border-radius: 4px;
  box-shadow: 0px 0px 0.1px #000000, 0px 0px 0px #0d0d0d; }

input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 1px #b3e5fc, 0px 0px 0px #ccedfd;
  border: 0px solid #b3e5fc;
  height: 20px;
  width: 20px;
  border-radius: 12px;
  background: #b3e5fc;
  cursor: pointer;
  height: 7px; }

input[type=range]:focus::-ms-fill-lower {
  background: #00b8d4; }

input[type=range]:focus::-ms-fill-upper {
  background: #00d3f3; }

/*# sourceMappingURL=style.css.map */