@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
		font-family: "Inter", sans-serif;		
		background-image: url("dodgeballs.png");
		background-color: #d9d9d9;
		background-attachment: fixed;
		background-size: auto;
	}
	
header {
		text-align: center;
		padding: 5px;
	}
	
footer {
		text-align: center;
		padding: 10px;
	}
	
h1 {
	text-align: center;
	}
		
p, h2, h3 {
		text-align: left;
	}
	
table, td {
		border: 2px solid black;
		text-align: center;
	}

.container {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
.center-text {
  	text-align: center;
	margin: auto;
	}
	
th {
		border: 1px solid black;
		text-align: center;
	}
	
tr:nth-child(even) {background: #FFFFFF;}
tr:nth-child(odd) {background: #B5E3D8;}
	
.center {
		margin-left: auto;
		margin-right: auto;
	}
	
figure {
		margin-left: auto;
		margin-right: auto;
	}
	
nav {
		overflow: hidden;
		background-color: #024230;
		width: 1380px;
	}
	
nav a {
		float: left;
		display: block;
		color: #FFFFFF;
		text-align: center;
		padding: 14px 14px;
		text-decoration: none;
	}
	
nav a:hover {
		background-color: #00694E;
		color: black;
	}
	
column {
		float: left;
		width: 100%;
	}
	
#wrapper {
		background-color: #F9F7ED;
		margin-right: auto;
		margin-left: auto;
		width: 1400px;
	}
	
h4 {
		text-align: center;
	}
	
img {
	display: block;
	margin: auto;
	width: 600px;
	height: 300px;
}
	
p, li, label, option {
		margin-left: 15px;
		margin-right: 15px;
	}
	
section {
		border-style: solid;
		border-width: 2px;
		margin-left: 10px;
		margin-right: 10px;
	}

.title-cell {
	text-align: center;
	padding: 10px;
}

.title-cell p, h2{
	margin: 0px;
	line-height: 1.2em;
}

article {
	padding-left: 15px;
}

ul {
	list-style: none;
  	padding-left: 2rem;
}

ul li {
  background: url("Images/dodgetn.jpg") no-repeat left center;
  background-size: 20px 20px;
  padding-left: 2.5rem;  
  margin-bottom: 1rem;
}

/* =========================
   Mobile Styles: 0 to 480px 
   =========================
*/

@media only screen and (max-width: 480px) {

	.layout {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
  
   aside {
      order: 99;
   }
   
   footer {
      order: 100;
   }
 
}

/* ============================================
   Tablet Styles: 481px to 780px
   ============================================
*/

@media only screen and (min-width: 481px) {

   nav.horizontal ul {
      display: flex;
      flex-flow: row nowrap;
   }
   
   nav.horizontal li {
      flex: 1 1 auto;
   }

}

/* ============================================
   Desktop Styles: 781px and greater 
   ============================================
*/

@media only screen and (min-width: 781px) {

   nav.horizontal ul {
      display: flex;
      flex-flow: row nowrap;
   }
   
   nav.horizontal li {
      flex: 1 1 auto;
   }

}