body, html {
  height: 100%;
  text-align: center;
}

body{
	width: 100%;
	height: 100%;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: sans-serif;
}

.body{
	width: 100%;
	height: 100%;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: sans-serif;
}
table, tr, td{
	width: 100%;
	height: 100%;
	text-align: center;
}

#td_ausw{
	width: 33%;
}

#title, #board, #stats, #controls, #score{
	border: 1px solid black;
	border-radius: 6px;
	background-color: white;
}

#center{
	width: 75%;
	margin-left: auto;
	margin-right: auto;
}

.frage{
	font-size:25px;
}

@media (orientation: landscape) {
  #grid {
    display: grid;
    grid-template-areas: "title board"
                         "stats board"
                         "score ctrls";

    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
  }
}
#title    { grid-area: title }
#score    { grid-area: score }
#stats    { grid-area: stats }
#board    { grid-area: board }
#controls { grid-area: ctrls }

.myButton {
	text-align:center;
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
	background-color:#c123de;
	width: 100%;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}
.myButton:hover {
	background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
	background-color:#a20dbd;
}
.myButton:active {
	position:relative;
	top:1px;
}

.myinput {
	text-align:center;
	box-shadow:inset 0px 1px 0px 0px #e184f3;
	width: 100%;
	border-radius:6px;
	border:1px solid #a511c0;
	display:inline-block;
	cursor:pointer;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #9b14b3;
}

.base-timer {
  position: relative;
  width: 300px;
  height: 300px;
}

.base-timer__svg {
  transform: scaleX(-1);
}

.base-timer__circle {
  fill: none;
  stroke: none;
}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: grey;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}