/* || General setup */

body {
  margin: 0;
  background-image: url("Suns of Reqka/artiom-vallat-8ozHt4x0Tk8-unsplash.jpg");
  max-width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: auto;
}

img {
  max-width: 100%;
  height: auto;
}




html {
  font-size: 10px;
}



/* || typography */

h1,
h2 {
  font-family: "Garamond", serif;
  color: #fffaf0;
}

p,
li {
  font-family: "garramond", sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 5rem;
  text-align: center;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

p,
li {
  font-size: 1.6rem;
  line-height: 1.5;
}

p {
  text-indent: 2em
  }

.content {
  display: grid;
  grid-template-columns: auto 300px;
  max-width: 75%;
  margin: auto;
  border-width:12px;
  border-style:solid;
  border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;         
    
}


  


/*header {
    background-color: #cfcc76;
    color: #fff;
    padding: 10px 0;
}*/


.container {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    overflow: auto;
    }

.header {
  display: block;
  
  
}

.banner-container {
   text-align: center;
  width: 100%;
}

.banner-container img {
  display: inline-block; /* Or remove completely, as images are inline by default */
  max-width: 100%;
}
    
nav {
    float: left;
}


.nav-links {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: flex;
    margin-left: 20px;
    }


.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-family: "Brush Script MT";
    padding: 10px 15px;
    display: inline-block;
    border-radius: 15px;
    background-color: #4151cc;
    transition: background-color 0.3s;
}

.nav-links li a:hover {
    background-color: #1b2257;
}




#intro {
  width: 100%;

  padding: 0 20px;
  margin:0 auto;
  border-radius: 5px;
  background-color: #F2E9F7;
  }
  
  .aside-container{
  display:flex;
  flex-direction: column;
  background-color: #31053B;
  }
  
  #books{
    width: 100%;
    padding: 0 20px;
    margin:0 auto;
    border-radius: 5px;
    background-color: #877960;}
  
  #Reqka1 {
  width: 200px; /* Sets exact width */
  height: auto; /* Keeps the photo's original aspect ratio */
  max-width: 100%; /* Ensures the image never overflows its container on mobile */
}