body {
	padding: 5px;
	margin: 5px;
	font-size: medium;
	background: #000000;
}

header{
	width: 80%; 
	background-size:100%;
	text-align: center;
	padding-top: 10px;
    margin-left: 20%;	
}

h1
{
	color: #FD7D08;
	font-size: xx-large;
	text-shadow: 1px 1px #552c03;
}

h2
{
	color: #FD7D08;
	font-size: x-large;
	text-shadow: 1px 1px #552c03;
}

h3
{
	color: #FD7D08;
	font-size: large;
	text-shadow: 1px 1px #552c03;
}

nav a{
	background: #FFFFFF;
	opacity: .6;
	text-decoration: none;
	border-radius: 5px;
	color: #000000;
	display: inline-block;
	padding: 5% 10% 5% 10%;
	margin: 5% 10% 5% 10%;
	width: 30%;
	text-align: center;
}


nav a:hover{
	opacity: 1;
}


a{
	color: #000000;
}

.left{
	background: #D96E30;
	background: linear-gradient(#D96E30,#BF372A);
	width: 20%;
	display: block;
	float: left;
	height: 100%;
	text-align: center;	
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;
}

.right{
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    margin-left: 20%;
    color: #95CFFF;
	height: 100%;
}

.rightnarrower{
    padding-top: 1px;
    padding-left: 100px;
    padding-right: 100px;
    margin-left: 20%;
    color: #95CFFF;
	height: 100%;
}

.left img{
	display: block;
 	max-width: 80%;
 	border-style: none;
 	border-color: #000000;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #1E00FF;
  font-size: medium;  
  color: #F4FFF1;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #5C64FF;
}

.accordion:after {
  content: '\002B';
  color: #FFFFFF;
  font-weight: bold;
  font-size: medium;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}


/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: #FFFFFF;
  color: #000000;
  font-size: medium;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;

}

.mascots img{
  max-width: 80%;
}

tr {
    color: #95CFFF;
    text-align: right;    
}

tr:first-child{
	font-weight: bold;
}


tr:nth-child(odd){
        background: #4c0245;
}

tr:nth-child(even){
        background: #02064c;
}

td {
	padding-left: 5px;
	padding-right: 5px;
}


.gradebutton{
	background: #FFFFFF;
	opacity: .6;
	text-decoration: none;
	border-radius: 5px;
	color: #000000;
	display: inline-block;
	padding: 5px 10px 5px 10px;
	margin: 5px 10px 5px 10px;
	text-align: center;
}