/* aufgabe5.css */

body {
    font-family: sans-serif;
    word-wrap: break-word;
}

#fragen {
    margin-top: 10px;
    padding-left: 20px;
    border-style: solid;
    border-color: black;
}
/* Aussehen des Elektrons */

.elektron p {
	margin: 1px 80%; /*Startposition des Elektrons*/
    background: #FF0000;; /*Farbe des Elektrons*/
	border: 3px solid #333;
	border-radius: 100% / 100%;
	padding: 0.5em;  /*Größe des Elektrons*/
	position: relative;
	text-align: center;
    font-size: 20px;
    color: cornsilk;
	width: 1.2em; /*Breite des Elektrons*/
}

/*.elektron .ease {
	background: #c32e04;
}*/

elektron .linear {
	background: #c32e04;
}

/*.elektron .ease-in {
	background: #c32e04;
}*/

/*.elektron .ease-out {
	background: #c32e04;
}

.elektron .ease-in-out {
	background: #c32e04;
}*/

main {
    overflow: hidden;
}

/*#start:target .elektron p.ease {
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
}
#start:target .elektron p.linear {
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;*/
}

#start:target .elektron p.ease-in {
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}

/*#start:target .elektron p.ease-out {
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

#start:target .elektron p.ease-in-out {
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}*/

@keyframes rennen {
	0% {
		transform: translate(0px);
	}
	100% {
		transform: translate(-1500px);
	}
}

#start:target .elektron p {
	-webkit-animation: rennen 2s;
	animation: rennen 2s;
	/*animation-direction: alternate;*/
    animation-iteration-count:1;
	/*animation-delay: 1s;*/
	animation-fill-mode: forwards;
}
/* Steuerungslinks */

/*a[href="#start"],
a[href="#reset"] {
	padding: 10px 10px;
	background: lightgrey;
	border-radius: 1em;
	text-decoration: none;
}*/

a[href="#start"],
a[href="#reset"] {
   font-size: 0.9em; padding: 5px 12px; 
   font-family: Roboto, sans-serif;
   font-weight: 300;
   color: teal;
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 10px;
}
/* Hover-Zustand der Steuerungslinks */

a[href="#start"]:hover,
a[href="#reset"]:hover {
	background: mistyrose;
	color: red;
}

@media all and (max-width: 800px) {
  @keyframes rennen {
	0% {
		transform: translate(0px);
	}
	100% {
		transform: translate(-800px);
	}
  }
  .elektron p {
	margin: 30px 80%;
    background: #FF0000;
	border: 3px solid #333;
	border-radius: 100% / 100%;
	padding: 0.6em;
	position: relative;
	text-align: center;
    font-size: 20px;
    color: cornsilk;
	width: 1.2em;
}
  #start:target .elektron p {
	-webkit-animation: rennen 2s;
	animation: rennen 2s;
    animation-iteration-count:1;
	/*animation-delay: 1s;*/
	animation-fill-mode: forwards;
	/*animation-direction: alternate;*/
  }
}