*,
*:after,
*:before {
  box-sizing  : border-box;
  margin      : 0;
  outline     : none;
  font-family : "Roboto",
                sans-serif;
}

body {
  display             : flex;
  width               : 100vw;
  height              : 100vh;
  padding             : 5vh 10vw;
  padding-bottom      : 5vh;
  overflow            : hidden;
  background-image    : url('https://mojo.highquality.rip/wp-content/themes/mojo/bg.png');
  background-color    : #0b214b;
  background-position : 50% 50%;
  background-size     : auto 110%;
  justify-content     : center;
  backdrop-filter     : blur(8px);
}

ol,
ul {
  list-style : none;
}

::-webkit-scrollbar {
  width            : 10px;
  background-color : transparent;
}

::-webkit-scrollbar-thumb {
  border-radius    : 5px;
  background-color : #1d1d1d80;
}

#content {
  z-index   : 0;
  display   : flex;
  width     : min(1200px, 100%);
  height    : 100%;
  flex-flow : column;
}

#status {
  position      : absolute;
  top           : -30px;
  width         : 100%;
  margin-bottom : 10px;
  color         : #ffffffb3;
  text-align    : center;
  text-shadow   : 0px 0px 4px cyan;
  font-size     : 20px;
  font-weight   : 500;
}

.panel {
  border           : none;
  border-radius    : 16px;
  background-color : #1d1d1db3;
  transition       : background-color 0.2s;
}

#characters {
  display         : flex;
  padding         : 0;
  flex-flow       : row wrap;
  justify-content : space-between;
}

.character {
  display         : flex;
  margin          : auto;
  padding         : 5px;
  border-radius   : 5px;
  flex-basis      : 5.8%;
  justify-content : center;
  transition      : 0.25s;
  cursor          : pointer;
  user-select     : none;
}

.character img {
  max-height : 42px;
}

#characters:hover > * {
  opacity    : 0.6;
  transition : 0.25s;
}

#characters:hover > *:hover {
  opacity          : 1;
  background-color : #161616;
  transform        : scale(1.2);
  transition       : 0.25s;
}

.selected {
  z-index          : 1;
  background-color : #3086ffcc !important;
  box-shadow       : 0px 0px 8px #3086ffcc;
  transition       : 0.15s;
}

.excluded {
  z-index          : 1;
  background-color : #ff49aecc !important;
  box-shadow       : 0px 0px 8px #ff49aecc;
  transition       : 0.15s;
}

@keyframes zoom {
  from {
    margin-top : 0;
    transform  : scale(1);
  }

  to {
    margin-top : 30vh;
    transform  : scale(1.25);
  }
}

@keyframes unzoom {
  from {
    margin-top : 30vh;
    transform  : scale(1.25);
  }

  to {
    margin-top : 0;
    transform  : scale(1);
  }
}

#options {
  display         : flex;
  margin-top      : 20px;
  justify-content : space-between;
}

.option {
  height      : 36px;
  color       : #c4dcff;
  text-align  : center;
  font-weight : 500;
  flex-grow   : 1;
  line-height : 36px;
  user-select : none;
  cursor      : pointer;
}

.option:hover {
  background-color : #1d1d1dcc;
  transition       : 0.2s;
}

#posts {
  display               : grid;
  margin-top            : 20px;
  padding               : 0;
  overflow-y            : auto;
  grid-gap              : 20px;
  grid-template-columns : repeat( auto-fit, minmax(300px, 1fr) );
  grid-template-rows    : repeat( auto-fill, auto );
}

.post {
  display             : flex;
  padding             : 10px;
  background-repeat   : no-repeat;
  background-position : center right,
                        center left;
  background-size     : 50% auto;
  flex-flow           : column;
  justify-content     : space-between;
}

.post-title {
  color           : #eeeeff;
  text-decoration : none;
  font-size       : 19px;
  font-weight     : 500;
}

.post-title:hover {
  text-decoration : underline;
}

.post-subtitle {
  color : #eeeeffbc;
}

.post button {
  margin-right : 8px;
}

#controls {
  display         : flex;
  min-height      : 104px;
  margin-top      : 20px;
  padding         : 12px;
  align-items     : center;
  flex-flow       : column;
  justify-content : space-between;
}

#media {
  display         : flex;
  top             : 0;
  width           : 100%;
  align-items     : center;
  justify-content : space-between;
  user-select     : none;
}

.button {
  min-width        : 56px;
  height           : 38px;
  min-height       : 38px;
  color            : #eeeeff;
  overflow         : hidden;
  border-radius    : 12px;
  background-color : #c4dcff20;
  font-size        : 20px;
  transition       : background-color 0.15s;
  cursor           : pointer;
  backdrop-filter : blur(4px);
}

.button:hover {
  background-color : #c4dcff40;
  transition       : 0.15s;
}

.button:active {
  background-color : #1d1d1dcc;
  transition       : 0.05s;
}

.link,
.play,
.read {
  text-align      : center;
  text-decoration : none;
}

#volume-fill {
  width        : 75%;
  min-height   : 100%;
  border-right : 2px solid #c4dcff60;
  background   : linear-gradient(
                   to right,
                   transparent,
                   #c4dcff40
                 );
}

#volume {
  position   : relative;
  transition : min-width .2s;
}

#volume:hover {
  min-width  : 200px;
  transition : .2s;
}

#volume p {
  position    : absolute;
  width       : 100%;
  text-align  : center;
  line-height : 38px;
}

#time-current,
#time-max {
  margin : 0px 10px;
  color  : #eeeeffbc;
}

#progress {
  width            : 100%;
  height           : 12px;
  border-radius    : 6px;
  background-color : #c4dcff20;
  cursor           : pointer;
}

#progress-fill {
  width            : 50%;
  height           : 100%;
  border-radius    : 6px;
  background-color : #3086ffcc;
  box-shadow       : 0px 0px 8px #3086ffcc;
}

#interview {
  display    : flex;
  position   : relative;
  width      : min(100%, 600px);
  height     : 100%;
  margin-top : 20px;
  padding    : 10px;
  color      : #ffffffcc;
  overflow-x : hidden;
  overflow-y : auto;
  align-self : center;
  flex-flow  : column;
}

#interview:not(.interview-dialogue) em {
  margin      : auto;
  margin      : 20px 0px;
  color       : #ffffffcc;
  text-align  : center;
  font-weight : 500;
}

#interview img {
  max-width     : 100%;
  margin        : auto;
  border-radius : 8px;
}

#interview::-webkit-scrollbar-thumb {
  background-color: #c4dcff20;
}

#back {
  position  : fixed;
  min-width : 26px;
  height    : 26px;
}

.interview-dialogue {
  display     : flex;
  margin      : 5px 0px;
  color       : #ffffffcc;
  align-items : center;
  flex-flow   : row;
}

.interview-dialogue p {
  max-width        : 70%;
  padding          : 5px;
  border-radius    : 10px;
  background-color : #c4dcff20;
}

.interview-dialogue .icon {
  width               : 42px;
  height              : 42px;
  margin              : 5px;
  color               : transparent;
  background-repeat   : no-repeat;
  background-position : center;
  background-size     : contain;
  user-select         : none;
}

.interview-dialogue-right {
  flex-flow : row-reverse;
}

#credits {
  position   : absolute;
  bottom     : 10px;
  color      : #c4dcff30;
  text-align : center;
  font-size  : 14px;
}

#credits a {
  color           : #ff49ae40;
  text-decoration : none;
  font-weight     : 500;
}

#footer {
  z-index             : -1;
  position            : absolute;
  bottom              : 0;
  width               : 100%;
  height              : max(20vw, 20vh);
  opacity             : 0.6;
  background-image    : url('https://mojo.highquality.rip/wp-content/themes/mojo/header.png');
  background-position : bottom center;
  background-size     : cover;
  filter              : blur(8px);
  transform           : scaleY(-1);
}