@font-face {
  font-family: "ShantellSans-Medium";
  src: url("../fonts/ShantellSans-Medium.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "DroidSerif";
  src: url("../fonts/DroidSerif.woff2") format("woff");
  font-weight: normal;
  font-style: normal;
}
html {
  overflow-x: hidden;
}

@media screen and (max-width: 721px) {
  .hide-small {
    display: none;
  }
}

@media screen and (max-width: 721px) {
  .small-margins {
    margin: auto !important;
  }
}

.menu-holder {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #ff914d;
}

.inverted-button {
  color: #2e0644;
  border-radius: 0px;
  background-image: url("/img/button-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 20px;
}
@media screen and (max-width: 721px) {
  .inverted-button {
    height: 40px;
  }
}
@media screen and (max-width: 360px) {
  .inverted-button {
    height: 60px;
  }
}

.button-selected {
  background-image: url("/img/button-bg-selected.png");
}

.blue-background-image {
  background-image: url("/img/bigger-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.comic-holder {
  width: 80vw;
  margin: auto;
}

.mud-carousel {
  perspective: 1200px;
}

.mud-width-full {
  width: 80vw;
  justify-self: center;
}

.page-flip-exit {
  animation: flipOutNext 1.5s ease-in-out forwards;
  transform-origin: left center;
}

.page-flip-enter {
  animation: flipInNext 1.5s ease-in-out forwards;
  transform-origin: right center;
}

@keyframes flipOutNext {
  0% {
    transform: rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(-90deg);
    opacity: 0;
  }
}
@keyframes flipInNext {
  0% {
    transform: rotateY(90deg);
    opacity: 0;
  }
  100% {
    transform: rotateY(0deg);
    opacity: 1;
  }
}
.card {
  transition: 1s ease-in-out;
  transform-style: preserve-3d;
}
.card:hover {
  transform: rotateY(0.5turn);
}
.card .card_face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: 1s ease-in-out;
  -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
.card .card_face--back {
  transform: rotateY(0.5turn);
}

.wide-content .mud-overlay-content {
  width: 95vw;
}

.purple-stroke {
  text-shadow: -2px -2px 0 rgb(140, 82, 255), 2px -2px 0 rgb(140, 82, 255), -2px 2px 0 rgb(140, 82, 255), 2px 2px 0 rgb(140, 82, 255);
}

.mud-appbar-fixed-bottom .mud-toolbar-appbar {
  height: 150px;
  max-height: 15vh;
}