html {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body {
  overflow: hidden;
}

.main_container {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.main_container #createPage {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.main_container #createPage .main_view {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.slideList {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  position: relative;
  text-shadow: 2px 2px 4px #000000;
}

.slideList #backgroundSlideVideo {
  position: absolute;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.slideList .startgame {
  position: absolute;
  height: 100vh;
}

.slideList .startgame strong {
  cursor: pointer;
  text-shadow: 2px 3px 3px #0c0101;
  line-height: 80vh;
  font-size: 100px;
  color: cyan;
}

.slideList .score_board {
  top: 50px;
  margin-left: 20px;
  text-align: left;
  color: white;
  position: absolute;
  text-shadow: 2px 3px 3px #000000;
  font-size: 30px !important;
}

.slideList .score_board.--end {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 70px !important;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  top: 0;
  height: calc(100vh - 70px);
}

.slideList .score_board.--end img {
  max-width: 50vmin;
}

.slideList .score_board.--end strong {
  color: darkorange;
}

.slideList .score_board.--end strong.replay {
  font-size: 6vmin;
  cursor: pointer;
}

.slideList .score_board.--end strong.replay:hover {
  color: deepskyblue;
}

.slideList .timebar {
  width: unset;
  top: 50px;
  right: -15px;
  position: absolute;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  color: white;
  text-align: right;
}

.slideList .timebar .timer_container div.inn {
  color: white;
}

.slideList .questionPreview {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  font-family: cursive;
  color: white;
  letter-spacing: 0.2em;
  display: inline-table;
  visibility: hidden;
  line-height: 70vh;
}

.slideList .questionPreview .gameLetter {
  display: inline-block;
}

.slideList .questionPreview .selected {
  font-size: 1.3em;
}

.slideList .resultPanel {
  position: absolute;
  top: 90px;
  font-size: 6em;
  font-weight: bold;
  text-align: center;
  font-family: cursive;
}

.slideList .resultPanel.--correct {
  color: green;
}

.slideList .resultPanel.--incorrect {
  color: red;
}
