/* colors the background */
html,body{
	width: 100%;
	height: 100%;
	background-color: #b7b5e4;
}

/****************** DIVS *******************/
/* main div uses % to adjust for PC screens*/
#main {
	width: 76%;
	min-height: 100px;
	margin: auto;
	background-color: #bbc2e2;
	overflow: auto;
	padding: 10px;
    border: 2px solid #f60;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 10px;
	-webkit-box-shadow: 10px;
	box-shadow: 9px 3px 15px #551;
}
.container1{
	width:94%;
	margin-left:3%;
	margin-right:3%;
	background-color: #cfccd6;
	min-height: 200px;
    border: 2px solid #f60;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 10px;
	padding-top: 10px;
}
.container{
	width:94%;
	margin-left:3%;
	margin-right:3%
	background-color: #aaa;
	min-height: 200px;
    border: 2px solid #f00;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding-top: 20px;
	padding-right: 20px;
}

.headings1{
	width: 90%;
	display: grid;
    grid-gap: 1%;
	padding-left:2%;
	grid-template-columns: 13% 16% 7% 43.5% 10% 10.5%;
    grid-template-rows: 35px;
	text-align: center;
	
}

.headings1 div{
    border: 2px solid #555;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	text-align: center;
	background-color: #999;
}
.headings2{
	width: 90%;
	display: grid;
    grid-gap: 1%;
	margin-top:1%;
	grid-template-columns: 20% 10% 12% 22% 22% 20%;
    grid-template-rows: 30px;
	background-color: #999;
}

.headings2 div{,
    border-left: 2px solid #999;
	padding-left:10px;
}

.headings3{
	width: 90%;
	display: grid;
    grid-gap: 1%;
	padding-left:2%;
	grid-template-columns: 13% 16% 7% 43.5% 10% 10.5%;
    grid-template-rows: auto;
	text-align: center;
	padding-top:4px;
	
}

.headings3 div{
    border: 80px solid #aaa;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	text-align: center;
	background-color: #aaa;
}

/* Existing CSS rules */

/* Add this CSS rule to control the size of the images */
.headings3 img {
    max-width: 100px; /* Adjust this value as needed */
    height: auto;
}


.right{
	text-align: right;	
	padding-right:10px;
}


/************** NAVIGATION *****************/
nav {
    width: 100%;
}

nav ul {
	text-align: center;
	margin: 0px;
	margin-left: 6%;
	padding: 0px;
}

/* Creates a list item */
nav ul li {
	display:inline;
	list-style: none;
    float: left;
	padding: 5px;
	margin-left:5px;
	margin-right:5px;
    text-align: center;
    border: 2px solid #eee;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
    width: 17%; /* fallback for non-calc() browsers */
    width: calc(85% / 5);
    box-sizing: border-box;
}


nav a:link, nav a:active, nav a:visited{
	font-family:Calibri;
	font-weight: bold;
	font-size: 1.4em;
	text-decoration: none;
}

nav a:link{
	color:#f60;
}

nav a:active{
	color:#f00;
}

nav a:visited{
	color:#777;
}

/***************** FONTS *******************/
h1, h2{
	font-family:Calibri;
	font-weight: bold;
}

h1{
	font-size: 2.0em;
	color: #f60;
	margin: 15 0 0 20;
}

h2{
	font-size: 1.2em;
	color: #555;
	margin: 0px;
}

h3{
	font-family: Calibri;
	font-weight: bold;
	font-size: 1.0em;
}


p{
	font-family:Calibri; 
	font-size: 1.0em;
	color: #000;
	margin: 5px 0px 0px 0px;
 }
hr{
    border: 1px solid #eee;	
}