:root {
  --Jan:	#ffffff;
  --Feb:	#F8CB2E;
  --Mar:	#EE5007;
  --Apr:	#f0f8ff;
  --May:	#EE5007;
  --June:	#c01f27;
  --July:	#000000;
  --Aug:	#717275;
  --Sep:	#7fffd4;
  --Nov:	#B22727;
  --Dec:	#B22727;
}




/* - - - - - - - General Styling - - - - - - - */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 90%;
            margin: auto;
            overflow: hidden;
		}
		.present {
			display: flex;
			flex-wrap: wrap;
        }
		
		.column {
			flex: 1 0 200px;
			margin: 10px;
			padding: 10px;
			border-radius: 10px;
			background-color: white;
		}

        header {
            background: #333;
            color: #fff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #bbb 1px solid;
        }
        header h1 {
            margin: 0;
            text-align: center;
        }
		
/* - - - - - - - - Bible Reading Styling - - - - - - - */	
#bible-readings {
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	padding: 20px;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	}
		
#bible-readings li {
	list-style-type: none;
	display: inline-block;
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	background-color: #dfdfdf;
	color: #232323;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	}
		

        .bible-studies {
            padding: 20px;
            background: #f4f4f4;
            margin-top: 20px;
			border-radius: 10px;
        }
		
		a {
			text-decoration: none;
		}
		
		.study1 {
			list-style-type: none;
		}
		
		.study2 {
			list-style-type: none;
		}
		
		.study2 li {
			background-color: #457893;
			margin-bottom: 5px;
			padding: 5px;
			border-radius: 8px;
			box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
		}
		
		.study2 a:link {
			color: white;
		}
		.study2 a:visited {
			color: white;
		}

/* - - - - - - Menu Styling - - - - - - - - */
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

/*---------------------------------------
  ACCORDION using Button
-----------------------------------------*/

button {
	/* background-color: #457893; /* colors the button*/
	margin-bottom: 5px;
	padding: 5px;
	border-radius: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
	color: #171205;
	font-size: 18px;
	cursor: pointer;
	width: 100%;
	border: black solid 2px;
	text-align: center;
	outline: none;
	transition: 0.5s;
}

.Jan {
	background-color: #65798C;
}

.Feb {
	background-color: #7F8C5E;
}

.Mar {
	background-color: #8C5871;
}

.Apr {
	background-color: #3F868C;
}

.May {
	background-color: #88498F;
}

.June {
	background-color: #f3d3bd;
}

.July {
	background-color: #b57f50;
}

.Aug {
	background-color: #d36135;
}

.Sep {
	background-color: #daefb3;
}

.Oct {
	background-color: #8b94a3;
}

.Nov {
	background-color: #2f4858;
	font-color: white;
}

.Dec {
	background-color: #710627;
	font-color: #fff;
}

/*
.active, .button:hover {
  background-color: #5686a4;;
}
*/
.panel {
  color: #dfdfdf;
  text-align:left;
  padding: 10px 8px;
  display: none;
  background-color: #7EA1C4;
  overflow: hidden;
}

.panel li {
	display: inline-block;
	padding: .2em;
	margin: 3px;
	border-radius: 10px;
	background-color: #dfdfdf;
	color: #232323;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}



	
		@media screen and (max-width: 600px) {
			.column {
				width: 100%;
			}
			
			.panel li {
				font-size: 0.8em;
				list-style-type: none;
				display: inline-block;
				padding: .5em;
				margin: 3px;
				border-radius: 10px;
				background-color: #dfdfdf;
				color: #232323;
				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			}
		}

		
		@media screen and (max-width: 600px) {
			.topnav a:not(:first-child) {display: none;}
			.topnav a.icon {
				float: right;
				display: block;
			}
		}
		
		@media screen and (max-width: 600px) {
			.topnav.responsive {position: relative;}
			.topnav.responsive .icon {
				position: absolute;
				right: 0;
				top: 0;
			}
			.topnav.responsive a {
				float: none;
				display: block;
				text-align: left;
			}
		}