@charset "UTF-8";
/* CSS Document */

*{ /* affects all elements of the whole page */
	/*get rid of default padding and various other elements*/
	padding: 0;
	margin: 0;

}

html{ /* does the whole page */
	
}
/*body of page, main background*/
body {
  	background-color: rgba(44,44,44,1.00); /*rgba(43, 32, 70, .95);*/

}
/* the div that everything is built. Everything pictured here resides within this tag*/
div.wrapper{
	position: relative;
	border: 0px solid black;
}

/* moon 
	the moon and it's position, color, and size. I picked a full moon*/
div.moon{
	position: absolute;
	top:20px;
	left: 40px;
	
	width: 75px;
	height: 75px;
	background: rgba(99, 106, 140, 1);
	border-radius: 50%;
}

/* stars */
/*Star number one required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s11{
	top: 5px;
	left: 120px;
	 margin: 50px 0;
     position: relative;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s11:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s11:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }


/*Star number two required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s12{
	top: 20px;
	left: 180px;
	 margin: 50px 0;
     position: relative;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s12:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s12:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number three It required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s13{
	top: 70px;
	left: 330px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s13:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s13:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number four required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s14{
	top: 65px;
	left: 40px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s14:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s14:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number five required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s15{
	top: 44px;
	left: 160px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s15:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s15:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number six required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s16{
	top: 0px;
	left: 260px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s16:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s16:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number seven required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s17{
	top: 20px;
	left: 300px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s17:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s17:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number eight required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s18{
	top: 5px;
	left: 400px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s18:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s18:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

/*Star number nine required 3 div tags to make the desired image. the before and after div tags position is relative to the absolute position of the main tag allowing it to be moved easily. each div tag determines the size and color of it's respective part of the star*/
div.s19{
	top: 0;
	left: 360px;
	 margin: 50px 0;
     position: absolute;
     display: block;
     color: yellow;
     width: 0px;
     height: 0px;
     border-right: 10px solid transparent;
     border-bottom: 7px solid white;
     border-left: 10px solid transparent;
     transform: rotate(35deg);
	
}

div.s19:before {
      border-bottom: 8px solid white;
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -4.5px;
      left: -6.5px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }

div.s19:after {
      position: absolute;
      display: block;
      color: red;
      top: .3px;
      left: -10.5px;
      width: 0px;
      height: 0px;
      border-right: 10px solid transparent;
      border-bottom: 7px solid white;
      border-left: 10px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }
	

/* clouds group 1 */
/*cloud group 1 number 1. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c011{
	position: absolute;
	top:230px;
	left: 40px;
	
	width: 30px;
	height: 15px;
	background: rgba(255,255,255,0.72);
	border-radius: 50%;
}

/*cloud group 1 number 2. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c012{
	position: absolute;
	top:233px;
	left: 50px;
	
	width: 30px;
	height: 15px;
	background: rgba(240,240,240,0.72);
	border-radius: 50%;
}

/*cloud group 1 number 3. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c013{
	position: absolute;
	top:227px;
	left: 70px;
	
	width: 35px;
	height: 15px;
	background: rgba(230,230,230,0.75);
	border-radius: 50%;
}

/*cloud group 1 number 4. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c014{
	position: absolute;
	top:233px;
	left: 85px;
	
	width: 30px;
	height: 15px;
	background: rgba(250,250,250,0.70);
	border-radius: 50%;
}

/*cloud group 1 number 5. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c015{
	position: absolute;
	top:237px;
	left: 95px;
	
	width: 30px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}

/*cloud group 1 number 6. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c016{
	position: absolute;
	top:230px;
	left: 110px;
	
	width: 34px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}

/*cloud group 1 number 7. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c017{
	position: absolute;
	top:240px;
	left: 125px;
	
	width: 39px;
	height: 12px;
	background: rgba(245,245,245,0.75);
	border-radius: 50%;
}

/*cloud group 1 number 8. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c018{
	position: absolute;
	top:245px;
	left: 145px;
	
	width: 35px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}

/*cloud group 1 number 9. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c019{
	position: absolute;
	top:237px;
	left: 165px;
	
	width: 35px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}


/* clouds group 2 Some of the clouds utilize the z-index to look like they are coming from behind some mountains.*/
/*cloud group 2 number 1. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c021{
	position: absolute;
	top:280px;
	left: 250px;
	
	width: 30px;
	height: 15px;
	background: rgba(255,255,255,0.72);
	border-radius: 50%;
}

/*cloud group 2 number 2. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c022{
	position: absolute;
	top:283px;
	left: 260px;
	
	width: 30px;
	height: 15px;
	background: rgba(240,240,240,0.72);
	border-radius: 50%;
}

/*cloud group 2 number 3. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c023{
	position: absolute;
	top:277px;
	left: 280px;
	
	width: 35px;
	height: 15px;
	background: rgba(230,230,230,0.75);
	border-radius: 50%;
}

/*cloud group 2 number 4. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c024{
	position: absolute;
	top:283px;
	left: 295px;
	
	width: 30px;
	height: 15px;
	background: rgba(250,250,250,0.70);
	border-radius: 50%;
}

/*cloud group 2 number 5. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c025{
	position: absolute;
	top:287px;
	left: 305px;
	
	width: 30px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}

/*cloud group 2 number 6. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c026{
	position: absolute;
	top:280px;
	left: 320px;
	
	width: 34px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}

/*cloud group 2 number 7. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c027{
	position: absolute;
	top:290px;
	left: 335px;
	
	width: 39px;
	height: 12px;
	background: rgba(245,245,245,0.75);
	border-radius: 50%;
}

/*cloud group 2 number 8. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c028{
	position: absolute;
	top:295px;
	left: 355px;
	
	width: 35px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}

/*cloud group 2 number 9. this div determines the position on the page and wether it is absolute or relative, (this one is absolute) the sizing for the oval and it's shade and opacity*/
div.c029{
	z-index: -2;
	position: absolute;
	top:300px;
	left: 375px;
	
	width: 35px;
	height: 15px;
	background: rgba(255,255,255,0.75);
	border-radius: 50%;
}



/* mountains */
/*Mountain number 1 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m01{
	position: absolute;
	top:245px;
	left: 0px;
	
      width: 0;
      height: 0;
      border-left: 70px solid transparent;
      border-right: 70px solid transparent;
      border-bottom: 110px solid rgba(40,57,106,1.00);
}

/*The Snow for Mountain number 1 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle (white for snow)*/
div.m01s{
	position: absolute;
	top:245px;
	left: 51px;
	
      width: 0;
      height: 0;
      border-left: 19px solid transparent;
      border-right: 19px solid transparent;
      border-bottom: 30px solid white;
	
}

/*Mountain number 2 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m02{
	position: absolute;
	top:260px;
	left: 80px;
      width: 0;
      height: 0;
      border-left: 80px solid transparent;
      border-right: 80px solid transparent;
      border-bottom: 100px solid rgba(40,45,106,1.00);
    
}

/*Mountain number 3 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m03{
	position: absolute;
	top:200px;
	left: 170px;
	z-index: -1;
      width: 0;
      height: 0;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 140px solid rgba(11,57,106,1.00);
    
}

/*The Snow for Mountain number 3 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle (white for snow)*/
div.m03s{
	position: absolute;
	top:200px;
	left: 196.5px;
	
      width: 0;
      height: 0;
      border-left: 13.5px solid transparent;
      border-right: 13.5px solid transparent;
      border-bottom: 48px solid white;
	
}

/*Mountain number 4 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m04{
	position: absolute;
	top:255px;
	left: 200px;
	z-index: -1;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid rgba(40,57,106,1.00);
    
}

/*Mountain number 5 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m05{
	position: absolute;
	top:250px;
	left: 250px;
	z-index: -3;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid rgba(43,47,115,1.00);
    
}

/*Mountain number 6 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m06{
	position: absolute;
	top:230px;
	left: 300px;
	z-index: -3;
      width: 0;
      height: 0;
      border-left: 60px solid transparent;
      border-right: 60px solid transparent;
      border-bottom: 120px solid rgba(53,57,115,1.00);
    
}

/*The Snow for Mountain number 6 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle (white for snow)*/
div.m06s{
	position: absolute;
	top:230px;
	left: 336px;
	
      width: 0;
      height: 0;
      border-left: 24px solid transparent;
      border-right: 24px solid transparent;
      border-bottom: 48px solid white;
	
}

/*Mountain number 7 with its location determining attributes, along with the attributes for the size of the triangle (width, height) and the color of the triangle*/
div.m07{
	position: absolute;
	top:275px;
	left: 370px;
	z-index: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 80px solid rgba(43,47,115,1.00);
    
}


/* house  and lake*/
/*the div for the roof of the house determining it's location on the page, it's size (width and height), and color*/
div.hroof{
	position: absolute;
	top:367px;
	left: 297px;
	
	width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid red;
	
}

/*the div for the body of the house determining it's location on the page, it's size (width and height), and color*/
div.hbody{
	position: absolute;
	top:380px;
	left: 300px;
	
	width: 25px;
  	height: 20px;
  	background: rgba(126,85,32,1.00);
	
}

/*the div for the door of the house determining it's location on the page, it's size (width and height), and color*/
div.hdoor{
	position: absolute;
	top:388px;
	left: 305px;
	
	width: 5px;
  	height: 12px;
  	background: black;
}

/*the div for the roof of the house determining it's location on the page, it's size (width and height), and color*/
div.hwindow{
	position: absolute;
	top:388px;
	left: 315px;
	
	width: 5px;
  	height: 5px;
  	background: yellow;
}

/*the div for the lake determining it's location on the page, it's size (width and height), color, and shape (I used extensive border radius tweaking to get the shape that I wanted)*/
div.lake{
	position: absolute;
	top:367px;
	left: 90px;
	
	display: block;
    width: 200px;
    height: 75px;
    background-color: darkblue;
    border-radius: 60% 30% 40% 40% / 50% 15% 30% 50%;
	
}

/*the div for the dock of the lake determining it's location on the page, it's size (width and height), and color. I also made it extend a bit on to the shore so that it looked more connected to the land.*/
div.dock{
	position: absolute;
	top:400px;
	left: 265px;
	
	width: 30px;
  	height: 10px;
  	background: rgba(59,66,4,1.00);
	
}