/* sets the attributes for our stage */
#stage {
  /* sets the position to relative of the normal document flow */
  position: relative;
  
  /*sets the background color of the stage choose your own! */
  background-color: #3ff;
  
  /* Automatically sets the margin to be equal on all sides */
  margin: auto;
  
  /* sets the width of the stage to 300px */
  width: 300px;
  
  /*sets the height of the stage to be 450 px; */
  height: 450px;
  
  /* clips any overflow making that content invisible */
  overflow: hidden;
}

/* This will set the style for the player attributes */
#player 
{
  /* sets the background-color, choose your own! */
  background-color: red;
  /* set the position to remove it from the normal document flow and position it relative to the colosest positioned ancester or relative to the initial containing block */
  position: absolute;
  /* sets the width of the player to 25px */
  width: 25px;
  /*sets the height of the player to 25px */
  height: 25px;
}

/* sets the definition of the platform class, this will determine how all of the platforms should look */
.platform{
  
  /* sets position to absolute */
  position: absolute;
  /* sets platform height to 2px */
  height: 2px;
  /* sets platform color */
  background-color: #600;
}

/* sets the ground platforms attributes, this has to be different because it will be wider than the other platforms */
#ground 
{
  top: 448px;
  left: 0px;
  width: 300px;
}

/* individual platform placement. Get creative with your placement! */
#plat1 
{
  top: 375px;
  left: 150px;
  width: 100px;
}

#plat2
{
  top: 325px;
  left: 0px;
  width: 100px;
}

#plat3 
{
  top: 275px;
  left: 200px;
  width: 100px;
}

#plat4
{
  top: 225px;
  left: 75px;
  width: 100px;
}

#plat5 
{
  top: 175px;
  left: 200px;
  width: 100px;
}

#plat6
{
  top: 125px;
  left: 0px;
  width: 100px;
}

#plat7
{
  top: 75px;
  left: 150px;
  width: 100px;
}

/* this will define the goal at the top of the stage */
#goal 
{
  /* sets the postion to absolute */
  position: absolute;
  
  /* sets the top of the goal to 25px */
  top: 25px;
  
  /* sets the left postion of the goal to 25px */
  left: 200px;
  
  /* sets the width of the goal to 25px */
  width: 25px;
  
  /* sets the height of the goal to 25px */
  height: 25px;
  
  /* changes the color of the goal to yellow */
  background-color: yellow;
  
  /* turns the goal into a circle */
  border-radius: 50%;
}