body { 
  margin: 0;
 /* include a background */
  /* background: white url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Poiuyt.svg/256px-Poiuyt.svg.png") no-repeat fixed bottom right; */
  /* background: white NOWHERE SQUARE no-repeat fixed bottom right; */

  font-family:'Overpass Mono', monospace;
  font-weight: 300;
  font-style: light;
}

	/* Ensures all boxes are sized inclusive of padding etc. */
	* {
	  box-sizing: border-box;
	}



/* ---Content Areas--- */

.top {
background-color: #ffffff;
background-color: rgba(999, 999, 999, 0.3);
font-size: large;
font-family: 'Overpass', sans-serif;
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 1;

}



.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: green;

}


.footer {
background-color: #333;

position: fixed;
left: 0;
bottom: 0;
width: 100%;

font-family: 'Overpass', sans-serif; color: #f2f2f2; 
text-align: center;
font-size:large;

}
		/* Style the footer links */
		.footer a {
		  float: left;
	  display: block;
	  color: #f2f2f2;
	  padding: 4px 6px;
	  font-size: Large;
	  text-decoration: none;
	  font-family: 'Overpass Mono', monospace; 
		}

		/* Change color on hover */
		.footer a:hover {
		  background-color: #ddd;
  		  color: black;
		}
		
		/* Keep color on active */  
  .footer a.active {
  background-color: #ddd;
  color: black;
 
}

.content {

 background-color: #ffffff; 
    background-color: rgba(999, 999, 999, 0.9);
    padding: 10px 10px;
   font-size: large;
  font-family: 'Overpass Mono', monospace;
  font-weight: 300;
  font-style: light;
 
      
     
       border-radius: 1em;
        padding: 1em;
        position: absolute;
        Width: 80%;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) 
}



     
       
       
       

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  
  background-color: transparent;
  
   
}

.flex-container > div {
  background-color: transparent;
  width: 45%;
  margin: 10px;
  text-align: left;
 
}

/*-- second flex container for the Nowhere square Title --- NOT USED --*/

.flex-container2 {
  display: flex;
  justify-content: flex-end;
  background-color: transparent;
}

.flex-container2 > div {
  background-color: transparent;
  width: 100%;
  margin: 10px;
  text-align: right;
  vertical-align: bottom;

}

/*--- Additional Layouts ---*/

 /* 3 column divs */

		.col3-1 { 
			float:left;  
			background:Red; 
			width:20%; 
			height:280px; 
		} 
		.col3-2{ 
			float:left;  
			background:Green; 
			width:60%; 
			height:280px; 
		} 
		.col3-3{ 
			float:right; 
			background:blue; 
			width:20%; 
			height:280px; 
		} 
	   


 /* 2 column divs */


		.col2-1 { 
			float:left;  
			
			width:50%; 
			
			
		} 
	   
		.col2-2{ 
			float:right; 
			
			width:50%; 
			
		} 
	   

/*Special text alignment divs */

	.bottomright {
	  position: absolute;
	  bottom: 5vw;
	  right: 5vw;
	  font-size: 30px;
	  background-color: #fff;
	}


.nowheretitle {
 		position: fixed;
        Width: 100%;
        bottom: 24px;
        left:0px;

 		background-color: #ffffff;
		padding: 10px 10px;
	font-size: 3vh;
  font-family: 'Overpass Mono', monospace;
  font-weight: 300;
  font-style: light;
  color: #000000;
  
  margin: 0px;
   padding-right: 10%;
  text-align: right;
  vertical-align: bottom;
} 
     
      




/* --- Button Styles --- */


.button1 {
  background-color: #444444;
  border: 2px solid #f44336;
  border-radius: 8px;
  color: white;
  padding: 10px 10px;
  text-align: center;
  font-size: 10px;
  cursor: pointer;
}

.active, .button1:hover {
  background-color: 888888;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}



.button2 {
  background-color: #4CAF50; /* Green */
  border: 2px solid black;
  border-radius: 8px;
  color: white;
  padding: 15px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}


.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}





/* ---Images- Formatting and positioning--- */

.responsive {
  width: 100%;
  height: auto;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


/* --- Media Queries - provides rules for behaviours on different devices and screen sizes --- */

@media only screen and (max-width: 1000px) {
  /* For mobile phones: */
  .col2-1, .col2-2, .col3-1, .col3-2, .col3-3 {
    width: 100%;
    font-size: 3vw;
  }
  .footer, .footer a, .top {
  font-size: 5vw
  }
  
  .bottomright{
  font-size: 3vw
  }
}