*{box-sizing:border-box;margin:0;padding:0;color:#f5f5f5;background-color:#000}.grid-container{display:grid;grid-template-columns:350px auto;grid-template-rows:1fr auto;grid-template-areas:"sidebar main" "footer footer";height:100vh}.side-bar{grid-area:sidebar;padding:20px;background-color:#f5f5f5;font-family:Teko,serif;display:flex;flex-direction:column;justify-content:space-between;height:100vh;text-align:start}.side-bar h1{margin-top:20px}.side-info h2{margin-bottom:5%;font-family:Gruppo,serif;font-size:30px;padding:20px}.side-info p{margin-top:5%;margin-bottom:10%;padding:20px;background-color:#000;font-family:Gruppo,serif;font-size:30px}.main{grid-area:main;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100%}.book-cover{max-width:60%;height:500px;object-fit:cover;display:block;margin-bottom:20px;border:3px solid white;padding:5px}img{filter:grayscale(100%)}li{list-style:none}h1{font-size:35pt;font-weight:900;text-transform:uppercase;letter-spacing:2px;background:#fff;color:#000;margin:20px;padding:10px;display:inline-block;border:3px solid black;font-family:Teko,serif}h2{margin-top:40px;padding:10px;font-family:Gruppo,serif}h3{margin:90px 10px 10px;color:#f5f5f5;font-family:Gruppo,serif;font-size:40pt;text-transform:uppercase}h4{margin-top:40px;color:#d3d3d3;opacity:.75;font-family:Gruppo,serif;font-size:30pt}h5{color:#d3d3d3;opacity:.75;font-family:Gruppo,serif;font-size:20pt}h6{margin:40px 10px 10px;color:#d3d3d3;opacity:.75;font-family:Gruppo,serif;font-size:12pt}button.next-quote{margin-top:20px;padding:15px 30px;font-size:1.2rem;font-weight:700;background:#fff;color:#000;border:3px solid black;text-transform:uppercase;cursor:pointer;font-family:Teko,serif}button.next-quote:hover{background:#000;color:#fff;border:3px solid white}.footer{text-align:center;margin-bottom:20px;padding:20px;display:flex;align-items:center;font-family:Gruppo,serif;background-color:#f5f5f5;height:auto}.footer p{background-color:#f5f5f5;margin-left:40px;color:#000}@media screen and (max-width: 768px){.grid-container{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"sidebar" "main" "footer";height:100vh}.side-bar{grid-area:sidebar;width:100%;height:auto;padding:15px}.main{grid-area:main;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;margin-top:10px;margin-bottom:10px}.footer{grid-area:footer;text-align:center;width:100%;padding:10px}.book-cover{max-width:80%;height:auto}.quote-text{font-size:15pt;padding:10px}button.next-quote{padding:10px 20px;font-size:15pt}}
