html, body {
  height:98%;
  width:100%;
  margin:0;
  background-color: black;
}

#player_holder {
  height:100%;
  width:100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#player_holder iframe {
  height:100%;
  width:100%;
  display: none;
}

#player_holder.halved {
    height: 50%;
}

#play_button {
  color:white;
}

#answer_button {
    height: 32px;
    margin-top: auto;
    margin-bottom: auto;
}

#question_holder, #result_holder {
    display: inline-block;
    position: absolute;
    top: 92%;
    z-index: 9999;
    color: white;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-evenly;
}

#end_screen_holder {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    position: absolute;
    top: 58%;
    height: 42%;
    width: 100%;
}

.movie_poster{
    height:80%
}

.movie_title{
    height:20%;
    color: #fff;
    text-align: center;
}

.movie {
    margin: 5px 10px;
}

$end_screen_holder .movie {
    flex: 0 0 auto;
}

#question_holder.halved, #result_holder.halved {
    height: 8%;
    top: 50%;
}

#new_game {
    margin-top: auto;
    margin-bottom: auto;
    height: 32px;
}

#options_holder button {
    background-color: black;
    font-size: 16px;
    font-weight: 600;
    color: white;
    padding: 6px;
    border-style: outset;
    border-color: white;
    display: none;
}

.ui-menu-item {
    background: white;
    height: 22px;
    font-size: 16px;
}

.base-timer {
    position: relative;
    height: 100px;
    width: 100px;
}

/* Removes SVG styling that would hide the time label */
.base-timer__circle {
    fill: none;
    stroke: none;
}

/* The SVG path that displays the timer's progress */
.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
}

.base-timer__label {
    position: absolute;
    /* Size should match the parent container */
    width: 100px;
    height: 100px;
    /* Keep the label aligned to the top */
    top: 0;
    /* Create a flexible box that centers content vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sort of an arbitrary number; adjust to your liking */
    font-size: 36px;
}


.base-timer__path-remaining {
    /* Just as thick as the original ring */
    stroke-width: 7px;
    /* Rounds the line endings to create a seamless circle */
    stroke-linecap: round;
    /* Makes sure the animation starts at the top of the circle */
    transform: rotate(90deg);
    transform-origin: center;
    /* One second aligns with the speed of the countdown timer */
    transition: 1s linear all;
    /* Allows the ring to change color when the color value updates */
    stroke: currentColor;
}

.base-timer__svg {
    /* Flips the svg and makes the animation to move left-to-right */
    transform: scaleX(-1);
}

#timer_holder{
    width: 100px;
    margin-top: -21px;
}

#movie_name_answer{
    height: 22px;
    margin-top: auto;
    margin-bottom: auto;
}

.ui-autocomplete{
    z-index: 99999;
}

#result_header{
    height: fit-content;
}