.but, .goback-p, .goback-n, .goback-j, .goback-r, .note-clicker {
    background-color: #3c245c;
    border-radius: 10px;
    /* text-decoration: none !important; */
    color: white !important;
    font-size: 20px;
    padding: 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------------- */

/* what's on top of the title */
div.navtabs-title {
  /* background: url("gears-up.png"), url("graphy.png");
  background-position: bottom;
  background-repeat: repeat-x; */
  padding: 10px;
  text-align: center;
}

h1.skribilo-title {
  text-align: center;
  color: rgb(123, 104, 139) !important;
}

a:link, a:visited, a:active {
  text-decoration: none;
  /* color: #4a2f6b; */
  color: rgb(46, 85, 195);
}

/* ----- navbar (generated by skribilo) css ------- */
div.navtabs-tabs {
  background: white;
  line-height: 1.5em;
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

div.navtabs-tabs > a {
  margin: 15px 15px;
  text-decoration: none;
}

div.skribilo-body {
  padding: 15px 30px;
  margin: auto;
  /* font-size: 20px; */
  /* max-width: 800px; */
  background: white;
  line-height: 1.5em;
  text-align: justify;

  display: flex;
  flex-direction: row;
  justify-content: center;

  /* align-items: stretch;
  min-height: 100vh; */
  /* grid-template-columns: 1fr 1fr 1fr; */
  /* width: 33.33%; */
  /* grid-template-columns: repeat(3, 1fr); */
}

.indented-p {
    padding-right: 10px;
    text-indent: 10px;
}
.centered-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

.division, .journal-base, .journal-note, .work-exp {
    padding: 0 15px !important;
    width: 80% !important;
    max-width: 800px !important;

    /* flex: 0 1 80% !important; */
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.sidelines, .inverted-img, .sidelines-p, .inverted-img-p, .sidelines-n, .inverted-img-n, .sidelines-j {
    margin: 0px !important;
    padding: 0px !important;
    height: 100vh !important;
    width: 10% !important;

    text-indent: -9999px !important;
    background-color: rgba(123, 104, 139, 0.332) !important; 
    background-image: url('imgs/lav.jpeg') !important;
    /* background-image: none !important;
    background-color: transparent !important; */
}

.inverted-img {
    background-image: url('imgs/inv-lav.jpeg') !important;
}

.invisible {
  display: none !important;
  /* color: inherit !important; */
}

.hide-text {
  text-indent: -9999px !important;
}

.chapter-title, .chapter-title-p {
    color: rgb(123, 104, 139) !important;
}

.chapter-contents, .projects-contents {
  background-color: rgba(169, 147, 187, 0.364) !important;
  /* width: 100% !important; */
  height: auto !important;
  padding: 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  background-image: url("imgs/grid3.png") !important;
  background-repeat: repeat !important;
  border-radius: 10px !important;
}

.nextto {
  display: flex !important;
  justify-content: row !important;
  gap: 15px !important;
  justify-content: center !important;
  /* margin-top: 15px; */
}


/* ----------------project page-------------- */

.projects-contents {
  color: blue;
  background-color: rgba(153, 197, 214, 0.454) !important;
}

.but-p-container, .goback-p, .goback-n, .goback-j {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
}

.goback-p, .goback-n, .goback-j, .goback-r {
  background-color: blue !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.sidelines-p, .inverted-img-p {
  background-color: rgba(106, 171, 201, 0.332) !important;
  background-image: url("imgs/puter.png") !important;
  background-repeat: repeat !important;
  background-size: contain !important;
}

.inverted-img-p {
  background-image: url("imgs/inv-puter.png") !important;
}

.white-bg, .white-bg-n {
  background-color: white !important;
  /* /* width: auto !important; */
  margin: auto !important;
  /* height: 100% !important; */
  /* padding: 1px !important; */

  padding-left: 15px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  border-radius: 10px !important;
  color: #4d79b3 !important;
}
/* ----------------journal page-------------- */
.journal-base {
  background-color: #f2e9ad !important;
  background-image: url("imgs/grid3.png") !important;
  background-repeat: repeat !important;
  border-radius: 10px;
}

.sidelines-j {
  background-image: none !important;
  background-color: transparent !important;
}

.journal-note {
  background-image: url("imgs/notepad-2.png") !important;
  background-size: 100% 100% !important;
  /* background-size: contain !important; */
}

.goback-j {
  background-color: #4c2708 !important;
}
.note-button {
  margin-right: 7% !important;
}

.note-text {
  height: 95% !important;
  width: 85% !important;
  margin: auto;
  align-items: center !important;
  /* background-color: rgba(153, 197, 214, 0.5); */
  line-height: 2rem;
}

.white-bg-n {
  color: #4c2708 !important;
}

.note-area {
  /* background-color: rgba(106, 171, 201, 0.332) !important; */
  height: 90vh !important;
  margin-top: 15% !important;
  overflow-y: scroll !important;
  transform: translateY(0) !important;
}

.sidelines-n, .inverted-img-n {
  background-image: url("imgs/pencil.png") !important;
  background-color: transparent !important;
}

.inverted-img-n {
    transform: scaleX(-1) !important;
}

.align-date {
  float: right;
}

.goback-n, .note-clicker {
  background-color: lightslategray !important;
}

.note-clicker :hover {
  cursor: pointer !important;
}

.restrict-img-sz {
  max-width: 95% !important;
  max-height: 95% !important;
  object-fit: contain !important;
}
/* ------------------ resume ---------------- */
.years {
  min-width: 20% !important;
  display: flex;
  align-items: flex-start !important;
  flex-direction: column !important;
  text-align: left !important;
}

.work-type {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  font-size: medium !important;
}

.work-desc {
  width: 80% !important;
  display: flex !important;
  display: flex !important;
  flex-direction: column !important;
}

.work-content {
  display: flex !important;
  justify-content: row !important;
  /* margin-top: 15px; */
}
.goback-r {
  background-color: #000000 !important;
}
/* ------------------------------------------ */

.CTW-container {
  display: flex;
  flex-direction: column !important;
  justify-content: center;
  align-items: center;
  color: black !important;
}

.CTW-container strong a {
  color: rgb(123, 104, 139) !important;
}

.CTW-nav a {
  color: rgb(123, 104, 139) !important;
}



div.skribilo-ending {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------- */

@media (max-width: 600px) {
  .sidelines, .inverted-img, .sidelines-p, .inverted-img-p, .sidelines-n, .inverted-img-n, .sidelines-j {
    background-image: none !important;
    background-color: transparent !important;
  }
  

  .division, .journal-base, .note-text {
      font-size: 13px !important;
      min-width: 100% !important;
  }

  .white-bg, .white-bg-n {
      width: 100% !important;
      padding: 5px !important;
      text-align: left !important;
      font-size: 12px !important;
  }

  .chapter-title, .chapter-title-p, .chapter {
      font-size: 18px !important;
  }

  .nextto {
      flex-direction: column !important;
      gap: 5px !important;
      font-size: 12px !important;
      align-items: center !important;
  }

  .CTW-container {
    display: none !important;
  }

  h1.skribilo-title {
      font-size: 20px !important;
  }

  .but, .goback-p, .goback-n, .goback-j, .goback-r {
      font-size: 15px !important;
      padding: 10px !important;
  }

  .projects-contents, .indented-p, .chapter-contents, p {
      text-align: left !important;
  }

  .journal-note {
      /* background-size: cover !important; */
      min-width: 100% !important;
  }
}