*,
*::before,
*::after {
  box-sizing: border-box;
}


/* Base styling for body */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    /*
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    */
    background-color: #F6F6F6;

    -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

overflow-y: scroll;
    }
  
/* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: rgb(89, 89, 89);
}

/* selected link */
a:active {
  color: black;
}


img {
  width: 750px;
  margin-left: -100px;
} 

.title-noisli {
  color: #5adcb3;
  font-weight: 800;
  margin-bottom: 4px;
}

.title-bookgivers {
  color: #152250;
  font-weight: 800;
  margin-bottom: 4px;
}

.title-thoughts {
  color: black;
  font-weight: 800;
  margin-bottom: 4px;
}

.title-books {
  color: grey;
  font-weight: 800;
}

.single-book {
  margin-bottom: 4px;
}

.comment-books {
  margin-top: 4px;
}

.quote-books {
  margin-top: 4px;
  font-style: regular;
}


.date {
  color: grey;
  font-weight: 400;
  margin-top: 4px;
}

.subtitle {
  color: grey;
  font-weight: 400;
  margin-top: 4px;
}


/* Container for the header and title */
.container {
    display: block;
    width: 550px;
    height: 100%;
    margin: 60px auto 0;
  }

  /* Title box styling */
  .title-box {
    display: block;
    width: 137px;
    height: 48px;
    z-index: 100;
    position: absolute;
    margin-left: -202px;
  }
  
  .title-line1, .title-line2 {
    text-align: left;                 /* Align text to the left */
    font-weight: bold;                /* Make text bold */
    font-size: 16px;                  /* Font size */
    margin: 0;                        /* Remove default margin */
  }
  
  /* Styling for the lines */
  .title-line2 {
    margin-top: 4px;                  /* Space between the two lines */
  }
  

  .header {
    display: block;
    width: 550px;
    z-index: 0;
  }

  /* Centered header box */
  .header-nav {
    width: 100%;                     /* Full width for the header */
    display: flex;
    justify-content: flex-start;      /* Align items to the left */
    gap: 40px;                       /* 40px spacing between each nav item */
    align-items: center;
  }

  /* Header navigation links */
  .header-nav a {
    text-decoration: none;
    color: #000000;
    font-weight: bold;
  }

  /*.text-container {
    width: 550px;
    margin-top: 60px;
    display: block;
    line-height: 24px;
    background: red;
  }
    */
    .text-container {
  display: block;
  width: 550px;
  height: 100%;
  margin: 60px auto 0;
  line-height: 24px;
  font-weight: 400;
}

  .span-work-thoughts {
    display: block;
    width: 120px;
    height: 96px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 40px;
    z-index: 100;
    position: absolute;
    margin-left: -145px;
  }

  .span-reads {
    display: block;
    width: 120px;
    height: 96px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.5);
    margin-top: 0px;
    z-index: 100;
    position: absolute;
    margin-left: -90px;
  }


  a.menu-active {
    text-decoration: underline;
    cursor: default;
  }


  .span {
    font-size: 9px;
  }