body {
  font-family: times, sans-serif;
  transition: background-color .5s;
}
.sidenav {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1; top: 0;
 left: 0;
 background-color: #fff;
 overflow-x: hidden;
 padding-top: 40px;
 transition: 0.5s;
 }
 .sidenav a {
 padding: 8px 8px 8px 32px;
 text-decoration: none;
 font-size: 16px;
 color: #040404;
 display: block;
 transition: 0.3s;
 }
 .sidenav a:hover {
 color: #ffa321;
 }
 #main {
 transition: margin-left .5s;
 padding: 20px;
 }
 @media screen and (max-height: 450px) {
 .sidenav {
  padding-top: 15px;
 }
 .sidenav a {
 font-size: 18px;
 } 
 }
 
 .main {
   text-align: left;
   font-family: arial;
   font-size: 16px;
   color: #000000;
  }
  
  .special {
    text-align:center;font-family:verdana,sans-serif;
    color:#70000c;
    font-size:16px;
   }
  
  .other {
    text-align:center;font-family:arial,sans-serif;color:#200000;font-size:14px;
    }
  .input1 {
    border:2px solid#806517;border-radius:5px;font-family:arial;color:#254117;background:#ffffea;cursor:pointer;
    }
   
   .alert {
     text-align:center;font-family:arial,sans-serif;font-size:16;color:#254117;
    }
    
 .time {
  text-align:center;
  font-family:arial,helvetica,sans-serif;
  font-weight:600;
  font-size:16px;
  color:#000200;
  }
 
 .vcount {
   text-align:center;
   font-family:arial,helvetica,sans-serif;
   font-weight:500;
   font-size:16px;
   color:#010101;
   background:#ffffff;
   }
  
  .table1 {
    width:100%;
    }
    .table1 tr td {
      text-align:center;font-family:helvetica,sans-serif;font-size:25pt;color:#222222;background-color:#fbf6d9;border:1px solid#F0F0F0;border-radius:10px;
      }
    .table1 tr td:hover {
      background-color:#FFF8aa;
      font-size: 26pt;
      }  
          
  .div1 {
    border:6px solid#f0e2b6;
    } 
   
  .div2 {
     border:6px solid#edda74;
     }
     
  .div3 {
    border:6px solid#fafad2;
    }
    
  .scripture {
    text-align:center;
    font-family:arial,helvetica;
    font-size:20px;
    font-weight:300;
    color:#222222;
    }
    
  .scripture-intro {
    text-align:center;
    font-family:arial,helvetica;
    font-size:20px;
    font-weight:400;
    color:#800080;
    }
    
  .scripture-date {
    text-align:center;
    font-family:arial,helvetica;
    font-size:20px;
    font-weight:400;
    color:#008000;
    }  
  
  .div4 {
    border:6px solid#fffff0;
    }
    
  .div5 {
    border:6px solid#f8f0f3;
    }  
    
  .div6 {
    border:6px solid#fffaf0;
    }
  .tquotes {
    text-align:center;
    font-family:arial,helvetica;
    font-size:16px;
    font-weight:600;
    color:#404040;
    }
    
  .comment {
    padding-top:15px;
    padding-bottom: 15px;
    text-align: center;
    font-family: times;
    font-weight: 500;
    font-size: 20px;
    color: #040404;
    background-color: #ffffe0;
    border: palegoldenrod 2px solid;
    border-radius: 10px;
    box-shadow: 5px 5px  3px #808080;
    cursor: pointer;
    transition: background-color 3s, color 3s ease-in-out;
    }
    
  .comment:hover {
    background-color: #F0F0F0;
    color: #040404;
    font-size: 22px;
    font-weight: 600;
   }
   
  .trivia {
    padding: 10px 5px 20px 5px; 
    background-color: #ffffe0;
    border: #f9f8f7 5px solid;
    border-radius: 3px;
    text-align: center;
    font-family: times;
    font-size: 22px;
    color: #254117;
    font-weight: 500;  
   } 
     
  .trivia-intro {
    font-family: arial;
    font-size: 20px;
    font-weight: 600;
    color: #806517;
    text-shadow: 1px 1px #af9b60;
    text-align: center;
   }