@font-face {
  font-family: Nikodecs;
  src: url(/assets/fonts/nikodecs.otf) format("opentype");
}

body{
    background-color: #DEDEDE;
    font-family: Sans-Serif;	
    margin:0;
    padding:0;
    height:100%;
    overflow-y:hidden;
}

#main-container{
    background-color: #FFF;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.user_avatar{width:10vw;height:10vw;position:relative;margin:auto;}
.user_avatar img{width:100%;height:100%;position:absolute;top:0;left:0;}

.game {
    height:100%;
    width:70%;
    position:relative;
    float:left;
}

.game-info {
    width:100%;
    background-color: rgb(3,143,191);
    height:7%;
    padding-top:1%;
}

.active-player{
    color:white;
}

.name {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1rem;
    float:left;
}

.playerinfo{
    padding-bottom:20px;
    width:50%;
}

.myblock{float:left;}
.oponentblock{float:right;}

.players-name {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 1em;
    text-align: center;
}

.oponent-name {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 1rem;
    text-align: center;
    float:right;
    margin-right:5%;
}

.user_avatar{width:2vw;height:2vw;position:relative;margin:auto;float:left;padding:0 1vw 0 1vw;}
.user_avatar img{width:100%;height:100%;position:absolute;top:0;left:0;}
.oponent-avatar{float:right;}

#chat{
    position:relative;
    width:30%;
    height:100%;
    float:left;
}

.timeleft{position:relative;display:inline-block;}
#oponenttimeleft{margin-right:2em;float:right;}











button, button:hover, button:active, button:focus, button:visited, .butn, .butn:hover, .butn:active, .butn:focus, .butn:visited {
  text-decoration: none !important;
  outline: none !important;
}
.butn.disabled, .butn[disabled] {
  cursor: default;
  opacity: 1;
}
#quiz {
    background-color:black;
    position:relative;
    width: 100%;
    height:100%;
    font-family: 'Nikodecs', cursive;
    letter-spacing: .015em;

}
#quiz .container-fluid {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}

#quiz-stats {
  padding: 16px 0 12px 0;
  margin: 0;
  font-size: 14px;
  width:100%;
  color: rgba(0, 0, 0, 0.7);
}
#quiz-question {
  font-size: 35px;
  font-weight: 600;
  margin: 32px 0 26px 0;
  color:#FFD21A;
}

#quiz-options {
  margin: 26px 0;
}
.quiz-ans-btn {
  font-size: 20px;
  color: #fff;
  width: 45%;
  min-height: 75px;
  padding: 5px;
  background-color: #336666;
  border: 1px solid rgba(0, 0, 0, 0.075);
  border-radius: 50px;
  outline: none;
  letter-spacing: .05em;
  transition: all 0.5s;
  margin: 8px;
  box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); 
  white-space: normal; 
}
.quiz-ans-btn:hover { color: #fff; background-color: #476b6b; }
.butn.quiz-ans-btn:active, .butn.quiz-ans-btn:focus { color: #fff; background-color: #334d4d; }
.quiz-ans-btn.correct {
  background-color: #29a329;
  animation: glowing 1s infinite;
}

@keyframes glowing {	
	0% {
		background-color: #2ba805;
		box-shadow: 0 0 5px #2ba805;
	}
    50% {
		background-color: #49e819;
        box-shadow: 0 0 20px #49DD19;
	}
    100% {
		background-color: #2ba805;
        box-shadow: 0 0 5px #2ba805;
	}
}

.quiz-ans-btn.incorrect {
  background-color: #e60000;
}
.quiz-ans-btn.selected {
  background-color: #CCCC00;
}


.quiz-ans-btn.oponnent-correct {
  border:solid #1DAB3E 5px;
}

.quiz-ans-btn.oponnent-incorrect {
  border:solid #FF3232 5px;
}


#quiz-play-again {
  overflow-y: hidden;
  display: none;
}
#quiz-play-again-btn {  
  display: block;
  font-size: 32px;
  color: #fff;
  background-color: #669999;
	border: 8px double #fff; 
	border-radius: 14px;
	padding: 5px 10px;  
  width: 33%;
  min-height: 100px;
  outline: none;
  letter-spacing: .05em;
  transition: all 0.5s;
  margin: 0px auto;
  white-space: normal;   
}

#quiz-play-again-btn:hover { color: #fff; background-color: #476b6b; }
#quiz-play-again-btn:active, #quiz-play-again-btn:focus { color: #fff; background-color: #334d4d; }
#quiz-play-again-btn.pulse { 
  animation-duration: 1s;
}

@media (max-width: 768px) {
  #quiz-stats { padding: 12px 0 8px 0; font-size: 10px; }   
  #quiz-stats>div>span { font-size: 18px; }
  #quiz-stats>div>p>span { display: none; }
  #quiz-stats .fa-bar-chart { font-size: 54px; }  
  #quiz-question { font-size: 16px; margin: 20px 0 14px 0; }  
  #quiz-options { margin: 14px 0 20px 0; } 
  .quiz-ans-btn { font-size: 16px; min-height: 65px; }  
  #quiz-play-again-btn {  font-size: 28px; width: 66%; }
}

.progress-bar{
    z-index:20;
    font-size:2em!important;
}

.progress{
    width:80%;
    height:3em!important;
    margin:auto;
}


#quiz .main {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 1px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: -42vw -4vh 0px 0px #fff,25vw -41vh 0px 0px #fff,-20vw 49vh 0px 1px #fff,5vw 40vh 1px 1px #fff,29vw 19vh 1px 0px #fff,-44vw -13vh 0px 0px #fff,46vw 41vh 0px 1px #fff,-3vw -45vh 0px 1px #fff,47vw 35vh 1px 0px #fff,12vw -8vh 1px 0px #fff,-34vw 48vh 1px 1px #fff,32vw 26vh 1px 1px #fff,32vw -41vh 1px 1px #fff,0vw 37vh 1px 1px #fff,34vw -26vh 1px 0px #fff,-14vw -49vh 1px 0px #fff,-12vw 45vh 0px 1px #fff,-44vw -33vh 0px 1px #fff,-13vw 41vh 0px 0px #fff,-36vw -11vh 0px 1px #fff,-23vw -24vh 1px 0px #fff,-38vw -27vh 0px 1px #fff,16vw -19vh 0px 0px #fff,28vw 33vh 1px 0px #fff,-49vw -4vh 0px 0px #fff,16vw 32vh 0px 1px #fff,36vw -18vh 1px 0px #fff,-25vw -30vh 1px 0px #fff,-23vw 24vh 0px 1px #fff,-2vw -35vh 1px 1px #fff,-25vw 9vh 0px 0px #fff,-15vw -34vh 0px 0px #fff,-8vw -19vh 1px 0px #fff,-20vw -20vh 1px 1px #fff,42vw 50vh 0px 1px #fff,-32vw 10vh 1px 0px #fff,-23vw -17vh 0px 0px #fff,44vw 15vh 1px 0px #fff,-40vw 33vh 1px 1px #fff,-43vw 8vh 0px 0px #fff,-48vw -15vh 1px 1px #fff,-24vw 17vh 0px 0px #fff,-31vw 50vh 1px 0px #fff,36vw -38vh 0px 1px #fff,-7vw 48vh 0px 0px #fff,15vw -32vh 0px 0px #fff,29vw -41vh 0px 0px #fff,2vw 37vh 1px 0px #fff,7vw -40vh 1px 1px #fff,15vw 18vh 0px 0px #fff,25vw -13vh 1px 1px #fff,-46vw -12vh 1px 1px #fff,-18vw 22vh 0px 0px #fff,23vw -9vh 1px 0px #fff,50vw 12vh 0px 1px #fff,45vw 2vh 0px 0px #fff,14vw -48vh 1px 0px #fff,23vw 43vh 0px 1px #fff,-40vw 16vh 1px 1px #fff,20vw -31vh 0px 1px #fff,-17vw 44vh 1px 1px #fff,18vw -45vh 0px 0px #fff,33vw -6vh 0px 0px #fff,0vw 7vh 0px 1px #fff,-10vw -18vh 0px 1px #fff,-19vw 5vh 1px 0px #fff,1vw 42vh 0px 0px #fff,22vw 48vh 0px 1px #fff,39vw -8vh 1px 1px #fff,-6vw -42vh 1px 0px #fff,-47vw 34vh 0px 0px #fff,-46vw 19vh 0px 1px #fff,-12vw -32vh 0px 0px #fff,-45vw -38vh 0px 1px #fff,-28vw 18vh 1px 0px #fff,-38vw -46vh 1px 1px #fff,49vw -6vh 1px 1px #fff,-28vw 18vh 1px 1px #fff,10vw -24vh 0px 1px #fff,-5vw -11vh 1px 1px #fff,33vw -8vh 1px 0px #fff,-16vw 17vh 0px 0px #fff,18vw 27vh 0px 1px #fff,-8vw -10vh 1px 1px #fff;
  
  /* stars were too big with the layers above but left the code in case no one cares  -- as in, if noone's just that  one other loner who actually cares    */
  
  box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
  animation: zoom 16s alternate infinite; 
}

@keyframes zoom {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}



.countdown-bar {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: 20px;
  background: #ddd;
  border-radius: 50px;
  overflow: hidden;
  position:absolute;
  bottom:10%;
}
.countdown-bar > div {
  flex-grow: 1;
  height: 100%;
  background-image: linear-gradient(to bottom, #388fe8, #256db8);
  transform-origin: 0% 0%;
}
.countdown-bar > div:nth-child(1) {
  animation: scaleDown 0.5s 0s forwards;
}
.countdown-bar > div:nth-child(2) {
  animation: scaleDown 0.5s 1s forwards;
}
.countdown-bar > div:nth-child(3) {
  animation: scaleDown 0.5s 2s forwards;
}
.countdown-bar > div:nth-child(4) {
  animation: scaleDown 0.5s 3s forwards;
}
.countdown-bar > div:nth-child(5) {
  animation: scaleDown 0.5s 4s forwards;
}
.countdown-bar > div:nth-child(6) {
  animation: scaleDown 0.5s 5s forwards;
}
.countdown-bar > div:nth-child(7) {
  animation: scaleDown 0.5s 6s forwards;
}
.countdown-bar > div:nth-child(8) {
  animation: scaleDown 0.5s 7s forwards;
}
.countdown-bar > div:nth-child(9) {
  animation: scaleDown 0.5s 8s forwards;
}
.countdown-bar > div:nth-child(10) {
  animation: scaleDown 0.5s 9s forwards;
}
.countdown-bar > div:nth-child(11) {
  animation: scaleDown 0.5s 10s forwards;
}
.countdown-bar > div:nth-child(12) {
  animation: scaleDown 0.5s 11s forwards;
}
.countdown-bar > div:nth-child(13) {
  animation: scaleDown 0.5s 12s forwards;
}
.countdown-bar > div:nth-child(14) {
  animation: scaleDown 0.5s 13s forwards;
}
.countdown-bar > div:nth-child(15) {
  animation: scaleDown 0.5s 14s forwards;
}
.countdown-bar > div:nth-child(16) {
  animation: scaleDown 0.5s 15s forwards;
}
.countdown-bar > div:nth-child(17) {
  animation: scaleDown 0.5s 16s forwards;
}
.countdown-bar > div:nth-child(18) {
  animation: scaleDown 0.5s 17s forwards;
}
.countdown-bar > div:nth-child(19) {
  animation: scaleDown 0.5s 18s forwards;
}
.countdown-bar > div:nth-child(20) {
  animation: scaleDown 0.5s 19s forwards;
}
.countdown-bar > div:nth-child(21) {
  animation: scaleDown 0.5s 20s forwards;
}
.countdown-bar > div:nth-child(22) {
  animation: scaleDown 0.5s 21s forwards;
}
.countdown-bar > div:nth-child(23) {
  animation: scaleDown 0.5s 22s forwards;
}
.countdown-bar > div:nth-child(24) {
  animation: scaleDown 0.5s 23s forwards;
}
.countdown-bar > div:nth-child(25) {
  animation: scaleDown 0.5s 24s forwards;
}
.countdown-bar > div:nth-child(26) {
  animation: scaleDown 0.5s 25s forwards;
}
.countdown-bar > div:nth-child(27) {
  animation: scaleDown 0.5s 26s forwards;
}
.countdown-bar > div:nth-child(28) {
  animation: scaleDown 0.5s 27s forwards;
}
.countdown-bar > div:nth-child(29) {
  animation: scaleDown 0.5s 28s forwards;
}
.countdown-bar > div:nth-child(30) {
  animation: scaleDown 0.5s 29s forwards;
}
.countdown-bar > div:nth-child(31) {
  animation: scaleDown 0.5s 30s forwards;
}
.countdown-bar > div:nth-child(32) {
  animation: scaleDown 0.5s 31s forwards;
}
.countdown-bar > div:nth-child(33) {
  animation: scaleDown 0.5s 32s forwards;
}
.countdown-bar > div:nth-child(34) {
  animation: scaleDown 0.5s 33s forwards;
}
.countdown-bar > div:nth-child(35) {
  animation: scaleDown 0.5s 34s forwards;
}
.countdown-bar > div:nth-child(36) {
  animation: scaleDown 0.5s 35s forwards;
}
.countdown-bar > div:nth-child(37) {
  animation: scaleDown 0.5s 36s forwards;
}
.countdown-bar > div:nth-child(38) {
  animation: scaleDown 0.5s 37s forwards;
}
.countdown-bar > div:nth-child(39) {
  animation: scaleDown 0.5s 38s forwards;
}
.countdown-bar > div:nth-child(40) {
  animation: scaleDown 0.5s 39s forwards;
}
.countdown-bar > div:nth-child(41) {
  animation: scaleDown 0.5s 40s forwards;
}
.countdown-bar > div:nth-child(42) {
  animation: scaleDown 0.5s 41s forwards;
}
.countdown-bar > div:nth-child(43) {
  animation: scaleDown 0.5s 42s forwards;
}
.countdown-bar > div:nth-child(44) {
  animation: scaleDown 0.5s 43s forwards;
}
.countdown-bar > div:nth-child(45) {
  animation: scaleDown 0.5s 44s forwards;
}
.countdown-bar > div:nth-child(46) {
  animation: scaleDown 0.5s 45s forwards;
}
.countdown-bar > div:nth-child(47) {
  animation: scaleDown 0.5s 46s forwards;
}
.countdown-bar > div:nth-child(48) {
  animation: scaleDown 0.5s 47s forwards;
}
.countdown-bar > div:nth-child(49) {
  animation: scaleDown 0.5s 48s forwards;
}
.countdown-bar > div:nth-child(50) {
  animation: scaleDown 0.5s 49s forwards;
}
.countdown-bar > div:nth-child(51) {
  animation: scaleDown 0.5s 50s forwards;
}
.countdown-bar > div:nth-child(52) {
  animation: scaleDown 0.5s 51s forwards;
}
.countdown-bar > div:nth-child(53) {
  animation: scaleDown 0.5s 52s forwards;
}
.countdown-bar > div:nth-child(54) {
  animation: scaleDown 0.5s 53s forwards;
}
.countdown-bar > div:nth-child(55) {
  animation: scaleDown 0.5s 54s forwards;
}
.countdown-bar > div:nth-child(56) {
  animation: scaleDown 0.5s 55s forwards;
}
.countdown-bar > div:nth-child(57) {
  animation: scaleDown 0.5s 56s forwards;
}
.countdown-bar > div:nth-child(58) {
  animation: scaleDown 0.5s 57s forwards;
}
.countdown-bar > div:nth-child(59) {
  animation: scaleDown 0.5s 58s forwards;
}
.countdown-bar > div:nth-child(60) {
  animation: scaleDown 0.5s 59s forwards;
}

@keyframes scaleDown {
  100% {
    transform: scaleX(0);
  }
}