* Basic Selectors */
body{
	
	}
h1{
	color: tomato;
	text-shadow: 0 0 5px #FF0000, 0 0 5px #0000FF;
	
}
h2{
	color: brown;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h3{
	color: white;
}
p{
	color: darkMagenta;
}
a{
	color: ivory;
}
/* List Selectors */
ul{
	color: dimGray;
}
ol{
	color: darkSeaGreen;
}
li{
	color: darkOrchid;
}
dl{
	color: darkSalmon;
}
dt{
	color: cornsilk;
}
dd{
	color: darkMagenta;
}
/*  Table Selectors */
table{
	color: crimson;
	  border: 6px solid darkblue;
} 
th{
	color: aquamarine;	
	  border: 3px solid darkblue;
}
td{
	color: beige;
	 border: 3px solid darkblue;
}
caption{
	color: darkKhaki;
}
body{ 
background-color: darkSlateGRay;
}
.other {
  background-color: lightgrey;
  width:30px;
  border: 15px solid blue;
 
   margin-top: 30px;
  margin-bottom: 30px;
  margin-right: 30px;
  margin-left: 30px;
 
 
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}
.dotted {border-style: dotted;
color:orange;}
.double {border-style: double;color:orange;}
.ex5 {
  outline: thick solid darkCyan;
  border-radius: 20px;
}

.game {
  background-color: orange
}
.label {
	background-color: brown
	
	}
.className {
color:blue;
font-weight:bold;
font-size:200%;
}
.className1 {
color:darkBlue;
font-weight:bold;
font-size:200%;
}
.className2 {
color:lightBlue;
font-weight:bold;
font-size:200%;
}
.className3 {
color:aqua;
font-weight:bold;
font-size:200%;
}
.className4 {
color:cadetBlue;
font-weight:bold;
font-size:200%;
}
.className5 {
color:cyan;
font-weight:bold;
font-size:200%;
}
.fun-fact {
  background-color: yellow;
  color: brown;
} 
.vocab{
  background-color: yellow;
  color: brown;
} 

.coco {
	width:15px;
	height:40px;
	background: purple;
	transition: width 2s;
}


.coco:hover { 
		width:150px;
	}
	
.rat{
	width: 100px;
	height: 50px;
	background-color: white;
	transition: width 1s, height 2s,background-color 3s, transfrom 4s;
	
}
.rat:hover {
	width: 250px;
	height:90px;
	background-color: pink;
	transform: rotate(200deg);
}
.GTA{
	width:100px;
	height:100px;
	background-color: yellow;
	position: relative;
	animation-name: GTA;
	animation-duration:4s;
}
@keyframes GTA {
	0% {background-color: purple; left:0px; top:0px;}
	25% {background-color:blue; left:150px; top:0px;}
	50% {background-color: green; left:150px; top:150px;}
	75% {background-color: yellow; left:0px; top:150px;}
	100% {background-color: red; left:0px; top:0px;}
}
.mime{
	width:50px;
	height:50px;
	background:red;
	position:relative;
	animation-name:MM;
	animation-duration:3.5s;
	animation-fill-mode:forwards;
}
@keyframes MM{
	from{top:0px;}
	to{top: 200px; background-color: purple;}
}
.rblx{
	width:80px;
	height:80px;
	background-color:blue;
	animation-name:RB;
	animation-duration: 4s;
}
@keyframes RB{
	from{background-color:blue;}
	to{background-color:orange;}
}
.prat{
	width:40px;
	height:50px;
	background-color:green;
	position;relative;
	animation-name:PT;
	animation-duration:7s;
	animation-iteration-count: infinite;
}
@keyframes PT{
	0%{background-color:black; left:0px; top:0px;}
	14%{background-color:gray; left:200px; top: 0px;}
	28%{background-color:white; left:200px; top:0px;}
	42%{background-color:yellow; left:0px; top:200px;}
	56%{background-color:orange; left:0px; top:0px;}
	70%{background-color:red; left:0px; top:0px;}
	84%{background-color:pink; left:200px; top:0px;}
	100%{background-color:purple; left:200px; top:0px;}
}
#behind {
	height:200px;
	background-color:pink;
	background-image: linear-gradient(to bottom right, yellow, green);
}
#rain {
	height: 200px;
	background-color: red;
	background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple, violet, pink);
}
#hob {
	height:100px;
	background-color;blue;
	background-image:repeating-linear-gradient(50deg,blue,yellow 7%,pink 10%);
}
#circ {
	height:150px;
	width:200px;
	background-color: green;
	background-image: radial-gradient(circle, green, indigo, orange);
}