/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


  @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&family=Inconsolata:wght@200..900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=PT+Mono&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Silkscreen:wght@400;700&display=swap');
		
		
		p {
		  font-size:16px;
		  line-height:25px;
		  width:100%;
		  box-sizing: border-box;
		}
		
		body {
			font-family: "Inter", sans-serif;
		  /*background: #f8f6ed;*/
			text-align:left;
			margin:0px;
			display: flex;
      justify-content: center; /* Horizontally centers */
      align-items: center;     /* Vertically centers */
      min-height: 100vh;       /* Necessary to fill the screen */
      
      background:
        linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
        linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
        #e9e3c6;
      
      background-size:
          40px 40px,
          40px 40px,
          80px 80px,
          80px 80px,
          80px 80px,
          80px 80px,
          80px 80px,
          80px 80px;
      background-color: #e9e3c6;

    }
		
		a{
		  color:blue;
		  background-color:transparent;
		}
		
		a:hover{
		  color:white;
		  background-color:blue;
		  text-decoration:none;
		}
		
		.review {
	    margin:0px;
	    padding:0px;
	    box-sizing: border-box;
	    width:800px;
      align-items: center;
		}
		
		.bookbiobox {
      /*background-color:#ede8d1;*/
      text-align:center;
      width:100%;
      display:flex;
      align-items: center;
      border-top-left-radius:19px;
      border-top-right-radius:19px;
      border-left:1px solid gray;
      border-right:1px solid gray;
      border-top:1px solid gray;
      box-sizing: border-box;
      background:#f4f1e2;
      overflow: hidden;
    }
		
		.bookbio {
      font-size:16px;
      /*font-family: Silkscreen;*/
      font-family: "Inter", sans-serif;
      line-height:25px;
      text-align:left;
      padding-left:20px;
      
    }
    
    .bookbiobox img {
      height:230px;
      /*border-top-left-radius:12px;*/
      border-right:1px solid gray;
      box-sizing: border-box;
    }
		
		.text {
		  height:400px;
		  border:1px solid gray;
		  padding-right:30px;
		  padding-left:20px;
		  padding-top:5px;
		  padding-bottom:5px;
      overflow-y: auto; /* Adds vertical scroll only when content is > 300px */
      overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
      box-sizing: border-box;
      /*background: #E9E3C6;*/
      background:#f4f1e2;
		}
		
		.quote {
		  font-style: italic;
		  padding-right:20px;
		  padding-left:20px;
		  border-left:2px solid black;
		  margin-left:0px;
  		width:100%;
  		box-sizing: border-box;
		}
		
		.gohome {
		  height:40px;
		  border-bottom-left-radius:19px;
		  border-bottom-right-radius:19px;
		  border-left:1px solid gray;
		  border-right:1px solid gray;
		  border-bottom:1px solid gray;
		  padding:10px;
		  width:100%;
		  display:block;
		  box-sizing: border-box;
		  text-align:center;
		  text-decoration:none;
		  color:black;
		  /*background: #E9E3C6;*/
		  background:#f4f1e2;
		}
		
		.gohome:hover {
		  /*background-color:#d1ccb2;*/
		  background:blue;
		  color:white;
		}
		
		
		/* SCROLLBAR */
    
    /* width */
    ::-webkit-scrollbar {
      width: 7px;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
      background: transparent;
      
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      /*background: #a39e8a;*/
      background:gray;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #8b8876;
      transition-duration: .3s;
    }
		
		
		
		
		
		
		@media (max-width: 400px) {
		  p{ /*MOBILE*/
		    font-size:15px;
		    line-height:22px;
		    width:100%; 
		    }
		    
		  body{ /*MOBILE*/
		    margin:0px;
		    padding-left:20px;
		    padding-right:20px;
		    padding-top:0px;
        overflow-y:hidden;
		  }
		  
		  .quote{ /*MOBILE*/
		    width:100%;
		    font-size:14px;
		    line-height:20px;
		  }
		  
		  .bookbio { /*MOBILE*/
		    font-size:14px;
		    line-height:20px;
		    width:100%;
		    padding-left:15px;
		    padding-right:15px;
		  }
		  
		  .bookbiobox { /*MOBILE*/
        text-align:center;
        width:100%;
        display:flex;
        align-items: center;
      }
    
      .bookbiobox img { /*MOBILE*/
        height:250px;
      }
		  
		  .text { /*MOBILE*/
		    height:300px;
		    font-size:14px;
		    line-height:20px;
		    padding-right:30px;
  		  padding-left:15px;
  		  padding-top:0px;
  		  padding-bottom:0px;
		  }
		  
		}