/* PAGE */
body {
  background-color: #222222;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #BBBBBB;
  font-size: 16px;
  line-height: 2;

}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: none;

}
a:active {
  color: white;
  background-color: transparent;
  text-decoration: none;

}

.wrapper {
  max-width: 1000px;
  margin: auto;
}

/* MAIN TITLE */
h3 {
  text-align: center;
  font-size: 34px;
  font-weight: 400;
  margin: 0px;
  color: #FFFFFF;
}


/* SECTION HEADINGS */
.section-title {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #DDDDDD;
}

/* SECTION HEADINGS */
.link-text {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;  
  margin-left: 15px;  

  margin-right: 15px;
}
.link-head {
  margin-bottom: -13px;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 30px;
  font-weight: 300;
  color: #FFFFFF;
  font-family: "Crimson Pro", serif; 
}
.link-info {
  margin-top: 11px;
  margin-bottom: 11px;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 12px;
  font-weight: 300;
  color: #AAAAAA;

}



/* SMALL SUB HEADING */
.quote-head {
  margin-top: 0px;
  margin-bottom: -5px;
  margin-left: 15px;

  font-size: 30px;
  font-weight: 300;
  color: #FF99FF;
  font-family: "Crimson Pro", serif;

}
/* SCRIPTURE BLOCK */
p {
  margin: 	20px 4px 20px 15px;
  background-color: #222222;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #DDDDDD;
  font-size: 16px;
  line-height: 2;

}


/* SCRIPTURE BLOCK */
blockquote {
  margin: 	0px 4px 0px 15px;
  color: #FFAAFF;
  font-family: "Crimson Pro", serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.7;

}

/* CYAN HIGHLIGHT */
blockquote.highlight-cyan {
  color: #99FFFF;
    opacity:85%;

}

/* GOLD HIGHLIGHT */
blockquote.highlight-gold {
  color: #FF77AA;
  opacity:100%;

}
/* GOLD HIGHLIGHT */
blockquote.highlight-gold-bold {
  font-weight: bold;
  color: #FF77AA;
  opacity:100%;

}
/* DIVIDER LINE */
hr {
  border: none;
  height: 3px;
  background-color: #FFAAFF;
  margin: -9px 0 7px 0;
}

.line {
  border: none;
  border-top: 1px solid #FFAAFF;
  margin: -9px 0 7px 0;
}

/* VERSE NUMBERS */
.vn {
  font-size: 14px;
  color: #AAAAAA;
}

/* TEXT SELECTION */
::selection {
 text-shadow:  1px 2px 0px #000000, 	 0px 0px 9px #FFEE77;
 color: #DDFF66	;
}

.wrapped-img {
  width: calc(100% - 30px); /* full width minus 20px on each side */
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: -15px;
  height: auto;
  border: 1px solid #999999;
  border-radius: 12px;       /* rounded corners */
  //box-shadow: 2px 2px 0px #000000;
}

.moon-img {
  width: calc(100% - 30px); /* full width minus 20px on each side */
  height: auto;
  border: 0px;
}


table {
  width: calc(100% - 40px);
  margin: 0 20px 14px;
  border: 1px solid #99FFFF;
  border-radius: 12px;       /* rounded corners */
  border-collapse: separate; /* important! */
  border-spacing: 0;         /* removes gaps */
  overflow: hidden;          /* keeps corners clean */
  text-align: center;
  table-layout: fixed;   
  vertical-align: top;
  vertical-align: top;
}

td, th {
  border: 1px solid #99FFFF;
  padding: 4px;
  vertical-align: top;
  color: #99FFFF;    
}
.big {
  font-size: 32px;   /* adjust as needed */
  font-weight: bold; /* optional */
}
.med {
  font-size: 22px;   /* adjust as needed */
}
.small {
  font-size: 16px;   /* adjust as needed */
  font-weight: 100; /* optional */
}

/* 📱 Mobile view */
@media (max-width: 600px) {
  td, th {
	  
    font-size: 10px;  /* smaller text */
    padding: 10px 2px 10px 2px;
}
  table {
  width: calc(100% + 16px);
  margin: -8px -8px 14px;
   table-layout:fixed;   
  border-radius: 6px;       /* rounded corners */
}
.big {
  font-size: 22px;   /* adjust as needed */
}
.med {
  font-size: 15px;   /* adjust as needed */
}
.small {
  font-size: 10px;   /* adjust as needed */
  font-weight: 100; /* optional */
}

.wrapped-img {
  width: calc(100% + 12px); /* full width minus 20px on each side */
  margin-left: -6px;
  margin-right: 0px;
  margin-top: 5px;
  margin-bottom: -15px;
  height: auto;
  border: 1px solid #999999;
  border-radius: 12px;       /* rounded corners */
  //box-shadow: 2px 2px 0px #000000;
}
.moon-img {
  width:   calc(100% - 8px);; /* full width minus 20px on each side */
  height:  auto;
  border:  0px;
  margin:  4px;
  padding: 0px;
  
}

}