@-webkit-keyframes timebar { 0%{width: 100%;background-color: #57cc6b;} 30%{background-color: #57cc6b;} 40%{background-color: #e3a55c;} 60%{background-color: #e3a55c;} 70%{background-color: #cc5757;} 100%{width: 0;background-color: #cc5757;} } @keyframes timebar { 0%{width: 100%;background-color: #57cc6b;} 30%{background-color: #57cc6b;} 40%{background-color: #e3a55c;} 60%{background-color: #e3a55c;} 70%{background-color: #cc5757;} 100%{width: 0;background-color: #cc5757;} } #timer { height: 20px; display: block; margin: auto; } .timer { -webkit-animation: timebar 5s linear; animation: timebar 5s linear; } .pause { -webkit-animation-play-state: paused; animation-play-state: paused; } .clearTimer { -webkit-animation: none; animation: none; } #navbar li.current:last-child #score { display:inline; padding-top:17px; padding-left:30px; padding-right:30px; padding-bottom:18px; background: #ffab19; } #game input[type="submit"]#play { border:none; background-color:#09b22b; color:white; padding:20px; font-size:170%; cursor:pointer; } #game { text-align:center; } div#category { font-size:170%; font-family:'Lato'; font-weight:300; margin-top:20px; } p#question { font-size:120%; } ul#answers { padding-left:0px; } ul#answers li { display:inline-block; background: #b087ff; width:16%; padding:20px; padding-top:38px; height:42px; font-size:110%; color:white; font-weight:bold; margin-right:20px; line-height: 20px; vertical-align: middle; cursor: pointer; } ul#answers li.good-answer { background: #57cc6b; } ul#answers li.wrong-answer { background: #cc5757; } h2#score { margin-top: 100px; font-size:220%; margin-bottom:10px; } p#registerScore, p#conDenied { width: 40%; margin: auto; } p.success { padding-top: 30px; background:#57cc6b; padding-bottom: 30px; } p.error { padding-top: 30px; background:#cc5757; padding-bottom: 30px; color:white; } p#conDenied { margin-top:70px; } @media all and (max-width: 799px) { ul#answers li { display:block; margin:auto; margin-bottom:10px; width:80%; padding-top:15px; height: 20px; } .error, .success, p#registerScore, p#conDenied { width:80%; } } @media all and (min-width: 800px) { ul#answers li:last-child { margin-right:0px; } }