body {
	margin: 0px;
}

h1 {
	font-family: Georgia, fantasy;
	font-size: 3em;
	border-bottom: 2px solid pink;
	border-right: 2px solid pink;
	width: 300px;
	text-align: center;
	-moz-box-box-shadow: 4px 4px 5px #888888;
	-ms-box-box-shadow: 4px 4px 5px #888888;
	-webkit-box-box-shadow: 4px 4px 5px #888888;
	-o-box-box-shadow: 4px 4px 5px #888888;
	box-shadow: 4px 4px 5px #888888;
	margin: 0px;
	margin-top: 10px;
    -webkit-animation-name: h1-to-white; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: h1-to-white;
    animation-duration: 12s;
    background-color: white;
}

li {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	display: inline-block;
}

img {
	width: 450px;
	height: 300px;
	margin: 10px;
	transition: all 0.5s;
}

img:hover {
	transform: scale(1.4);
}

div.portfolio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    -webkit-animation-name: backg-to-green; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: backg-to-green;
    animation-duration: 12s;
    background-color: green;
}

@keyframes backg-to-green {
    from {background-color: white;}
    to {background-color: green;}
}

@keyframes h1-to-white {
    from {background-color: green;}
    to {background-color: white;}
}

.leaf1 {
  border-radius: 5px 50%;
  height: 100px;
  margin: 0px auto;
  transform-origin: right bottom;
  transition: transform 3s;
  width: 100px;
  background: yellow;
}

.leaf2 {
  border-radius: 5px 50%;
  height: 100px;
  margin: 0px auto;
  transform-origin: top left;
  transition: transform 3s;
  width: 100px;
  background: red;
}

.leaf3 {
  border-radius: 5px 50%;
  height: 100px;
  margin: 0px auto;
  transform-origin: top right;
  transition: transform 3s;
  width: 100px;
  background: brown;
}

.leaf0 {
  border-radius: 5px 50%;
  height: 100px;
  margin: 0px auto;
  transform-origin: bottom left;
  transition: transform 3s;
  width: 100px;
  background: blue;
	}

.leaf1:hover {
    transform: rotate(-10000deg);
	}

.leaf2:hover {
    transform: rotate(10000deg);
	}

.leaf0:hover {
    transform: rotate(2000deg);
	}


.leaf3:hover {
    transform: rotate(500deg);
	}

.myleafs {
	background: lightgreen;
	display: flex;
	flex-flow: center wrap;
	align-content: center;
/*	flex-wrap: wrap;*/
/*	justify-content: center;*/
}

.mycircles {
	display: flex;
	background: lightgray;
/*	flex-flow: column-reverse flex-wrap;*/
	justify-content: center;
}

/*.mycircles:hover {
	transform: translateX(200px);
}
*/
.circle0 {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 10px;
	background: brown;
	transition: all 5s linear;
}

.circle1 {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 10px;
	background: salmon;
	transition: all 5s ease;
}

.circle2 {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 10px;
	background: lightskyblue;
	transition: all 5s ease-in;
}

.circle3 {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 10px;
	background: khaki;
	transition: all 5s ease-out;
}

.circle4 {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 10px;
	background: mediumturquoise;
	transition: all 5s ease-in-out;
}

.circle5 {
	border-radius: 50%;
	height: 30px;
	width: 30px;
	margin: 10px;
	background: thistle;
	transition: all 5s cubic-bezier(0,1,.98,0); 
}


.circle0:hover {
	transform: translateX(200px);
}

.circle1:hover {
	transform: translateX(-200px);
}
.circle2:hover {
	transform: translateX(200px);
}

.circle3:hover {
	transform: translateX(200px);
}

.circle4:hover {
	transform: translateX(-200px);
	}

.circle5:hover {
	transform: translateX(200px);
}