@charset "utf-8";
/* CSS Document */

/*Remove the space around the body*/
*{
  margin: 0;
  padding: 0;
 
  }

/*CORE STYLES*/
html{box-sizing: border-box; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; }
body{background: #545c63; margin: 30px 30px;}
.grid-container {display: grid;  grid-template-columns: 1fr;  background: #242424;}
p{color: #D2D2D2; text-align: justify; padding-left: 1%; padding-right: 1%; padding-bottom: 1%; font-size: 1rem;}
a{color:#6F0;}
ul{padding: 1%; list-style-type: none; color: white;}
li{text-align: justify; padding-bottom: 1%; padding-right: 1%;}
h2{padding-left: 1%; padding-top: 1%;  color:#B9E6E6; font-size: 1rem; font-style: underline;}
h3{padding-left: 1%; padding-top: 1%;  color:#FF6; font-size: 1rem;}
.God{color: #FD8653; font-style: italic;}
.Jesus{color: #99FDFB; font-style: italic;}
.scripture{
	color: #FFA;
	font-family: Georgia, "Times New Roman", Times, serif; 
	font-style: bold;
	font-size: 1rem;
}
 #divider {
  margin-top: 2%;
  height: 2px;
  width: 1fr;
  background: blue;
  background: linear-gradient(90deg, hsl(0, 0%, 20%), hsl(0, 0%, 70%), hsl(0, 0%, 20%));
}
/*HEADER*/
.header{background: #9cb3d2;}
.header h1{color: #07263e; font-family: 'Dancing Script', cursive; font-size: 2rem; text-align: center; padding-top: 1%; padding-bottom: 1%;}

/* NAVIGATION BAR */
.topnav {
  overflow: hidden;
  background-color: #5b718f;
}

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

.active {
  background-color: #375b8c;
  color: #07263e;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 1rem;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
 background-color: #5a81b5; 
 color: white;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}


/*SHOWCASE*/
.showcase img{height: 400px; width: 100%; border-bottom: 1px solid #67D158;}

/*SECTION*/
.section p{color: #FF6;}
.section ul{}
.section li{}


/*PAGE*/
.page{padding-bottom: 2%;}


/*FOOTER*/
.footer{background: #9cb3d2;}
.footer p{color: #07263e; font-family: 'Dancing Script', cursive; font-size: 1rem; text-align: center; padding-top: 1%; padding-bottom: 1%;}





@media screen and (max-width: 600px) {
.header h1{font-size: 1rem;}
.topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
.topnav a.icon {float: right; display: block;}
.topnav.responsive {position: relative;}
.topnav.responsive .icon {position: absolute; right: 0; top: 0;}
.topnav.responsive a {float: none; display: block; text-align: left;}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: left;}
.showcase img{height: 200px; width: 100%;}
.section{padding: 1%;}
.section p{text-align: justify; padding: 1%; font-size: 0.875rem;}
.section h2{padding-left: 1%; font-size: 0.875rem; }
 #divider {
  margin-top: 3%;
  height: 2px;
  width: 1fr;
  background: blue;
  background: linear-gradient(90deg, hsl(0, 0%, 20%), hsl(0, 0%, 70%), hsl(0, 0%, 20%));
}
.page{padding-bottom: 2%;}
.footer p{font-size: 1rem;}
}