@charset "utf-8";

body {	
		background-color:black;
		}

h1 {color:blue;
	text-align: center}

h2 {color:white;
	text-align: center}

b {color:lightgreen}

table{background-color: black;
	font-size:20px;
	border-spacing: 50px;
	margin-left:auto;
	margin-right:auto;
	}

td{padding: 30px;
	background-color:black;}

.box {
  margin-right: auto;
  margin-left: auto;
  padding-top:20px;
  width: 100px;
  height: 50px;
  background: blue;
  transition-duration: 3s;
  transition-timing-function: ease;
	
}
.box:hover {
  background-color: red;
  width: 200px;
}
div{
	text-align: center;
	
}

a{
	color:white;
}

.Animation{
	width: 100px;
    height: 100px;
	margin-right: auto;
    margin-left: auto;
	background-color:red;
	position: relative;
	animation-name: quadrat;
    animation-duration: 4s;
	animation-iteration-count: infinite;
}


.Animationdelay2{
	width: 100px;
    height: 100px;
	margin-right: auto;
    margin-left: auto;
	background-color:red;
	position: relative;
	animation-name: quadrat;
    animation-duration: 4s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
}

@keyframes quadrat{
	0%{background-color:green; left:100px; top:0px;}
	25%{background-color:red;left:100px; top:200px; transform:rotate(90deg);}
	50%{background-color:green;left:-100px; top:200px; transform:rotate(180deg);}
	75%{background-color:red;left:-100px; top:0px; transform:rotate(270deg);}
	100%{background-color:green; left:100px; top:0px; transform:rotate(360deg);}
}