@charset "utf-8";
/* CSS Document */

@font-face {
  font-family: 'exercise-text';
  src: url('../../../../fonts/Blinker.woff');
  font-display: swap;
}
html {
 height:100%;
}
body {
  text-decoration:none;
  font-family: 'exercise-text';
  margin-left:0; margin-right:0;
  margin-top:6pt; margin-bottom:6pt;
  }

.foto {
	width:15rem!important;
}
.foto-left {
	padding: 3px 6px 3px 0px;
	float:left;
}
.foto-right {
	padding: 3px 0px 3px 6px;
	float:right;
}
.highlighted {
	display:inline;
	background-color:darkorange; color:white;
	padding:0px 4px;
	border-radius:8px 0px 0px 8px; border:solid 2px darkorange;
}
.highlighted:hover {
	background-color:white; color:darkorange;
	font-weight: 500;
	cursor: pointer;
}
span {
	display:inline;
}
span .span-block {
	display:block!important;
}
.toggled {
	display:none; width: auto; position:relative;
  background-color:#FFDBAE;; color:black;
	font-weight:normal;
  margin: 0px 4px 0px 0px; padding: 0px 25px 0px 10px;
	border-radius:0px 8px 8px 0px; border:solid 2px darkorange;
	-webkit-animation: fadeIn 2.5s;
  animation: fadeIn 2.5s;
}
.toggled-img {
	display:inline;
	width:3rem; vertical-align: baseline;
	border:solid 1px white; background-color: white;
	transform-origin: top left;
	transform: scale(1);
	transition: 1.5s ease-in-out;
}
.toggled-img:hover {
	transform-origin: top left; transform: scale(7);
	position: relative; z-index: 100;
	border:solid 1px white; background-color: white;
	-webkit-box-shadow: 1px 1px 1px 0px black;
  -moz-box-shadow: 1px 1px 1px 0px black;
  box-shadow: 1px 1px 1px 0px black;
}


@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}



p {
  font-size:16pt!important;
  }
input {
	font-size: 100%; text-align:center;
	padding: 3px; margin:0px 3px;
	border:1px solid gray; border-radius: 5px;
	color:black!important; background-color: floralwhite;
}
input:focus {
	outline: none; border-radius: 5px;
	padding: 5px;
	border:1px solid gray; border-radius: 5px;
	box-shadow: -1px -1px 5px #888;
	text-align:center;
}
hr {
	background-color:tomato;
}
.wortliste {
  font-size:12pt;
  }

.uebung {
  font-size:16pt;
  line-height:200%;
}

.eingabe {
  font-size:15pt;
  width:100px;
  }

.eingabe2 {
  font-size:15pt;
  width:30px;
  }

.eingabe103 {
  font-size:15pt;
  width:70px;
  }

.oneword {
   white-space: nowrap;
  }
.buttonRow {
	display: flex; flex-direction:row; flex-wrap:wrap;
	align-content: center; justify-content: center; align-items: center; justify-items: center;
}
.button {
  display: block; min-width: 145px; height:2em;
	border: solid 2px lightseagreen; border-radius: 0.5em;
	margin:5px; padding: 3px 6px;
	color: black; background-color: white;
	cursor: pointer;
	font-size: 13pt; font-family: 'exercise-text';
	-moz-box-shadow: 4px 4px 0px 0px teal;
  -webkit-box-shadow: 4px 4px 0px 0px teal;
  box-shadow: 4px 4px 0px 0px teal;
}
.button:active {
	box-shadow: none;
}
.button:hover {
	color: white!important; background-color: teal;
	border: solid 2px floralwhite;
}

h1 {
  font-size:18pt;
  text-align:center;
  backcolor:#ff9900;
  border: double medium #ff6600;
  }
a {
	text-decoration:none;
	color: white;
	background-color: darkgray;
	border-radius:8px;
	padding: 0px 5px;
	border:thin solid darkgray;
}
a:hover {
	color: darkgray;
	background-color: white;
	border:thin solid darkgray;
}


@media screen and (max-width : 650px ){
.foto {
	width:50%!important;
}
.foto-left {
	padding: 3px;
	margin: 0px auto 0px auto!important;
	float:none;
	display:block;
}
.foto-right {
	padding: 3px;
	margin: 0px auto 0px auto!important;
	float:none;
	display:block;
}
}


@media screen and (max-width : 550px ){
h1 {
  font-size:15pt;
  }
p {
  font-size:15pt!important;
  }
.wortliste {
  font-size:13pt;
  }
.uebung {
  font-size:15pt;
  line-height:200%;
}

}

@media screen and (max-width : 365px ){
h1 {
  font-size:14pt;
  }
p {
  font-size:14pt!important;
  }
.wortliste {
  font-size:13pt;
  }

.uebung {
  font-size:14pt;
  line-height:200%;
}
}