
body.a {
  background-color: lightyellow;
  background-image: url("./binary2blurglowblur.png");
  background-repeat:no-repeat;	
  background-size:cover;
  background-position: center;
  /*position: relative;
	height: 100%;
	width: 100%;	*/
  margin: 0;
  padding: 0;
  text-align: center;

}
body.b {
  background-color: slategray;
  background-image: url("./binary2blurglowblur.png");
  background-repeat:no-repeat;	
  background-size: cover;	
  background-position: center;
  /*position: relative;
	height: 100%;
	width: 100%;	*/
  margin: 0;
  padding: 5%;
}

.header {
  background-color: black;	
  background-image: url("./laptop_opening.webp");
  /*background-size: contain;*/
  background-repeat:no-repeat;
  background-position:center; 
  padding-top: 7%;
  padding-bottom: 12%;
  color: white;
  font-size: 400%;
  width:100%;
}
#mission_header {
  background-color: black;
  background-image: none;  
  padding-bottom: 2%;
  text-align: center;
  color: #94b8b8;
  font-size: 90%;
  font-style: italic;
  width:100%;
}
#verse_explain {
  width: 60%;
  font-size: 90%;
  font-style: italic;
  color: darkslategray;
  margin-left: 20%;
}
.sub_header {
	background-color: white;
	padding-top: 20px;
    padding-bottom: 20px;
	font-size: 36px;
	text-align: center;
	color: gray;
	width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	/*color:#70AD47;*/ 
}
	
.header2 {
  text-align: center;
  color: lightyellow;
  font-size: 48px;
  width:100%;
}

.button {
  width:100%;
  padding: 8% 10%;
  font-size: 120%;
  text-align: center;
  cursor: pointer;
  outline: none;
  background-color: darkslategray;
  color: #fff;
  border: none;
  border-radius: 0px;
  overflow-wrap: break-word;
}
.button2 {
  width:100%;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  background-color: darkslateblue;
  color: #fff;
  border: none;
  border-radius: 0px;
}

.button:hover {background-color: darkred}

.button:active {
  background-color: blue;
}

.button2:hover {background-color: darkred}

.button2:active {
  background-color: blue; 
}
/*h1, h2, h3, h4, h5, ol, ul, li {
font-family: "Courier New", Times, serif;
}*/

span {
	margin: 0;
}

th, td {
  padding: 5px;
}
h1.a {
	font-style: bold;
	text-align: center;
	color: black;
}	
h1.b {
	font-style: bold;
	text-align: center;
	color: black;
}
h2.a {
	font-style: bold;
	text-align: center;
	color: lightyellow;
}
h2.b {
	font-style: bold;
	text-align: center;
	color: black;
}
.number1 {
	outline: none;
	background-image: url("One.jpg");
	text-align: center;
	/*font-size: 4px; */
	opacity: 1;
	/*width: 12px;*/
}

.number2 {
	outline: none;
	background-image: url("Two.jpg");
	text-align: center;
	/*font-size: 4px; */
	opacity: .3;
	/*width: 12px;*/
}

.number3 {
	outline: none;
	background-image: url("Three.jpg");
	text-align: center;
	/*font-size: 4px; */
	opacity: .3;
	/*width: 12px;*/
}
/*.circle:hover {
	border-width: thin;
*/	
}
h4.a {
    text-align: center;
	color: lightyellow;
}	
h4.b {
	font-family: normal;
    text-align: center;
	color: black;
}	
h4.c {
    text-align: center;
	color: darkslategray;
}	
	  
p.a {
		color: black;
		font-size: 24px;
		text-align: center;
}
p.b {
	    color: darkslategray;
}
p.c {
	    color: black;
		font-size: 20px;
		text-align:center;
}
p.d {
        color: black;
        font-size: 16px;
        text-align: center;
}	
p.e {
        color: white;
        font-size: 16px;
        text-align: center;
		font-style: italic;
}	
p.f {
        color: black;
        font-size: 16px;
        text-align: center;
		font-style: italic;
}			
.translation {
    color: darkred;
	text-align: center;
	font-size: small;
	/*line-height: 30%;*/
}

.verse {
	text-align: center;
	color: black;
}	

.computerfont {
	font-style: normal;
}
	
.italic {
	font-style:italic;
}	

.bold {
	 font-weight: bold;
	 font-size: large;
}	 

.hellowidth {
	
  width: 60% ;
  margin-left: auto ;
  margin-right: auto ;
}	
.versewidth {
	
  width: 70% ;
  margin-left: auto ;
  margin-right: auto ;
}	
.descriptionwidth {
	
  width: 55%;
  margin-left: auto ;
  margin-right: auto ;
}	
.firsttable {
	border: 1px solid black;
  border-collapse: collapse;
}  
.teachertable
  {
  border: none;
  }
.funkyText {
	font-family: normal;
	font-style: bold;
	text-align: center;
}	
#iframeonindex {
	position: relative;
	height: 100%;
	width: 100%;
}
#ytcsw {
	position: relative;
	height: 100%;
	width: 100%;
}
ul {
font-size: 120%;
font-style: bold;
background-color:white;
overflow-wrap: break-word;
text-align: center;
list-style-type: none;
list-style-position: inside;
list-style-type: disc;
}
.green {
	color:#70AD47;
}
ol {
font-size: 20px;
color: lightyellow;
}
li
{
font-weight: normal;
font-size: 80%;
color: black;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#courseList {
	font-family: "Courier New", Times, serif;
	font-style: bold;
	text-align: center;
	/*margin-left: 20%;
	margin-right: 20%;*/
	margin: 0 auto;

}

#infoBox {
	background-color: white;
	padding-top: 2%;
	text-align: center;
	margin: 0 auto;
	width: 90%;
	@media (min-width: 700px) {
	  background-color: white;
	  padding-top: 2%;
	  text-align: center;
	  margin: 0 auto;
	  width: 65%;
	}
}

#infoBox2 {
	padding-top: 2%;
	text-align: center;
	margin: 0 auto;
	width: 60%;
}

.glow {
            font-size: 400%;
            color: white;
            text-align: center;
            animation: glow 8s forwards;
        }
		@-webkit-keyframes glow {
            from {
                text-shadow: 0 0 20px #075596, /*alternatively rgb(val1, val2, val3)*/
                            0 0 30px #075596,
                            0 0 40px #077ecc,
                            0 0 50px #077ecc,
                            0 0 60px #077ecc,
                            0 0 70px #077ecc,
                            0 0 80px #077ecc,
							0 0 90px #077ecc,
					        0 0 100px #077ecc,
							0 0 110px #077ecc,
			                0 0 120px #077ecc;
            } /*
            to {
                text-shadow: 0 0 0px #ffffff;
                            
            }*/
        }
