@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');


* {
  font-family: 'Lato', sans-serif;
}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0px;
  margin:0px;
  background-image: url(../img/bookshelfOLD.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

  /*Navbar*/
 .container{
  width: 80%; 
  margin: auto; 
  overflow: hidden;
}

ul{
  margin:0;
  padding:0;
}  

/* Header **/
 header{
  background: rgba(25, 25, 25,0.2);
  color: rgba(255,255,255,0.85); 
  padding-top:30px;
  min-height:70px;
  border-bottom:#766662 3px solid;
}  

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}

header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}

header #branding{
  float:left;
}

header #branding h1{
  margin:0;
}

header nav{
  float:right;
  margin-top:10px;
}

header .highlight, header .current a{
  color: rgba(255,255,255,0.85);
  font-weight:bold;
}

header a:hover{
  color:#736464;
  font-weight:bold;

}

 @media screen and (max-width: 1200px)   {
  .main{
   width: 70%;
  }
 @media screen and (max-width: 600px)    { 
  .main {
  width: 100%;
    }
  }
}

  .main {
     /* display: flex;   */
  /*   display: row; */
     display: table;
      flex-direction: row;  
      background-color: rgba(255,255,255,0.8); 
      max-width: 1418px;
      height: 2000px;
      margin: 100px auto;
      border-top: 8px solid rgba(156, 146, 146);
      border-left: 8px solid rgba(55,43,43,0.69);
      border-right: 8px solid rgba(156, 146, 146);
      border-bottom: 8px solid rgba(55,43,43,0.69);   

 }


 #page-container {
  position: relative;
  min-height: 50vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10rem;            /* Footer height */
  padding: 20px;
  color:#ffffff; 
  background-color: rgba(25, 25, 25,0.2);
  text-align: center;
  border-top:#766662 3px solid; 
}


img {
    width: 100%;
    height:auto;
  }
  
  @media screen and (min-width:28em) {
    img {
      width:50%;
    }
  }
  
  @media screen and (min-width:50em) {
    img {
      width:33%;
    
    }
  }