body {
	font-family: sans-serif;
	font-size: 100%;
	text-align: center;
    background-color: white !important;
}

#content {
    width:800px;
    height:550px;
}

.pagearea {
    position:absolute;
    left:20px;
    top:30px;
    right:30px;
    bottom:20px;
    
    border-radius: 51px;
    background-color: rgb(121, 66, 172);
    color:white;
}

.game {
  width:800px;
  height:550px;

    position: absolute;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: all 500ms ease-in-out !important;
  transition: all 500ms ease-in-out !important;
}


@media print {
    
    div.tables-grid td, .wrong {
        background-color: white;
        -webkit-print-color-adjust: exact;
    }
    
    div#frontcover {
        display:none;
    }
    
    div#rightpanel {
        display:none;
    }
        
    div#exit {
        display:none;
    }
    
    div.slidecontainer, div#vslider {
        display:none;
    }
        
    div#footer {
        display:none;
    }
    
    div.tables-grid {
        margin: 0 auto;
        text-align: -webkit-center;
        float:none;
    }
    
    div#content {
        width:500px;
        margin-left:75px;
    }
    

}


label {
    display: flex;
}

label span {
    padding: 1px 5px;

}

h4 {
    margin-bottom: 3px;
}


#exit {
    z-index: 1;
    left: 25px;
    top: 25px;
    position: absolute;
}

#exit img {
    height: 35px;
}

#frontcover {
    z-index: 1;
    width: 780px;
    height: 326px;
    position: absolute;
    margin: 8px 0 0 10px;
    background: rgba(255,255,255,1);
    color:black;
}


#start button {
    width:150px;
    height:80px;
    font-size:40px;
    border:solid 5px white;
    border-radius: 10px;
    background: green;
    color: white;
}

h2 {
    margin-top: 0.2em;
	font-size: 42px;
    color: white;
}

h3 {
    font-size: 1.8em;
    color: white;
    margin-bottom: 40px;
}

ol {
    text-align: left;
    margin: 15px 0px 15px 210px;
}

/* Sliders */

.slidecontainer {
    width:406px;
    color: white;
    font-size: 16px;
}

#myRange [type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0px;
  border-radius: 50%;
  background: #f0932b;
  border: #f9ca24 5px solid; cursor: pointer;
  -webkit-transition: background .15s ease-in-out;
  transition: background .15s ease-in-out;
}

/* Table */

.tables-grid {
    float: left;
    margin-left: 10px;
}

.tables-grid table {
	border-collapse: collapse;
    margin: 8px 0px 18px 0px;
}

div.tables-grid th {
	font-weight: bold;
	background-color: #00308f;
	color: #fff;
}

div.tables-grid th, div.tables-grid td {
	border: 1px solid black;
    width: 65px;
    height: 65px;
    font-size: 2.3em;
    line-height: 0.9em;
    text-align: center;
}

.data {
    background-color: #eee;
}



/* Colouring of Cells */

.correct{
    background-color: #ccffcc;
}

.wrong {
    background-color: #ffcccc;
}

.current{
    background-color: #ccccff;
}

/* Area for number pad, question and answer */

#rightpanel {
    float: right;
    margin: -3px 10px 0px 30px;
    width: 290px;    
    
}


#Question {
    visibility: hidden;
    width:260px;
    margin: 0px auto;
    font-size: 2.3em;
    border: solid 3px black;
    border-radius: 19px;
    background: aquamarine;
    float:right;
}

#Answers {
    margin: 8px 0px 20px 0px;
    height: 286px;
    float:right;
}





/* Other elements */


.row {
    clear:  both;
}

.button {
    float:left;
    width: 50px;
    height: 50px;
    font-size: 44px;
    margin: 10px 5px;
    background-color:navy;
    color:white;
}


.container {
    color: black;
}

#Timer {
    margin: 10px 0px;
    clear: both;
    color:white;
    font-weight:800;
    font-size: 20px;
}

#footer input, #reset input {
    top: 17px;
    right: 5px;
    position: absolute;
    
	border: solid 4px white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: bold;
}

#copyright {
    position:absolute;
    font-size: 10px;
    bottom:5px;
    right: 10px;
    color:white;
}




@media (orientation: portrait) {

    
    body {
        background: white;
    
    }    
    
    .pagearea {
        background-color: white;
        color: black;
    }
}