#Sun {width: 30%; /*% means percentage of the screen. The image changes based on the size of the screen*/
  position: absolute;
  top: 185px;
  left: 70%;} /*Ignores the normal flow of elements and places the top left corner of the image 185 pixels from the top and 70% of the width of the screen from the left. Since the width of the image is 30% of the screen, the image is placed on the right side of the webpage*/
body {font-size: 25px;
	background-image: url("https://tse4.mm.bing.net/th/id/OIP.bcs50UiDuSsXzVukpfwvvQHaEK?rs=1&pid=ImgDetMain&o=7&rm=3");
  background-size:100%;
  color: white;} /*Sets the default font size, background image, and color of the text*/
.head1 {font-size: 100px;
  text-indent: 20%; 
  margin: 0em;
  white-space: nowrap;} /*Sets the text to begin display 20% of the screen width from the left of the page, removes any margins, and sets the text to not wrap if it goes off the screen*/
.subhead1 {font-size: 50px;
  text-indent: 15%; 
  margin: 0em;}
.subhead2 {font-size: 50px;
  text-indent: 35%;}
.navigation {width: 200px;
  position: absolute;
  top: 185px;
  background-color: maroon;
  color: gold;} /*Sets the background color for the entire element to maroon and the bullet points to gold. The a elements used for links have their own color defaults that need to be changed differently*/
.info {margin: 1em 250px; 
  width: 50%;} /*Sets the width of all the info paragraphs to half of the screen width*/
.navigation a:link {color: gold;}
.navigation a:visited {color: gold;}
.subhead2 a:link {color: white;}
.subhead2 a:visited {color: white;} /*Sets the link elements to the colors of their parent elements before and after being clicked. Hover and active click effects default to no change.