body {
  font-family: "Lato", 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: 60px;
   transition: 0.5s;
 }
 .sidenav a {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 20px;
   color: #000000;
   display: block;
   transition: 0.3s;
 } 
  .sidenav a:hover {
   color: #BAB86C;
   font-size: 20px;
 } 
  #main {
  transition: margin-left .5s;
  padding: 20px;
 }
 @media screen and (max-height: 450px) {
  .sidenav {
  padding-top: 15px;
 }
 .sidenav a {
  font-size: 18px;
  }
 }
 
.center { 
 margin: auto; 
 width: 70%; 
 height: auto; 
 border: transparent; 
 padding: 10px;
 text-align:center;
 font-family:arial,helvetica,sans-serif;
 font-weight:500;
 font-size:17px;
 color:purple;
 }
 
 .time {
  text-align:center;
  margin:auto;
  font-family:arial, helvetica, sans-serif;
  font-weight:bold;
  font-size:16px;
  color:#000022;
}

 
 .quote {
  text-align:center;
  font-family:verdana, sans-serif;
  font-weight:800;
  font-size:25px;
  color:#493d26;
  background:#FFFFAA;
}

.p1 {
  text-align:left;
  font-family:arial,helvetica,sans-serif;
  font-weight:500;
  font-size:17px;
  color:#000000;
  margin-left:10px;
}

.extract {
  text-align:right;
  font-family:arial;
  font-size:10px;
  color:#223344;
}

.div1 {
  border:8px solid#ffffe0;
}

.div2 {
  border:4px solid#bab86c;  
}

.div3 {
  border:8px solid#ffffe0;
}

.randquotes {
  text-align:center;
  font-family:arial,helvetica;
  font-size:16px;
  font-weight:600;
  color:#204020;
}