/* 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:17px;
		  line-height:27px;
		  width:100%;
		  box-sizing: border-box;
		}
		
		body {
			font-family: "Inter", sans-serif;
		  background:#f8f6ed;
			text-align:left;
			margin:0px;
			display:flex;
			flex-direction: column;
      justify-content: center; /* Horizontally centers */
      align-items: center;     /* Vertically centers */
      min-height: 100vh;       /* Necessary to fill the screen */
      padding-top:40px;
      padding-bottom:80px;
      
      
      @media (max-width: 400px) {
        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;
		}
		
		
		.header{
	    width:50%;
	    box-sizing: border-box;
      padding-top:30px;
      background:transparent;
      display: flex;         /* Enable Flexbox */
      flex-direction: row;
      border-bottom:1px dashed #dddddd;
	  }
		
		.title{
		  font-size:17px;
		  height:40px;
		  width:50%;
		  box-sizing: border-box;
		  text-align:left;
		  text-decoration:none;
		  color:black;
		  background:transparent;
		}
		
		.title a{
		  color:black;
		  text-decoration:none;
		  background-color:transparent;
		}
		
		.title a:hover{
		  color:white;
		  background-color:blue;
		  text-decoration:none;
		}
		
		.links{
		  font-size:17px;
		  height:40px;
		  width:50%;
		  box-sizing: border-box;
		  text-align:right;
		  text-decoration:none;
		  color:black;
		  background:transparent;
		}
		
		.links a{
		  color:black;
		  text-decoration:none;
		  background-color:transparent;
		}
		
		.links a:hover{
		  color:white;
		  background-color:blue;
		  text-decoration:none;
		}
		
		
		
		
		
		
		
		
		.bookbiobox {
      text-align:center;
      width:50%;
      display:flex;
      align-items: center;
      box-sizing: border-box;
      padding-top:50px;
      
      /*border-bottom:1px solid #dddddd;*/
    }
		
		
		.bookbio {
      font-size:17px;
		  line-height:27px;
      font-family: "Inter", sans-serif;
      text-align:left;
      padding-left:40px;
    }
    
    .bookbiobox img {
      height:350px;
      box-sizing: border-box;
      border-radius:10px;
      box-shadow: 0px 0px 15px gray;
    }
		
		.text {
		  width:50%;
      box-sizing: border-box;
      padding-top:30px;
		}
		
		.quote {
		  font-style: italic;
		  padding-right:20px;
		  padding-left:20px;
		  border-left:2px solid black;
		  margin-left:0px;
  		width:100%;
  		box-sizing: border-box;
		}
		
		
		
	
		
		
		
		
		
		@media (max-width: 400px) {
		  p{ /*MOBILE*/
		    font-size:17px;
		    line-height:27px;
		    width:100%; 
		    }
		    
		  body{ /*MOBILE*/
		    margin:0px;
		    padding-left:20px;
		    padding-right:20px;
		    padding-top:0px;
        background:#f8f6ed;
		  }
		  
		  .review{ /*MOBILE*/
		    width:100%;
		  }
		  
		  .quote{ /*MOBILE*/
		    width:100%;
		    font-size:17px;
		    line-height:27px;
		  }
		  
		  .bookbiobox { /*MOBILE*/
        text-align:center;
        width:100%;
        display:flex;
        flex-direction:column;
        align-items: center;
        padding-top:50px;
      }
		  
		  .bookbio { /*MOBILE*/
		    font-size:17px;
		    line-height:27px;
		    width:100%;
		    padding-left:15px;
		    padding-right:15px;
		    text-align:center;
		  }
		  
      .bookbiobox img { /*MOBILE*/
        height:300px;
      }
		  
		  .text { /*MOBILE*/
		    width:100%;
		    font-size:17px;
		    line-height:27px;
  		  padding-top:5px;
		  }
		  
		  .header{ /*MOBILE*/
  	    
  	    width:100%;
  	    box-sizing: border-box;
        background:transparent;
        display: flex;         /* Enable Flexbox */
        flex-direction: row;
        border-bottom:1px dashed #dddddd;
  	  }
		  
		  .title{ /*MOBILE*/
  		  font-size:17px;
  		  height:40px;
  		  width:50%;
  		  box-sizing: border-box;
  		  text-align:left;
  		  text-decoration:none;
  		  color:black;
  		  background:transparent;
        padding-left:0px;
        
  		}
  		
  		.title a{ /*MOBILE*/
  		  color:black;
  		  text-decoration:none;
  		  background-color:transparent;
  		}
  		
  		.title a:hover{ /*MOBILE*/
  		  color:white;
  		  background-color:blue;
  		  text-decoration:none;
  		}
		  
		  .links{ /*MOBILE*/
  		  font-size:17px;
  		  height:40px;
  		  width:50%;
  		  box-sizing: border-box;
  		  text-align:right;
  		  text-decoration:none;
  		  color:black;
  		  background:transparent;
        padding-left:0px;
        
  		}
  		
  		.links a{ /*MOBILE*/
  		  color:black;
  		  text-decoration:none;
  		  background-color:transparent;
  		}
  		
  		.links a:hover{ /*MOBILE*/
  		  color:white;
  		  background-color:blue;
  		  text-decoration:none;
  		}
		  
		}