User:RCSDevs/quiz.css

.sidenav {   height: 100vh; width: 0; position: fixed; z-index: -100; right: 0; bottom: 0; background-color: #F6F6F6; overflow-x: hidden; transition: 0.5s; border-left: 1px solid #a7d7f9; }

.sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: black; display: block; transition: 0.3s }

margin-top: 10%; background-color: #3F9500; color: #FFFFFF; border: none; font-size: 200%; display: block; width: 10vmin; height: 10vmin; }
 * 1) checkAnswer {

margin-top: 10%; background-color:rgba(0, 0, 0, 0.0); box-sizing: border-box; border: none; font-size: 130%; color: black; width: 90%; display: inline-block; }
 * 1) madLib {

background-color: rgba(0, 0, 0, 0.0); box-sizing: border-box; border: none; font-size: 130%; border-bottom: 4px solid green; color: black; width: 80%; }
 * 1) qAnswer {

outline: 0; }
 * 1) qAnswer:focus {

color: black; text-align: center; font-size: 250%; padding-top: 6%; }
 * 1) counter {

.sidenav a:hover, .offcanvas a:focus{ color: orange; }

.closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px; }

.container {	position: relative; top: 50%; transform: translateY(-50%); }

.flashMe {	animation: flash .6s forwards linear normal; }

{	font-size: 40%; padding: 2%; }
 * 1) right, #wrong

@keyframes flash { 0% { background: #ffee05; } 100% { background:white; } }

@media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} }