/*Selektor{
	Attribut: Wert;
	Attribut2: wert;
}*/

html{
	font-family: Comic Sans MS,sans-serif;
	width: 70%;
	height: 70%;
	margin: auto auto;
}

h1{
	font-size: 30pt;
	color: black;
	text-decoration: underline;
	text-align: center;
}

body{
	background: rgba(200,240,255,255);
}

button{
    background: white;
    font-family: Comic Sans MS,sans-serif;
    border-radius: 3px;

    border: solid 1px gray;
    padding: 5px;
    margin: 5px;
 	/*transition: ease-in-out all 900ms;*/
}

input{
    background: white;
    font-family: Comic Sans MS,sans-serif;
    border-radius: 3px;

    border: solid 1px gray;
    padding: 1px;
    margin: 2px;
 	/*transition: ease-in-out all 900ms;*/
}

input:focus{
    border: solid 2px rgb(100,100,200);
}

button:hover:enabled{
 	transform: translate(0px,2px);
 	background: rgba(240,240,250,255);
 	border: solid 2px rgb(100,100,200);
}

.Karte{
    all: unset;
	background: white;
	font-family: Comic Sans MS,sans-serif;
	border-radius: 5px;
	
	border: solid 0px black;
	padding: 5px;
	margin: 5px;
	box-shadow: 6px 6px 10px -2px rgba(0,0,0,100);
	
	/*transition: ease-in-out all 900ms;*/
}

.Karte:hover:enabled{
    background: white;
    border: solid 0px;
	transform: translate(0px,-5px);
	/*transform: rotateY(180deg);*/
	box-shadow: 10px 10px 15px -4px rgba(0,0,0,50);
}

.rotated{
	transition: ease-in-out all 900ms;
	transform: rotateY(180deg);
}

/*Loader*/
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 26px solid #d3d3f3;
  border-radius: 50%;
  border-top: 20px solid #FF00FF;//3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation: spin 1s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}