/* UNIVERSAL CLASSES */
.lightblue{background-color: #bbcbc2;}
.almostBlack{color: #070706;}
.green{background-color: #547c63;}
.orange{background-color: #968961;}
.gray{background-color: #84948c;}
.margin{margin:1%};
.bigmargin{margin-left: 8%;}
.padding{padding: .5%;}
.centercolumn{display:flex; flex-direction: column; justify-content: center;}
.column{display: flex; flex-direction: column;}
.center{display:flex; justify-content: center;}
.row{display: flex; flex-direction: row;}
.floatleft{display: flex; float: left;}
.floatright{display: flex; float: right;}
.font{font-family: 'Trebuchet MS', sans-serif;}
.headerfont{font-family: 'Alkalami', serif;}
.textwrap{display: flex; flex-wrap: wrap;}

/* BODY/HOME PAGE */
body{
	font-family: 'Trebuchet MS', sans-serif;
	background-color: #bbcbc2;
	margin: 0;
}
.BigBox{
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #547c63;
	font-family: 'Trebuchet MS', sans-serif;
}
.comm-container{
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-template-rows: 5fr;
	row-gap: 1%;
}
.comm-middle{
	grid-column: 2/3;
}
.CommSide{
	grid-column: 1fr;
}
.GreenSidebar{
	display: flex;
	background-color: #547c63;
	margin-left: 1%;
	margin-top: 1%;
	padding: 1%;
	float: left;
	width: 18%;
	flex-direction: column;
}
#OrangeHeader{
	display: flex;
	background-color: #968961;
	padding: 1%;
	float: right;
	width: 76.5%;
	flex-direction: column;
	border-radius: 25px;
}

/* BUTTONS */
.MainButtons{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.bottomButtons{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	margin-bottom: 2%;
}
.returnhome{
	color: #070706;
	font-size: 300%;
}
.homebuttons{
	display: flex;
	justify-content: center;
	text-decoration: none;
	color: black;
	padding: 2%;
	background-color: gray;
	margin: 3%;
	width: 20%;
	border-radius: 3%;
	font-size: 150%;
	font-family: 'Trebuchet MS', sans-serif;
}
.homebuttons:hover{
	display: flex;
	background-color: #bbcbc2;
}
.submit{
	display: flex;
	justify-content: center;
	background-color: #968961;
	font-size: 1rem;
	font-weight: bold;
	padding: .5rem;
	margin: 1rem;
  cursor:pointer;
}
.submit:hover{
	background-color: #84948c;
}
.quizsubmit{
	background-color: #bbcbc2;
}
.inputbutton{
	background-color: #bbcbc2;
	border-left: 3px solid #968961;
}
.MainButtons{
	display: flex;
	justify-content: space-evenly;
}

/* LINKS */
a{
	text-decoration: none;
	color: #070706;
}
a.login{
	display: flex;
	background-color: #968961;
	color: #070706;
	padding: 5px;
	align-items: center;
	height: 50%;
	margin: 3px;
}
.linkHover:hover{
	color: #343c38;
}
.sidebarList{
	padding: 5%;
	font-size: 18px;
}
/* HEADERS */
h2.loginBody{
	display: flex;
	color: #070706;
	padding: 2%;
	background-color: #343c38;
	margin: 2%;
	width: 20%;
	font-size: 150%;
	font-family: 'Trebuchet MS', sans-serif;
}
h1.lessonTitle{
	color: #070706;
	margin-left: 10%;
}
.sideTitle:hover{
	display: flex;
	border-color: #070706;
	border-width: 2%;
	background-color: #bbcbc2;
	color: #070706;
}
.sideTitle{
	display: flex;
	background-color: #bbcbc2;
	border-width: 2%;
	border-color: #070706;
	padding: 10%;
	margin-left: 10%;
	width: 100px;
	float: left;
	color: #070706;
}
.middleHeader{
	display: flex;
	padding-left: 7%;
}
p.middleBox{
	display: flex;
	padding: 1%;
	margin: auto;
}
h5.middleBox{
	display: flex;
	color: #343c38;
	margin: auto;
	padding-left: 1%;
	padding-right: 1%;
}
h4.middleBox{
	display: flex;
	color: #343c38;
	margin: auto;
	padding-left: 1%;
	padding-right: 1%;
	font-family: 'Trebuchet MS', sans-serif;
}
h2.middleBox{
	margin: auto;
}
h2.middleBox:hover{
	color: #343c38;
}
a.middleBox{
	display: flex;
	margin: auto;
	padding: 1%;
	justify-content: flex-end;
}
h6.middleBox{
	display: flex;
	padding: 1%;
	margin: auto;
}
.flextitle{height: 1rem;}

/* CONTAINERS */
.SmallBox{
	display: flex;
	flex-direction: row-reverse;
}
.lessonSide{
	display: flex;
	border-width: 2%;
	border-color: #070706;
	width: 12%;
	margin-right: 3%;
	margin-top: 5%;
	float: left;
	flex-direction: column;
}
.lessonBody{
	display: flex;
	flex-direction: row;
}
.lessonText{
	display: flex;
	flex-direction: column;
	float: left;
	overflow-wrap: break-word;
	width: 50%;
}
.quiz{
	display: flex;
	justify-content: center;
	background-color: #84948c;
	margin-top: 2%;
	padding: 2%;
	width: 50%;
	font-size: 110%;
}
.mainContent{
	display: flex;
	flex-direction: row;
}
.CommBody{
	display: flex;
	margin: 1%;
}
.CommLeft{
	display: flex;
	width: 20%;
	padding-right: 1%;
	flex-direction: column;
}
.CommMiddle{
	display: flex;
	width: 60%;
	border-left: 3px solid #547c63;
	border-right: 3px solid #547c63;
	flex-direction: column;
}
.CommRight{
	display: flex;
	width: 20%;
	padding-left: 1%;
	flex-direction: column;
}
.filterBody{
	display: flex;
	background-color: #968961;
	margin: 1%;
	padding: 2%;
}
.middleBox{
	display: flex;
	width: 90%;
	padding: 1%;
}
.commboxes{
	margin-bottom: 2%;
	padding: 1%;
}
.commfooter{
	display: flex;
	margin: 1%;
}
.settings-container{
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.right-container{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 4fr;
}
.right-nav{
	display: flex; 
	flex-direction: row;
	justify-content: start;
	max-height: 150px;
}
.landingContainer{
  background-image: url("images/indexBigPhoto.jpg");
  background-size:cover;
  display:flex;
  flex-direction:column;
  min-height:700px;
}
.landingContainerSpace{height:75%; display:flex; flex-grow:5;}
.landingContainerRow{ height:25%;	display: grid;
	grid-template-columns: 1fr 1fr; align-content:end;}
.landingContainerBox{
	display:grid; 
	margin:3.5rem;
	padding:1rem;
}
/* DIVs */
div.login{
	display: flex;
	flex-direction: column;
}

/* LISTS */
#nav ul{
	display: flex;
	list-style-type: none;
	padding: 0%;
	margin: 0%;
}
#nav li{
	display: flex;
	background-color: #968961;
	color: #070706;
	font-size: 120%;
	padding: 1%;
	justify-content: space-evenly;
	width: 60%;
	font-family: 'Trebuchet MS', sans-serif;
}
#nav li:hover{
	background-color: #bbcbc2;
}

/* FORMS */
.loginform{
	display: flex;
	float: left;
	flex-direction: column;
	background-color: #547c63;
	margin: 2%;
	padding: 2%;
	font-family: 'Trebuchet MS', sans-serif;
}
.formrow{
	line-height: 5px;
}
.formTitle{
	padding: none;
}
.formtable{
	padding: 2%;
}
.formrowinput{
	margin-left: 2%;
}
.form{
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	width: 30%;
}

/* IMAGES */
.lessonImg{
	display: flex;
	width: 60%;
	justify-content: flex-end;
	flex-direction: column;
	padding-left: 5%;
}
.indeximages{
	margin: auto;
	max-height: 350px;
	max-width: 100%;
	border: 4px solid #070706;
}
.indeximages:hover{
	border: 4px solid #968961;
}

/* TABLES */
#showTeams td, #showTeams th{
	border: 1px solid #bbcbc2;
  padding: 8px;
}
#showTeams th{
	padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #968961;
  color: #070706;
}
#showTeams tr:nth-child(even){background-color: #84948c;}

/* RANDOM */
.hello{
	display: flex;
	margin-right: 15px;
	align-items: center;
}
.voteIcon{
	display: flex;
	justify-content: flex-end;
	margin: 10px;
}
.like{
	color: #547c63;
}
.onlesson{
	background-color: #84948c;
}
.completed{
	background-color: #547c63;
}
.uncompleted{
	background-color: #968961;
}
input, select{
	display: inline-block;
	border: 1.5px solid #547c63;
	background-color: #bbcbc2;
}
.text{
	margin-left: 2%;
	width: 5%;
}
.makeTeam{
	padding: 2%;
}
.findTeam{
	padding: 2%;
}
#showTeams{
	border-collapse: collapse;
	width: 100%;
}
.borderRadius{ border-radius: 50px;}