/* Basic CSS resets -- leveling slight inconsistencies in browsers */
html, body {
	margin:0px;
	padding:0px;
	height:100%;
}

html {
		/* Standard text-settings below */
	font-size: 1em;
    line-height: 1.4em;
}


/*Start of universal CSS */ 

body {
	
      background:url(../img/smoke.jpg);
	  background-repeat: no-repeat;
	  background-size:130%;
	  width:auto;
	  
	  height:1400px;
}


#container {
	
}
.navi{ 
	display: flex;
	
	background-color: #798280; 
	padding: 40px 50px;
	} 
	
.navi img { 
	height: 200px; 
	position:absolute;
	top:25px;
	left:15px;
	} 
	
.navi ul { 
	list-style: none; 
	margin: 0; 
	padding: 10px; 
	display: block; 
	} 
	
button{
		background-color:red;
		}
	
.navi li { 
	margin: 17px;
		
		
	} 
	
.navi a { 
	color: white; 
	text-decoration: none; 
	padding: 8px 16px; 
	transition: background 0.4s; 
	font-family: 'Jacques Francois', serif;
	font-size:20px;
	background:#e6531e;
	}
/*#nav{

	border: 5px solid #B0ACAC;
	margin:auto;
	width:1350px;
	height:130px;
}

#logo{
position:relative;
width:40%
margin:auto;
padding:0px;
left:-30px;
top:-10px;
}
*/
#Soul{
	
	cursor:pointer;
	
	}



/*nav ul.horizion li{
	
	display:inline;
	position:relative:
	top:-130px;
	left:100px;
	margin:40px;
	
	}

nav a{
		
		text-decoration:none;
		display:inline-block;
		border:1px solid black;
		font-size:25px;
		padding:15px;
		margin:15px;
		background:#e6531e;
		color:#030101;
		font-family: "Jacques Francois", serif;
		}

*/


#foot{
	font-size:0.9em;
	/*position:absolute;*/
	bottom:0px;
	}
	#footr{
	font-size:0.9em;
	position:absolute;
	bottom:0px;
	right:0px;
	}
/*End of Universal CSS */ 
/*Start of Home Page CSS */ 
#Welcome{
/*position:absolute;*/

margin:12px;
border:1px solid black;
width:290px;
padding:20px;
font-size:2em;
background:#ba2727;
color:#1a0106;
font-family: "Jacques Francois", serif;
left:1100px;

}

#Messge{
/*position:absolute;*/
margin:28px;
border:1px solid black;
padding:45px;
font-size:1.8em;
background:#595959;
color:#1a0106;
font-family: "Jacques Francois", serif;
 line-height: 1.3;
 width:75%;
 left:250px;
 top:200px;
}

#proof{

padding:10px;
/*position:absolute;*/
left:1130px;
font-size:2em;
background:#e6531e;
color:#000000;
top:800px;

}
footer{
	
	color:white;
	}
/*End of Home page CSS */ 
/*Start of research CSS */ 


#test1{
	

margin:12px;
border:1px solid black;
width:600px;
height:220px;
padding:20px;
font-size:1.5em;
background:#D9D9D9;
color:#000000;
font-family: "Jacques Francois", serif;
top:210px;
 line-height: 1.1;
	
	
	
	}
	

#H1{

	top:500px;
	left:10px;
	}

#test2{

margin:12px;
border:1px solid black;
width:500px;
height:100px;
padding:20px;
font-size:30px;
background:#D9D9D9;
color:#000000;
font-family: "Jacques Francois", serif;
left:25px;
top:950px;
 line-height: 0.9;
	}



#S1{

	left:1300px;
	top:500px;
	
	}
	#S2{
	
	left:1900px;
	top:500px;
	
	}
	#S3{
	
	left:1300px;
	top:800px;
	
	}#S4{
	
	left:1900px;
	top:800px;
	
	}


#test3{
	
	

margin:12px;
border:1px solid black;
width:500px;
padding:10px;
font-size:1.7em;
background:#D9D9D9;
color:#000000;
font-family: "Jacques Francois", serif;
left:1800px;
top:240px;
line-height:1;
	
	
	}
	
	#vid{
	width:650px;	
		
		top:500px;
		left:10px;
		
		}
		#VidButton{
			
			background:none;
	border:1px solid black;
	font-size:3em;
	color:#5c062e;
	font-weight:bold;
	cursor: pointer;
	
	top:650px;
	left:200px;
	border-radius:30px;
	padding:10px;
			}
			
			#VidButton:hover {
	color:#990351;
}
	#audios{
		
		top:700px;
		width:600px;
		top:1150px;
		
		
		}
		
		
	

	
	
/*End of Reserch CSS*/
/*Start of Memorial CSS */

#containerME{
	
	left:950px;
	top:170px;
	width: 600px;
  height: 1000px;
  background: black;
  display:flex;
  flex-direction:column;
	}
	
	#WeridGuy{
		
		
		top:200px;
		left:100px;
		cursor:pointer;
		
		}
		
		#Memory{
			font-family:'Kapakana',serif;
			font-size:4em;
			 text-align: center;
			letter-spacing: 5px;
			 line-height: 1;
			 color:white;
			}
			
			#LastWords{
				
				font-family:'Kapakana',serif;
			font-size:1.9em;
			 text-align: center;
			letter-spacing: 5px;
			 line-height: 1;
				top:800px;
				color:white;
			
				}
				
				
	#LoreBox{
		
		
	left:200px;
	top:170px;
	width: 600px;
  height: 1000px;
  background: #454a52;
		
		}
		#Lore{
			font-size:1.9em;
			line-height: 1;
			padding:10px;
			font-family: "Jacques Francois", serif;
			color:#21ADC6;

			}

/*End of MemorialCSS */ 	
/*Start of About CSS*/


#containerA{
	width: 600px;
  height: 1000px;
	
	
	}
	#House{
		
		
		left:1500px;
		top:140px;
		}
		
		#GuySuit{
			
			
		left:500px;
			
			
			}
			
			#founder{
				
			
				width:510px;
				height:250px;
				background:#263240;
				top:700px;
				left:540px;
				font-size:1.9em;
				line-height: 1;
				padding:10px;
				font-family: "Jacques Francois", serif;
				color:#456385;

				}
				
				#Location{
					
				width:510px;
				height:280px;
				background:#263240;
				top:700px;
				left:1540px;
				font-size:1.9em;
				line-height: 1;
				padding:10px;
				font-family: "Jacques Francois", serif;
				color:#571f18;
					
					
					
					}

/*End of About CSS*/
/*Start of Recruiting CSS*/
	#containerRE{
	
				width:1000px;
				height:1300px;
				background:#89b1b3;
				
				left:750px;
	
	
	}
	
		#Recriuter{
			font-size:3em;
			padding:10px;
			
			 line-height: 1;
			font-family: 'Jacques Francois', serif;

			
			}
			
			label{
				
								font-size:2em;

				
				}
			input[type=text] {
				width: 20%;
				padding: 12px 20px;
				margin: 19px 0;
				box-sizing: border-box;
				font-size:2em;
			}
			
			#form{
				
				padding:10px;
				
				}
				input[type=radio]{
					
					margin:15px;
					transform: scale(1.5);
					
					}
				#Unknown{
					
					font-family: "Yarndings 12",sans-seri;
					font-weight: 400;
					font-style: normal;
					font-size:2em;
				
					
					}
					#Rizor{
						 font-family: "Rubik Glitch", system-ui;
						font-weight: 400;
						font-style: normal;
						
						}
					
					#Where{
						font-size:2em;
						
						}
						#Where2{
							
							font-size:1em;
							}
							
							#Reason{
							    width:100%;	
								height:200px;
								}
								#Hear{
									
									width:100%;
									
									}
									
									#Join{
										
										font-size:4em;
										border-radius:10px;
										background:#bd1738;
										color:#0f124a;
										
										bottom:20px;
										left:400px;
										}
			


/*End of Recruiting CSS*/
/* Start of store CSS*/
	#containerST{
		
		width:1800px;
		height:2500px;
		background:#0a4676;
	
		left:350px;
		z-index:-1;
		}
		
		
		#back{
		
		width:1700px;
		height:2300px;
		background:#e8e4d3;
	
		left:400px;
		font-family: 'Jacques Francois', serif;
		top:150px;
		
		}
		
		#Title{
			
			padding:20px;
			font-size:3em;
			
			left:20px;
			top:500px;
			}
			
			#description{
				
				width:600px;
				height:250px;
				font-size:2em;
				line-height:1;
				
				top:0px;
				left:1075px;
				border:1px solid black;
				padding:10px;
				font-family: 'Jacques Francois', serif;
				}
				
				#Time{
					left:1100px;
					
					top:300px;
					}
					
					#Buy{
						
						font-size:3em;
						
					     top:450px;
						padding:10px;
						border-radius:20px;
						Background:#339933;
						left:1100px;

						}
						
						#Reviews{
							padding:10px;
							
							top:1400px;
							width:600px;
							height:25px;
							background:#ff6666;
							left:25px;
							font-size:2em;
							
							}
							
							#Reviewers{
								width:1000px;
								height:650px;
								
							      top:1500px;
								padding:10px;
								font-size:2em;
								line-height:1.2;
								background:#006699;
								left:25px;
								font-family: 'Jacques Francois', serif;
								}
								
								#arrow{
									--s: 10px; /* control the shape (can be percentage) */

									width: 50px;
									aspect-ratio: 5/3;
									clip-path: polygon(0 0,0 var(--s),50% 100%,100% var(--s),100% 0,50% calc(100% - var(--s)));
									background: #5E9FA3;
									
									top:1575px;
									left:1050px;
									cursor:pointer;
									}
									
									#instruction{
										padding:10px;
							
							top:600px;
							width:650px;
							height:25px;
							background:#ff6666;
							left:25px;
							font-size:2em;
										}
										
										#instructions{
											width:1000px;
								height:500px;
								
							      top:680px;
								padding:10px;
								font-size:2em;
								line-height:1.2;
								background:#006699;
								left:25px;
								font-family: 'Jacques Francois', serif;
											
											}
									
									



/* End of store CSS*/

/* ========================================
MEDIA QUERIES!
You can adjust the min-width numbers below, and add as many new media queries as you need.
======================================== */



/* Minimum width for laptops. */
@media all and (min-width: 769px) {
	
	.navi { 
	display: flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
	
	padding: 40px 50px;
	} 
	
.navi img { 
	height: 130px; 
	position:absolute;
	top:15px;
	left:15px;
	
	} 
	
.navi ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
		display: flex; 

	} 
	
	.navi li { 
	margin: 0 10px;
		
		
	} 
	
.navi a { 
	color: white; 
	text-decoration: none; 
	padding: 8px 16px; 
	font-size:30px;
	}
	
.navi a:hover { 
	background-color: black; 
	} 
	
	button{
		background-color:black;
		}
		
		
		#Welcome{
		position:relative;
		left:500px;
	
	

	
	
	}
	
	#Messge{
		
		width:auto;
		
		
		}
		
		#proof{
			
			position:relative;
			top:0px;
		left:500px;
			
			}
			#containerME  img{
					
					position:relative;
					left:50px;
					top:0px;
					}
					#containerME {
					
					position:relative;
					left:300px;
					top:0px;
					}
					
					#LoreBox{
						
						position:relative;
					left:300px;
					top:0px;
					}
					
					
					#Founding{
						position:relative;
						left:300px;
						
						}
						
						#founder{
						position:relative;
						left:30px;
						top:0px;
						
						}
						
						#Locations{
						position:relative;
						left:300px;
						
						}
						#Location{
						position:relative;
						left:30px;
						top:0px;
						
						}
						
						#containerRE{
							
							position:relative;
							left:100px;
							
							}
							
							#Join{
								position:relative;
							left:350px;
							top:0px;
								
								
								}
								#Rp{
									position:relative;
									top:0px;
									
									}
								
								#arrow{
									position:relative;
							left:650px;
							top:-60px;
									
									
									}
									
									#Reviewers{
										position:relative;
										top:-60px;
										left:0px;
										}
										
										#containerST{
											
											position:absolute;
											top:150px;
											left:0px;
											height:2700px;
											}
											
											#back{
												position:absolute;
											top:150px;
											left:0px;
											height:2600px;
												
												
												}
												
												#Buy{
													position:relative;
													left:200px;
													top:0px;
													}
													
													#description{
														width:50%;
														
														}
														
														body{
															
															width:auto;
															margin:auto;
															}
															
															#Ex1{
																display:flex;
																align-items:center;
																flex-direction:column;
																background:#454e52;
																}
																#Ex2{
																display:flex;
																align-items:center;
																flex-direction:column;
																background:#31444d ;
																
																}
																#Ex3{
																display:flex;
																align-items:center;
																flex-direction:column;
																background:#123140;
																}
														
														
														

										
										
	
} /* closes 769px+ */



	


/* Minimum width for desktop screens. */
@media all and (min-width: 1500px) {
	
	.navi a { 
	
	text-decoration: none; 
	padding: 2px 8px; 
	font-size:40px;

	border-radius:10px;
	}
	
	.navi { 
	display: flex;
	
	
	padding: 40px 50px;
	} 
	
	
	#Welcome{
		position:relative;
		left:1100px;
	
	

	
	
	}
	
	#Messge{
		
		width:auto;
		
		
		}
		
		#proof{
			
			position:relative;
			top:0px;
		left:1100px;
			
			}
			
			
			#containerME{
				position:relative;
				left:950px;
	top:170px;
				
				
				}
				
				#containerME  img{
					
					position:relative;
					left:50px;
					top:0px;
					}
					
					#Founding{
						position:relative;
						left:300px;
						top:100px;
						}
						
						#founder{
						position:relative;
						left:30px;
						top:0px;
						
						}
						
						#Locations{
						position:relative;
						left:1500px;
						top:-800px;
						
						}
						#Location{
						position:relative;
						left:30px;
						top:0px;
						
						}
						#containerRE{
							
							position:relative;
							left:800px;
							
							}
							
							#Join{
								position:relative;
							left:350px;
							top:0px;
								
								
								}
								
								#Rp{
									position:relative;
									top:-400px;
									left:25px;
									}
								
								#arrow{
									position:relative;
							left:650px;
							top:-60px;
									
									
									}
									
									#Reviewers{
										position:relative;
										top:-450px;
									
										}
										
										#containerST{
											
											position:absolute;
											top:150px;
											left:350px;
											height:2700px;
											}
											
											#back{
												position:absolute;
											top:150px;
											left:400px;
											height:2600px;
												
												
												}
												
												#Buy{
													position:relative;
													left:100px;
													top:0px;
													}
													
													#description{
														width:600px;
														
														}
														
														#ready{
															
															position:relative;
															left:63.5%;
															top:-630px;
															}
															
															#instruction,#instructions{
																position:relative;
																top:-450px;
																
																
																}
																
																#imis{
																	display:flex;
																	flex-direction:row;
																	justify-content:space-evenly;
																	
																	}
	
	
} /* closes 1024px+ */