/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}




body {
	background:#C3B485;
	
}


#container {
	width:1000px;
	height:800px;
	border:1px solid black;
	margin:auto;
	position:relative;
}

div#fitzy {
	background:#c8cccc;
	width:500px;
	height:500px;
	position:absolute;
	bottom:-200px;
	right:-100px;
	transition: all 2s;
}

#fitzy:hover {
	background: orange;
	border-radius: 50%;
	width:750px;
	height:750px;
	opacity:0.4;
}

#txt {
	background: black;
	color: white;
	font-size: 1.6em;
	width:400px;
	height:250px;
	transition:all 1.2s;
}

#txt:hover {
	transform:scale(2) rotate(3780deg);
}

  #lock {
    font-size: 8px;
    position: relative;
    width: 18em;
    height: 13em;
    border-radius: 2em;
    top: 10em;
	right: -25em;
    box-sizing: border-box;
    border: 3.5em solid purple;
    border-right-width: 7.5em;
    border-left-width: 7.5em;
    margin: 0 0 6rem 0;
	transition:all 1.2s;
  }
  #lock:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 2.5em solid purple;
    width: 14em;
    height: 12em;
    left: 50%;
    margin-left: -7em;
    top: -12em;
    border-top-left-radius: 7em;
    border-top-right-radius: 7em;
	transition:all 1.2s;
  }
 #lock:hover {
    border: 3.5em solid blue;
	border-right-width: 7.5em;
    border-left-width: 7.5em;
} 
 #lock:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    border: 1em solid purple;
    width: 5em;
    height: 8em;
    border-radius: 2.5em;
    left: 50%;
    top: -1em;
    margin-left: -2.5em;
transition:all 1.2s;
  }
#lock:hover:after {
   border: 1em solid blue;
  }
#lock:hover:before {
   border: 2.5em solid blue;
	transform:rotate(90deg);
	top: -3em;
	width: 13em;
  }

#growb {
	background:#c8caac;
	width:200px;
	height:50px;
	position:absolute;
	bottom:400px;
	right:100px;
	transition: all 1.5s;
}

#growb:hover {
	background:red;
	width:500px;
}

#cone {
	 width: 0px;
      height: 0px;
      border-right: 60px solid transparent;
      border-top: 60px solid yellow;
      border-left: 60px solid yellow;
      border-bottom: 60px solid yellow;
      border-top-left-radius: 60px;
      border-top-right-radius: 60px;
      border-bottom-left-radius: 60px;
      border-bottom-right-radius: 60px;
	top:200px;
	right:100px;
	rotate:180deg;
	position:absolute;
	transition:all 1.3s;
}

#cone:hover {
	  width: 0px;
      height: 0px;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-top: 70px solid yellow;
	border-bottom: 70px solid transparent;
      border-radius: 50%;
	transform:rotate(720deg);
}

#moon {
	background:orange;
	width:100px;
	height:100px;
	position:absolute;
	bottom:500px;
	right:400px;
	border-radius: 50%;
	transition: all 1.1s;
}

#moon:hover {
	border-radius: 50%;
	background:transparent;
	transform:translate(-15px,-15px);
      box-shadow: 15px 15px 0 0 indigo;
}

#baybld {
	background: darkgreen;	 
	box-shadow: 0 0 0 1em green,
      0 1em 0 1em green,
      -2.5em 1.5em 0 .5em green,
      2.5em 1.5em 0 .5em green,
      -3em -3em 0 0 green,
      3em -3em 0 0 green,
      -2em -2em 0 0 green,
      2em -2em 0 0 green,
      -3em -1em 0 0 green, /*upper right of righ eye*/
      -2em -1em 0 0 green,
      2em -1em 0 0 green, /*above left eye*/
      3em -1em 0 0 green,
      -4em 0 0 0 green,
      -3em 0 0 0 green,
      3em 0 0 0 green,
      4em 0 0 0 green,
      -5em 1em 0 0 green,
      -4em 1em 0 0 green,
      4em 1em 0 0 green, /*left pit*/
      5em 1em 0 0 green,
      -5em 2em 0 0 green,
      5em 2em 0 0 green, /*mid left arm*/
      -5em 3em 0 0 green,
      -3em 3em 0 0 green,
      3em 3em 0 0 green,
      5em 3em 0 0 green,
      -2em 4em 0 0 green,
      -1em 4em 0 0 green,
      1em 4em 0 0 green,
      2em 4em 0 0 green,
	0 0 0 green;
      
      width: 1em;
      height: 1em;
      overflow: hidden;
      margin: 50px 0 70px 65px;
	position:absolute;
	bottom:200px;
	left: 50px;
	transition: all 1.6s;
}

#baybld:hover {
	transform:rotate(480deg) translate(20px,10px);
}

#yin {
	 width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: black;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
	/*position:absolute;*/
	bottom:-150px;
	right:-350px;
	transition: all 25s;
}

 #yin:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid black;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
	
}

 #yin:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: black;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
	
    }

#yin:hover {
	transform:rotate(10800deg) scale(2.2);
}


  #infinite {
      position: relative;
      width: 212px;
      height: 100px;
      box-sizing: content-box;
	top:150px;
	left:150px:
    }
    #infinite:before,
    #infinite:after {
      content: "";
      box-sizing: content-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border: 20px solid blue;
      border-radius: 50px 50px 0 50px;
      transform: rotate(-45deg);
	background: pink;
	transition: 1.7s;
    }
    #infinite:after {
      left: auto;
      right: 0;
      border-radius: 50px 50px 50px 0;
      transform: rotate(45deg);
	transition: 1.7s;
    }

 #infinite:hover:before, #infinite:hover:after {
	background: #5d12f1;
	border: 20px solid #5d12f1;
}

#hp {
	 position: relative;
      width: 100px;
      height: 90px;
	top: -250px;
	right: -450px;
	transition: 0.1s;
    }
    #hp:before,
    #hp:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
	transition: 0.1s;
    }
    #hp:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
	transition: 0.1s;
    }


#hp:hover {
	transform: scale(2.2);
}