kahoot xs

background: white;}
/** CSS By Austin (638877683) **/
body {
 margin: 0;
 font-size: 12px;
 font-family: 'Montserrat','Helvetica Neue',helvetica,arial,sans-serif;
 line-height: 180%;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased;
 font-smoothing: antialiased;
 color: #000;
 overflow: hidden;
}

@font-face {
 font-family: bpreplay;
 src: url('https:\/\/austinh115.github.io/BPreplayBoldItalics.ttf');
 /*src: url('BPreplayBoldItalics.ttf');*/
}

*{padding:0;margin:0;}

/**/

.kahoot {
 width: 100vw;
 height: 100vh;
 display: block;
 overflow: hidden;
}

.header {
 height: 10vh;
 width: 100%;
 background: white;
 border-bottom: 3px solid #d9d9d9;
}

.title {
 font-size: 56px;
 text-align: center;
 line-height: 10vh;
}

.question-big .title {
 font-family: bpreplay;
 font-weight: bold;
}

.fullscreen {
 position: absolute;
 top: 0;
 right: 0;
 height: 10vh;
}

.screen {
 display: block;
 position: relative;
 height: 100vh;
 width: 100%;
 overflow: hidden;
}

.timer {
 height: 20px;
 background: #ccc;
 position: absolute;
 top: calc(10vh + 3px);
 width: 100%;
}

.timer::after {
 content: '';
 display: block;
 background: rgb(114, 51, 178);
 width: 0px;
 height: 100%;
 animation: timer forwards 5s linear;
}

@keyframes timer {
 0% {
  width: 0px;
 }
 100% {
  width: 100%;
 }
}

.question-big h1 {
 display: block;
 line-height: 80vh;
 width: 100%;
 text-align: center;
 font-size: 64px;
 font-weight: normal;
}

.footer {
 display: block;
 height: 10vh;
 width: 100%;
 background: rgb(19, 104, 206);
 color: white;
 font-size: 28px;
 text-align: center;
 line-height: 10vh;
}

.question-mini, .results {
 opacity: 0;
 top: 0;
 position: absolute;
}

.question-big {
 animation: hidebig 0s forwards steps(2, end);
 animation-delay: 5s;

 display: block;
 opacity: 1;
 z-index: 999;
}
.question-mini {
 animation: showmini 0s forwards steps(2, end), hidemini 0s forwards steps(2, end);
 animation-delay: 5s, 25s;

 background: rgb(242, 242, 242);

 display: block;
 width: 100%;
 z-index: 998;
}
.results {
 animation: showresult 0s forwards steps(2, end);
 animation-delay: 25s;

 width: 100%;
 height: 100%;

 background: rgb(255, 51, 85);

 color: white;

 text-align: center;

 display: flex;
    align-items: center;
    justify-content: center;
    z-index: 997;
}
/*h1 img span span*/
.results h1 {
 font-family: bpreplay;
 font-size: 2rem;
    margin: 0 0 1rem;
    line-height: normal;
}
.results .img {
 background: url('https:\/\/austinh115.github.io/icn_incorrect.svg') center/contain no-repeat;
    height: 4.5rem;
    margin: 0 0 1.5rem;
}
.results .msg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .625rem;
    background-color: rgba(0,0,0,.15);
 overflow: hidden;
    position: relative;
    margin: 0 auto 1rem;
    min-height: 3.875rem;
    width: 300px;
    font-size: 1.25rem;
    line-height: 1.25;
}
.results .place {
    width: 100%;
    font-size: 1rem;
    letter-spacing: .025rem;
    line-height: 1.5;
    margin-top: 7.5rem;
    display: block;
}

@keyframes hidebig {
 100% {opacity: 0;display:none;}
}

@keyframes showmini {
 100% {opacity: 1}
}

@keyframes hidemini {
 100% {opacity: 0;display:none;}
}

@keyframes showresult {
 100% {opacity: 1}
}

.countdown, .finished {
    position: absolute;
    top: 25vh;
    height: 120px;
    width: 120px;
    margin-top: calc(40px);
    line-height: 120px;
    text-align: center;
    display: block;
    font-family: bpreplay;
    font-size: 54px;
}

.content {
 height: 50vh;
 width: 100%;
}

.content img {
 margin: 0 auto;
 display: block;
 position: relative;
 top: 50%;
 transform: translateY(-50%);
max-height: 100%;
}

@keyframes countdown {
 0% {content:'20'}
 5% {content:'19'}
 10% {content:'18'}
 15% {content:'17'}
 20% {content:'16'}
 25% {content:'15'}
 30% {content:'14'}
 35% {content:'13'}
 40% {content:'12'}
 45% {content:'11'}
 50% {content:'10'}
 55% {content:'9'}
 60% {content:'8'}
 65% {content:'7'}
 70% {content:'6'}
 75% {content:'5'}
 80% {content:'4'}
 85% {content:'3'}
 90% {content:'2'}
 95% {content:'1'}
 100% {content:'0'}
}

.countdown {
 left: 3%;
 background: rgb(134, 76, 191);
 border-radius: 50%;
 color: white;
}
.countdown::after {
 display: block;
 content: '';
 animation: countdown 20s forwards linear;
 animation-delay: 5s;
}

.finished {
 right: 3%;
}

.finished span {
    font-size: 22px;
    margin-top: -80px;
    display: block;
}

.options {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    height: 40vh;
    border: 10px;
    border-top: 0;
    border-style: solid;
    border-color: transparent;
    box-sizing: border-box;
}

.option {
 color: white;
 text-shadow: 0px 0px 1px black;
 font-size: 27px;
 border-radius: 3px;
 display: grid;
 padding: 1em;
}

.option span {
 align-self: center;
 justify-self: left;
}

.option:nth-child(1) {background: #e21b3c}
.option:nth-child(2) {background: #1368ce}
.option:nth-child(3) {background: #d89e00}
.option:nth-child(4) {background: #298f0d}

.option:nth-child(1):hover {background: #c01733}
.option:nth-child(2):hover {background: #1058af}
.option:nth-child(3):hover {background: #b88600}
.option:nth-child(4):hover {background: #237a0b}

iframe {
 position: fixed;
 top: -500px;
 left: -500px;
}
::selection {
 background: transparent;
}

/**/

[id*=ayf]{top:5vh;height:50px;margin-top:-25px;margin-left:5px;}

*{;











 <div class="kahoot">

 <div class="screen">

 <div class="question-big">

 <div class="header">

 <div class="title">Question 1 of 10</div>

 <div class="timer"></div>

 </div>


 <h1>Why is Austin so amazing?</h1>

 <span class="footer">Win up to <b>1,000</b> points!</span>

 </div>


 <div class="question-mini">

 <div class="header">

 <div class="title">Why is Austin so amazing?</div>

 </div>


 <div class="content">

 <span class="countdown"></span>

 <img src="https://i.postimg.cc/kCs0psXw/girltest5xatspace.png" />

 <span class="finished">0<br /><span>Answers</span></span>

 </div>


 <div class="options">

 <div class="option"><span>That's just the way it is</span></div>
 <div class="option"><span>That's just the way it is</span></div>
 <div class="option"><span>That's just the way it is</span></div>
 <div class="option"><span>That's just the way it is</span></div>

 </div>

 </div>


 <div class="results">

 <div class="container">

 <h1>Incorrect</h1>

 <div class="img"></div>

 <span class="msg">You meant the other one, right?!</span>

 <span class="place">You're in <b>1st place</b></span>

 </div>

 </div>

 </div>

 </div>


 [youtube:350:197:8YGlzSl6cxU:autoplay=1&playlist=8YGlzSl6cxU&loop=1&showinfo=0&rel=0&modestbranding=1]