body {
    margin: 0;
    background: url("math-background3.jpg") no-repeat center center fixed;
    background-size: cover;
    /*background-color: #2798C1;*/
}

h1,h2,h3,h4,h5 {
    font-family: 'Gugi', sans-serif;
    text-shadow: 1px 1px black;
    font-weight: 100;   
}

#main_container {
    background-color: rgba(255,255,255, 0.9);
    height: 100vh;
    text-align: center;
}

.fas {
    text-shadow: 1px 1px black;
}

.display_none {
    display: none;
}

.btn-success {
    background-image: linear-gradient(#2798C1, #2798C5 60%, #2798C1);
    border-color: #2798C1;
}

.btn-danger {
    background-image: linear-gradient(#B41344, #B41354 60%, #B41344);
    border-color: #B41344;
}

#logo {
    position: absolute;
    top: 0;
    left: 0;
    margin: 10px;
}

.timer_and_cancel{
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 15px;
    font-family: 'Gugi', sans-serif;
    text-shadow: 1px 1px black;
    font-weight: 100;   
    color:orange;
    font-size: 65px;
}

.timer_and_cancel #timer {
    font-size: 25px;
    padding-right: 10px;
}

.main_content {
    padding-top: 130px;
}

.choose_game_buttons button {
    display: inline-block;
    margin: 5px auto;
    min-width: 160px;
    padding: 5px;
}
.choose_game_buttons button h5,
.choose_level_buttons button h5{
    color: white;
    font-weight: 100;
}

.current_score {
    color: orange;
}

#firstNum,
#secondNum,
#answer_box{
    background-color: rgba(255,255,255, 0.8);
    padding: 10px;
    border: 2px #2798C1 solid;
    border-radius: 20%;
    color: orange;
    text-shadow: 1px 1px black;
}



#firstNum {
    /*background-color: red;*/
}

#answer_box {
    height: 100px;
    width: 100px;
    margin-top: -30px;
    position: relative;
    top: 43px;
    font-family: 'Gugi', sans-serif;
    text-shadow: 1px 1px black;
    font-weight: 100;  
    padding: 20px;
    border: 3px #B41344 solid;
    
    
}

#myForm {
    /*width: 40px;*/
    height: 100%;
    /*position: absolute;*/
    /*top: 5px;*/
}


.questionTime h1,
.questionTime > div{
    display: inline-block;
    min-width: 80px
}

#symbol {
    color: #2798C1;
    width: 50px;
    text-shadow: 1px 1px black;
}

#pause_symbol {
    color: #2798C1;
    margin: 10px;
    display: block;
}

.hide {
    display: none;
}

#wrong,
#right{
    position: absolute;
    z-index: 30000;
}

#wrong {
    bottom: 20px;
}

#right {
    bottom: 30px;
}

#choose_options h2,
#choose_options h3,
#end_game h2,
#end_game h3{
    color: orange;
}

#choose_options h4 {
    color: #B41344;
}

#end_game h4 {
    color: #B41344;
}

#choose_options,
#end_game{
    text-align: center;
}

.display_choose_options,
.end_game_options{
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    z-index: 4000;
    border: 10px solid #B41344;
    border-radius: 10px;
    padding: 10px;
    height: 100%;
}

.display_choose_options img,
.end_game_options img{
    width: 30%;
}

.display_choose_options h2,
.end_game_options h2{
    font-size: 20px;
}

.display_choose_options h3,
.end_game_options h3{
    font-size: 15px;
}

.fa-pause {
    transform: rotate(90deg);
}

.form-control {
    border-width: 0px;
    height: 100%;
    width: 100%;
    color: orange;
    font-size: 26px;
    text-shadow: 1px 1px black;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.form-control:focus {
    border:none;
    box-shadow: none;
    
}

.form_in_answer_box {
    height: 100%;
    width: 100%;
}

#wrong {
    filter: grayscale(100%);
}



.box {
    display: inline-block;
    margin: 0 5px;
}

@media screen and (min-width:768px) {

#logo {
    position: static;
    width: 200px;
}

.timer_and_cancel{
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0 15px;
    font-family: 'Gugi', sans-serif;
    text-shadow: 1px 1px black;
    font-weight: 100;   
    color:orange;
    font-size: 65px;
}

.timer_and_cancel #timer {
    font-size: 36px;
    padding-right: 10px;
}

.main_content {
    padding-top: 10px;
}

#main_container {
    height: 100vh;
    width: 100vw;
}

.choose_game_buttons button {
    min-width: 180px;
    padding: 15px;
}

.display_choose_options h2,
.end_game_options h2{
    font-size: 30px;
}

.display_choose_options h3,
.end_game_options h3{
    font-size: 25px;
}

.box {
    margin: 5px 30px;
}

#firstNum,
#secondNum,
#answer_box{
    padding: 40px;
}

.questionTime h1,
.questionTime > div{
    min-width: 127px
}

#pause_symbol {
    display: inline-block;
}

.form-control {
    font-size: 46px;
}

#answer_box {
    height: 127px;
    width: 127px;
    padding: 20px;
}
}