/* Used for the buttons in the navBar */
.nabBarButtons{
	padding: 1px 15px;
	margin: 10px 10px;
	font-size: 50px;
	border-radius: 10px;
	border-color: #D0D0FA;
	border-width: 2px;
	border-style: solid;
	text-decoration: none;
	background-color: #6B6A8A;
}
.nabBarButtons:link, .nabBarButtons:visited {
  color: #D0D0FA;
  font-size: 25px;
  text-decoration: none;
}
.nabBarButtons:hover {
  color: #6B6A8A;
  border-color: #6B6A8A;
  background-color: #272640;
  text-decoration: none;
}
.nabBarButtons:active {
  color: #D0D0FA;
  border-color: #D0D0FA;
}
/* Used for the button under the NavBar*/
.navBarToggle{
	background-color: #6B6A8A;
	border-color: #D0D0FA;
	border-style: solid;
	color: #D0D0FA; 
	width: 80px;
	height: 60px; 
	font-size: 50px;	
	border-radius: 10px; 
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0px;
}
.navToggle{
	display: flex;
	justify-content: flex-end;
}
#navagrationBar{
	display: none;
}
#navagrationBar.show {
	border-width: 5px;
	border-color: #D0D0FA;
	border-radius: 10px; 
	border-style: solid;
	display: flex;
	justify-content: flex-end;
	background-color: #494865;
}
/*For tablets*/
@media (min-width: 768px){
/* Used for the buttons in the navBar */
.nabBarButtons{
	padding: 1px 15px;
	margin: 10px 10px;
	font-size: 500px;
	border-radius: 10px;
	border-color: #D0D0FA;
	border-width: 2px;
	border-style: solid;
	text-decoration: none;
	background-color: #6B6A8A;
}
.nabBarButtons:link, .nabBarButtons:visited {
  color: #D0D0FA;
  font-size: 32px;
  text-decoration: none;
}
.nabBarButtons:hover {
  color: #6B6A8A;
  border-color: #6B6A8A;
  background-color: #272640;
  text-decoration: none;
}
.nabBarButtons:active {
  color: #D0D0FA;
  border-color: #D0D0FA;
}
/* Used for the button under the NavBar*/
.navBarToggle{
	background-color: #6B6A8A;
	border-color: #D0D0FA;
	border-style: solid;
	color: #D0D0FA; 
	width: 55px;
	height: 35px; 
	font-size: 25px;	
	border-radius: 10px; 
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0px;
}
.navToggle{
	display: flex;
	justify-content: flex-end;
}
#navagrationBar{
	display: none;
}
#navagrationBar.show {
	border-width: 5px;
	border-color: #D0D0FA;
	border-radius: 10px; 
	border-style: solid;
	display: flex;
	justify-content: flex-end;
	background-color: #494865;
}
}
/*for desktop*/
@media (min-width: 992px){
/* Used for the buttons in the navBar */
.nabBarButtons{
	padding: 1px 15px;
	margin: 10px 10px;
	font-size: 32px;
	border-radius: 10px;
	border-color: #D0D0FA;
	border-width: 2px;
	border-style: solid;
	text-decoration: none;
	background-color: #6B6A8A;
}
.nabBarButtons:link, .nabBarButtons:visited {
  color: #D0D0FA;
  font-size: 32px;
  text-decoration: none;
}
.nabBarButtons:hover {
  color: #6B6A8A;
  border-color: #6B6A8A;
  background-color: #272640;
  text-decoration: none;
}
.nabBarButtons:active {
  color: #D0D0FA;
  border-color: #D0D0FA;
}
/* Used for the button under the NavBar*/
.navBarToggle{
	background-color: #6B6A8A;
	border-color: #D0D0FA;
	border-style: solid;
	color: #D0D0FA; 
	width: 55px;
	height: 35px; 
	font-size: 25px;	
	border-radius: 10px; 
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 10px 0px;
}
.navToggle{
	display: flex;
	justify-content: flex-end;
}
#navagrationBar{
	display: none;
}
#navagrationBar.show {
	border-width: 5px;
	border-color: #D0D0FA;
	border-radius: 10px; 
	border-style: solid;
	display: flex;
	justify-content: flex-end;
	background-color: #494865;
}
}