html {
  background-color: ;
  font-family: ;
}

@media screen and (min-width: 30rem) {
 body {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    margin: auto; }
 }
 
 @media screen and (min-width: 200px) and (max-width: 400px) {
    img { display: none; }
}

#container {
    position: absolute;
    top: 0px;
	left: 0px;	
	width: 100%;	
    height: 4550px;	
	background: #ffffe0;	
    border-bottom: blue;	
} 

		/* Nav DropDown */

#nav {
    z-index: 100;		
	position: fixed;
	top: 7px;
	left: 50px;
	width: 92.5%;
    height: 30px;	
	font-family: "Agency FB";
	background: ;
	border: ;	
}	

#nav1 {
    z-index: 1;			
    position: relative;		
	display: flex;
	justify-content: center;  
	left: 50px;	
	width: 92.5%;	
    height: 25px;
	background: ;
}

			/* section 1 below - Home background */

.section1 {
    position: relative;
	top: 15px;	
    left: 0px;
	width: 100%;
    height: 605px;
	border: ;
	background: ;
	border-bottom: ;
}

#background {
    position: relative;
    top: 20px;
	left: 50px;	
	width: 92.5%;	
	background: ;	
    border-bottom: ;	
}
	
#prins {
	position: relative;	
	    z-index: 11;	
	top: -167px;
    left: 995px;	
	width: 210px;
	height: 20px;
  	font: 18px/15px Cambria;
	color: 	#800000;
	background-color: ;
	-ms-transform: rotate(-90deg); /* IE 9 */
	transform: rotate(-90deg);
}

				/* section 2 below - Fish - Article - Gossip - Map - Places */
					
#section2 {					
    position: absolute;
	top: 615px;	
    left: 50px;
	width: 92.5%;
    height: 420px;
	border: ;
	background: #ffffff;
	border-bottom: ;
}

.grid-container {					/* for fish */
	display: grid;
	grid-template: auto;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	background-color: ;  
}

.grid-item div{
	background-color: ;
	border: ;
	padding: 1px;
	background-color: ;   
}

#visse {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px);
	justify-content: center;
	grid-column-gap: 120px;
	position: relative;	
	top: 25px;
	left: 30px;
    width: 95%;	
    height: 55px;	
	background: ;		
	border-bottom: ;
}
				/* end of fish */
	
.article1 {
    z-index: 1;		
	position: relative;	
	top: 40px;
    left: 50px;	
	width: 30%;	
    height: 280px;
	font: 14px/20px Arial Narrow;
		border: 1px solid #FFA500; 
		padding-left: 10px;
	color: ;
	background: ;
}

.wiki {
    z-index: 1;		
	position: relative;	
	top: -25px;
    left: 40px;	
	width: 140px;	
    height: 20px;	
	background: ;
}	
.googleMap {	
    z-index: 11;
	position: relative;
	top: -59px;	
	left: 195px;
	width: 135px;
	height: 15px;
	background: ;	
}

.toMap {
	position: relative;		
	top: -240px;
    left: 530px;	
  width: 285px;
  height: 55px;	
  Font: 18px/20px Arial Narrow;
  padding-top: 15px;  
  padding-left: 15px;
	border: 1px solid #FFA500;   
  background: ;	
}	

#smallMap {
	position: relative;	
    z-index: 1;		
	top: -235px;
    left: 58px;	
  width: 300px;
  height: 135px;	
	border: 1px solid #FFA500;   
  padding: ;
  margin: 0 auto;  
  background: ;
}

#share {
	position: relative;	
    z-index: 11;		
	top: -447px;
    left: 430px;	
  width: 250px;
  height: 75px;	
  Font: 18px/20px Arial Narrow;  
	border: 1px solid #FFA500;  
  padding-left: 20px;
  margin: 0 auto;  
  background: ;
}
			
#section3 {					
    position: absolute;
	top: 1035px;	
    left: 50px;
	width: 92.5%;
    height: 845px;

	background: #FFFFFF;
	border-bottom: ;
}		
		
#gossip_pic {
	position: relative;	
	top: 20px;
	left: 50px;
    width: 65px;	
    height: 75px;	
	background-color: ;		
	border-bottom: ;
}	
		
.truth {
	position: relative;	
	top: -5px;
	left: 0px;
    width: 80px;	
    height: 10px;	
	background-color: ;		
}		

#gossip {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px) fit-content(100px);	
	justify-content: left;
	grid-column-gap: 30px;	
	margin-left: 10px;
	position: relative;	
	top: -70px;
	left: 170px;
    width: 85%;	
    height: 85px;	
  font-size: 30px;
  text-align: left;
  line-height: 2.0;	
	background-color: ;		
}
	
			/* section 3 below - Town */

.flex-container {
  display: flex;	 	/* First create a flex layout context */
  flex-wrap: nowrap;	/* Define the flow direction, and if we allow the items to wrap. 
							* This is the same as:
								* flex-direction: row;
								* flex-wrap: wrap;*/						
  justify-content: space-around;	  /* Define how the remaining space is distributed  */						
  background-color: ;
}

#town {
	position: relative;	
	top: -80px;
	left: 30px;
    width: 96%;	
    height: 580px;
	text-align: center;	
	font: 24px/45px Cambria;
	color: #696969;
	background-color: ;	
	border-bottom: ;	
}

#images {
    text-align: center;
    z-index: 3;
    top: 0px;
    width: 100%;
    height: 500px;
	background: ;	
}

			/* end of section 3 */

		/* section 4 below - Advertising */

#section4 {
    position: absolute;
	top: 845px;		
    left: 0px;
	width: 100%;
    height: 1560px;
	background: #FFFFFF;
}

.adv-container {
		    z-index: 1;
	position: relative;	
	text-align: center;	
	top: 5px;
	left: 0px;	
	width: 100%;
	height: 990px;	
	font: 24px/24px Cambria;
	color: #696969;
	background-color: ;	
}

#adv-name {
		    z-index: 1;
	position: relative;	
	text-align: center;	
	top: 10px;
	left: ;	
	width: 100%;
	height: 26px;	
	font: 26px/24px Cambria;
	color: #696969;
	background-color: ;	
}

.nav_adv {

	position: absolute;	
	text-align: center;	
	top: 60px;
	left: 540px;	
	width: 130px;
	height: 22px;	
	background-color: ;	
}

#place-add1 {
		    z-index: 1;
	position: absolute;	
	text-align: center;	
	top: 60px;
	left: 1017px;	
	width: 130px;
	height: 22px;	
	background-color: ;	
}

#section-lodges {				/* section lodges */
    position: absolute;
	top: 1050px;		
    left: 0px;
	width: 100%;
    height: 550px;
	border: ;
	background: #FFFFFF;
}

#lodges {
		    z-index: 1;
	position: relative;	
	text-align: center;	
	top: 0px;
	left: ;	
	width: 100%;
	height: 26px;	
	font: 26px/24px Cambria;
	color: #696969;
	background-color: ;	
}

#section5 {				/* section 5 - Smalls */
    position: relative;
	top: 1660px;		
    left: 0px;
	width: 100%;
    height: 520px;
	border: ;
	background: #FFFFFF;
	border-bottom: 1px solid #FFA500;
}

#smalls {		/* heading */
		z-index: 1;
	position: relative;		
	top: 30px;
	left: 565px;	
	width: 110px;
	height: 100px;	
	background-color: ;	
}

#place-add2 {
		    z-index: 1;
	position: absolute;	
	text-align: center;	
	top: 455px;
	left: 547px;	
	width: 130px;
	height: 22px;	
	background-color: ;	
}

#section6 {					/* section 6 - comments */
    position: absolute;
	top: 2940px;		
    left: 0px;
	width: 100%;
    height: 440px;
	border: ;
	background: ;
	border-bottom: 1px solid #FFA500;
}

#feedback {	
    position: relative;
	top: -40px;
	left: 0px;	
	width: 100%;
	height: 375px;	
	background-color: ;		
}

.say {
    position: relative;
	justify-content: center; 	
	top: 30px;	
	left: 420px;		
	width: 420px;
    height: 40px;
	color: #2F4F4F;
	background: ;
}	

.comment {
    position: relative;
	display: flex;	
	justify-content: center; 	
	top: 50px;	
	left: 760px;		
	width: 120px;
    height: 40px;
	background: ;
}

.com1 {
    position: relative;
	top: 50px;	
	left: 130px;		
	width: 90%;
    height: 90px;
	background: ;
}

.com2 {
    position: relative;
	top: 70px;	
	left: 130px;		
	width: 90%;
    height: 90px;
	background: ;
}

footer {
	position: relative;	
	top: 2100px;
	left: 0px;	
	height: 115px;
	text-align: center;
	background-color: #696969;	
}

#nav2 {
    z-index: 1;		
	position: relative;
	top: 10px;
	left: 110px;
	width: 10%;
	font: 16px/16px;
	font-family: "Agency FB";
  text-decoration: none;
  color: #ffffff;  
	background: ;	
}

#contact {
    z-index: 1;		
	position: relative;
	top: -60px;
	left: 990px;
	width: 10%;
	font: 18px/14px;
	font-family: "Agency FB"; 
	background: ;	
}

.rights {
    position: relative;
	top: -40px;	
	left: 0px;		
	width: 100%;
    height: 20px;
	font: 14px/14px Cambria;	
  color: #ffffff; 	
	background: ;
}



