body { background-color: rgb(226, 238, 159); } #container { margin: auto; width: 600px; } #myCanvas { background-color: #000000; border: 3px red solid; } .accept{ font-size: 20px; height: 50px; width: 50px; } #add_question { position : absolute; top: 100px; left: 1500px; } #popup { background-color: rgba(0,0,0,.25); bottom: 0; display: none; justify-content: center; align-items: center; left: 0; position: fixed; top: 0; width: 100%; } input[type="text"] { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; background: #fff; margin-bottom: 4%; margin-top: 4%; border: 1px solid #ccc; padding: 3%; color: #555; font: 95% Arial, Helvetica, sans-serif; } input[type="text"] { box-shadow: 0 0 5px #43D1AF; padding: 3%; border: 1px solid #43D1AF; } #form-popup { position: absolute; justify-content: center; align-items: center; display: flex; top: 20%; left: 32.5%; background-color: rgb(255,255,255); border-radius: 10px; padding: 0; width: 700px; height: 700px; flex-direction: column; font-family: Arial; } #popup_question { position : absolute; top: 150px; left: 1500px; font-size: 20px; text-align: center; color: rgb(100, 219, 223); display: none; } #continue_game{ display: none; } #correct{ display: none; color: #10c878; } #incorrect{ display: none; color: #c91616; } #restart{ display: none; -moz-box-shadow: 0px 10px 14px -7px #276873; -webkit-box-shadow: 0px 10px 14px -7px #276873; box-shadow: 0px 10px 14px -7px #276873; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99)); background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%); background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0); background-color:#599bb3; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; font-weight:bold; padding:13px 32px; text-decoration:none; text-shadow:0px 1px 0px #3d768a } #restart_game, #add_question, #clear_local_storage, #send_question{ display: inline; -moz-box-shadow: 0px 10px 14px -7px #276873; -webkit-box-shadow: 0px 10px 14px -7px #276873; box-shadow: 0px 10px 14px -7px #276873; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99)); background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%); background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0); background-color:#599bb3; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; font-weight:bold; padding:13px 32px; margin-bottom: 8%; text-decoration:none; text-shadow:0px 1px 0px #3d768a } #restart:hover, #restart_game:hover, #clear_local_storage:hover, #send_question:hover, #add_question:hover{ background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3)); background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%); background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0); background-color:#408c99; } #restart:active, #restart_game:active, #clear_local_storage:active, #send_question:active{ position:relative; top:1px; } #score { width: 600px; height: 100px; margin: auto; background-color: grey; font-size: 25px; } #current, #highest, #session, #question_couter, #lifes { font-size : 25px; color: black; text-align: center; } a { text-decoration: none; color : #FFFFFF; } .popup-item{ text-align: center; } #try_again{ display: none; -moz-box-shadow: 0px 10px 14px -7px #276873; -webkit-box-shadow: 0px 10px 14px -7px #276873; box-shadow: 0px 10px 14px -7px #276873; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99)); background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%); background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%); background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0); background-color:#599bb3; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; font-weight:bold; padding:13px 32px; text-decoration:none; text-shadow:0px 1px 0px #3d768a } #try_again:hover{ background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3)); background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%); background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%); background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0); background-color:#408c99; } #try_again:active{ position:relative; top:1px; }