@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css'); 
@import url('fontawesome/css/all.min.css');
body {
   background-color: beige;
   margin: 0.2rem;
   font-family: Cambria, Cochin, Georgia, Times, serif; }
hr {
	background-color: brown;
	font-size: 2rem;
	height: 1rem;
	border-radius: 1rem; }
a[href] {
   color: #19351e;
   text-decoration: none;
   font-size: 1.5rem; }
a[href]:hover {
   text-decoration: underline; 
   text-decoration-style: double; }
a.float {
   float: left; }
a.rechts {
   display: block; 
   text-align: right; }
button {
   font-size: 1.5rem;
   background-color: darkred;
   color: whitesmoke;
   border-radius: 0.4rem;
   padding: 0.1rem 0.4rem; }
input[type="text"],
input[type="password"] {
   font-size: 1.25rem;
   width: 7rem;
   text-indent: 0.5rem;
   border-radius: 0.2rem;
   border-color: darkred;
   padding: 0.1rem; }
label[for="spieler"], 
label[for="pass"] {
   font-size: 1.4rem; }
#alert {
   font-size: larger;
   text-align: center;
   color: red;
   background-color: blue; }
.kartei {
   font-size: 1.7rem;
   margin: -0.5rem auto;
   padding: 0.4rem 0.2rem;
   border-radius: 1rem;
   box-shadow: 0 2px #999;
   color: yellow;
   background-color: #C06;
   transition-duration: 0.05s;
   text-align: center; }
.kartei:hover {
   background-color: saddlebrown;
   color: antiquewhite; }
.kartei:checked {
   background-color: black;
   color: white; }
.geloest {
   color: white;
   background-color: #18B636;
   letter-spacing: 2px;
   text-shadow: 1px 1px 1px black, -1px -1px 1px black;
   margin: auto; }
.luecke {
   height: 2.5rem;
   margin: -2.5rem 0;
   opacity: 0.2;
   z-index: 1;
   border-radius: 0.5rem;
   width: 100%;
   color: transparent;
   background-color: purple; }
.luecke:hover, .luecke:active, luecke:focus {
   opacity: 1; }
.luecke:active {
   background-color: black; }
.erste {
   margin-top: 1rem; }
.punkte {
   display: block;
   font-size: 2rem;
   margin: 0; }
.korrekt {
   margin-left: 0.7rem;
   float: left;
   color: darkgreen; }
.falsch {
   margin-right: 0.7rem;
   text-align: right;
   color: darkred; }
meter {
   color: skyblue; 
   font-size: 2rem;
   padding: 0;
   display: block;
   position: absolute; 
   opacity: 0.8;
   margin: 0 6rem;
   width: calc(100% - 12rem); }
.gewonnen {
   text-align: center;
   color: #781173;
   background-color: skyblue; 
   border-radius: 2rem;
   padding: 1rem;
   font-size: 3rem; }
.gewonnen em {
   font-size: 2rem;
   color: black;
   font-weight: 700; }
.gewonnen em b {
   font-size: 2.5rem;
   color: brown; }
.nachspiel {
   background-color: lightgray;
   padding: 0.5rem;
   border-radius: 0.5rem;}
.punkteEintrag {
   text-align: center;
   background-color: #f2d432;
   margin-top: 1rem;
   padding: 0.5rem;
   border-radius: 0.5rem; }
.punkteEintrag div {
   margin: 0.5rem auto; }
.regeln {
   color: white;
   background-color: blueviolet;
   text-align: center;
   width: 95%;
   text-shadow: 1px 1px 1px black;
   font-size: 1.3rem;
   padding: 0.3rem;
   margin: auto;
   border-radius: 0.4rem; }

/* Input */
input[type=radio]:not(old),
input[type=checkbox]:not(old) {
   opacity: 0 }
input[type=radio]:not(old) + label,
input[type=checkbox]:not(old) + label {
   display: block; }
input[type=radio]:not(old):checked + label,
input[type=checkbox]:not(old):checked + label {
   box-shadow: 0 2px #999;
   color: white;
   background-color: black;
   transition-duration: 0.4s; }



/* Popup container */
.popup {
   position: relative;
   display: inline-block;
   cursor: pointer;
   font-size: 1.2rem; }
/* The actual popup (appears on top) */
.popup .popuptext {
   visibility: hidden;
   background-color: #555;
   color: #ccc;
   text-align: center;
   border-radius: 1rem;
   padding: 0.5rem;
   position: absolute;
   z-index: 1;
   bottom: 1rem;
   left: 2rem; }
/* Popup arrow */
.popup .popuptext::after {
   content: "";
   position: absolute;
   border-style: solid;
   border-color: #555 transparent transparent transparent; }
/* Toggle when clicking on popup container (hide and show the popup) */
.popup .show {
   visibility: visible;
   -webkit-animation: fadeIn 1s;
   animation: fadeIn 1s }
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
   from {
      opacity: 0; }
   to {
      opacity: 1; } }
@keyframes fadeIn {
   from {
      opacity: 0; }
   to {
      opacity: 1; } }