/* The next sets of id selectors will be to set our colors for our rainbow colors */
#red-box
{
  background: red;
}

#orange-box
{
  background: orange;
}

#yellow-box
{
  background: yellow;
}

#green-box
{
  background: green;
}

#blue-box
{
  background: blue;
}

#violet-box
{
  background: violet;
}

/* This next segment will give sytle rules to the div elements, this will give our dive containers shape and size! As we are going for the same shape/size across we will only have to set these rules once unlike the previous rules we made to change the ID background values to their specified color */

div 
{
  /* This will give our boxes a height of 100px */
  height: 100px;
  /* this will give our boxes a width of 100px */
  width: 100px;
  /* this will round our corners by 50%, creating a circles instead of squares */
  border-radius: 50%;
  /* This horizontally centers the box element, the will split the remaining space equally between left and right margins */
  margin: auto;
  /* this will create a 10px margin between all of the div boxes */
  margin-bottom: 10px;
}