/* GENERAL MOCKUP STYLING */


/* * {
  font-family: 'Roboto', sans-serif;
} */

.f-permanent-marker {
  font-family: 'Permanent Marker', sans-serif;
}

.bg-teal {
  background-color: var(--teal);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-orange {
  background-color: var(--orange);
}

.btn-purple {
  color: #fff;
  background-color: var(--purple);
  border-color: var(--purple);
}

.btn-purple:hover {
  color: var(--yellow);
  background-color: #6f4288;
  border-color: var(--yellow);
}

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

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

.btn-outline-orange:focus,
.btn-outline-orange.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(253, 125, 20, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(253, 125, 20, 0.5)
}

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

.btn-outline-orange:not(:disabled):not(.disabled):active,
.btn-outline-orange:not(:disabled):not(.disabled).active,
.show>.btn-outline-orange.dropdown-toggle {
  color: #fff;
  background-color: var(--orange);
  border-color: rgba(253, 125, 20)
}

.btn-outline-orange:not(:disabled):not(.disabled):active:focus,
.btn-outline-orange:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-orange.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(253, 125, 20, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(253, 125, 20, 0.5)
}

h1 {
  font-size: 1.8em;
}

body {
  height: calc(var(--vh, 1vh) * 100);
}

@media screen and (orientation:portrait) {
  header {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 35);
    background-color: rgb(65, 64, 64);
    overflow: hidden;
    position: fixed !important;
    z-index: 1;
  }
  main {
    margin-top: 35vh;
  }
  #logo {
    max-height: 30vh;
  }
}

@media screen and (orientation:landscape) {
  header {
    width: 30vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background-color: rgb(219, 11, 28);
    overflow: hidden;
  }
  #logo {
    max-width: 20vw;
  }
  main {
    width: 70vw;
    height: 100%;
    overflow-Y: scroll;
  }
}