@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro');

/* === GENERAL STYLE === */

:root {
  --ls-font-family: "Source Serif Pro", serif;
  --ls-page-text-size: 1.4rem;
  --ls-page-title-size: 1.8rem;
  --ls-main-content-max-width: 80vw;
  --ls-main-content-max-width-wide: 80vw;
  --ls-right-sidebar-width: 25%;
}

/* === PAGE STYLE === */

/* Disables indentation of blocks on mobile
and increase width of page blocks */
@media (max-width: 768px) {
  .block-children-container {
    margin-left: 0px !important;

    .block-children {
      padding-left: 0px !important;
      border-left: none !important;
    }
  }
  :root {
    --ls-main-content-max-width: 95vw;
    --ls-main-content-max-width-wide: 95vw;
  }
}

/* Turns off horizontal scrolling */

@supports not (overflow-x: overlay) {
  .scrollbar-spacing {
      overflow-x:auto
  }
}

@supports (overflow-x: overlay) {
.scrollbar-spacing {
    overflow-x: hidden;
  }
}

/* Font Size */

/* Sets font size for blockquotes */
blockquote {
  font-size: 1.2rem;
}

/* Sets font size for headings */
.editor-inner .h1.uniline-block, .ls-block h1 {
  font-size: 1.8rem;
  min-height: 1.5em;
  border: none;
}

.editor-inner .h2.uniline-block, .ls-block h2 {
  font-size: 1.7rem;
  min-height: 1.5em;
  border: none;
}

.editor-inner .h3.uniline-block, .ls-block h3 {
  font-size: 1.6rem;
  min-height: 1.5em;
  border: none;
}

.editor-inner .h4.uniline-block, .ls-block h4 {
  font-size: 1.5rem;
  min-height: 1.5em;
  border: none;
}

.editor-inner .h5.uniline-block, .ls-block h5 {
  font-size: 1.4rem;
  min-height: 1.5em;
  border: none;
}

.editor-inner .h6.uniline-block, .ls-block h6 {
  font-size: 1.4rem;
  min-height: 1.5em;
  border: none;
}

/* Hides page titles */
.page-title {
  display: none;
}

/* Shows page titles in left sidebar */
.left-sidebar-inner .nav-content-item .bd ul a .page-title {
  display: block;
}

/* Hides bullet points */
.bullet-container {
  display: none;
}

.block-content {
      white-space: normal;
}

/* Turns off image resize functionality */
.resize {
  overflow: unset;
}

/* Controls appearance of an image curtain */
.pswp {
  --pswp-bg: #fff;
}

/* Hides unnecessary links from left sidebar */

.nav-header .flashcards-nav { /* hides flashcards */
  display: none;
}
.nav-header .journals-nav { /* hides journal */
  display: none;
}

.nav-header .whiteboard { /* hides whiteboard */
  display: none;
}

/* Hides footer control panel and drop down menu on the right for mobile */

@media screen and (max-width: 768px) {
  .cp__footer {
    display: none;
  }
  .ui__dropdown-trigger{
    display: none;
  }
}

/* Hides right-hand settings menu items (...): "Add to favourites", "Delete page", "Presentation", "Join the community"*/

.menu-links-wrapper > a:first-of-type,
.menu-links-wrapper > a:nth-of-type(2),
.menu-links-wrapper > a:nth-of-type(3),
.menu-links-wrapper > a:last-of-type {

  display: none;
}

/* Hides "Help" in right sidebar*/

.cp__right-sidebar-settings.hide-scrollbar.gap-1 > .text-sm:last-of-type {
    display: none;
}

/* Mobile Right Sidebar */

@media (max-width: 768px) {
    .cp__header {
        --tw-shadow:0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
      }
    .cp__header-logo {
        display: block
    }
  .cp__right-sidebar {
    background-color: var(--ls-secondary-background-color,#d8e1e8);
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    transition: right .3s;
    z-index: var(--ls-z-index-level-1);
  }
  .cp__right-sidebar.open {
    right: 0;
    max-width: 60vw;
    width: 100%;
  }
}

/* DIVIDER */

.divider {
  height: 1px;
  background-color: #ccc;
  margin: 0;
}

/* IMAGES */

.block-content img {
  align-items: center;
  flex-wrap: wrap;
}

img {
  display: flex;
}

/* Remove delete button */
a.delete { display: none; }

/* Disable resizing */
.resize { resize:none; }

/* GRAPH SETTINGS */

/* Hide all settings in main graph */
/* .graph-filters { display: none; } */

/* Hide toggle filters in main graph */
.flex.items-center.justify-between.mb-2 {
    display: none;
}

/* Hide settings in page graph */
.flex.items-center.justify-between.mb-0 {
    display: none;
}

/* Hide recent pages */
.nav-content-item.recent { display: none; }

/* Hide context menu */
#custom-context-menu { display: none; }

/* Disable dragging of blocks (also disables zooming) */
.ls-block > div > div > a:not(.block-control) { pointer-events: none; }

/* Remove superfluous spacing on block embeds in Firefox */
.block-content.inline { white-space: revert; }

/* === LANDING PAGE STYLE === */

/* TITLE */

/* Sets a container for title */
.container-title {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 0 1vh 0;
}

/* Visual settings of title */
.content-title {
  word-wrap: break-word;
  white-space: pre-line;
  position: relative;
  width: 100%;
}

/* Sets font size for title */
.content-title h1 {
  font-size: 2.5rem;
  text-align: center;
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .container-title {
    margin-top: 0.5vh;
  }
  .content-title h1 {
    font-size: 2.25rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .container-title {
    margin-top: 0.75vh;
  }
  .content-title h1 {
    font-size: 2rem;
  }
}

/* Mobile Title */
@media screen and (max-width: 768px) {
  .container-title {
    margin-top: 1vh;
  }
  .content-title h1 {
    font-size: 1.5rem;
  }
}

/* AFFILIATION BLOCK */

/* Sets a container for affiliation block */
.affiliation-container {
  display: flex;
  flex-direction: column; /* Stack the items vertically */
  align-items: center; /* Center items vertically */
  justify-content: center; /* Center items horizontally */
  width: 50vw; /* Narrower width on larger screens */
  border-bottom: 1px solid var(--ls-quaternary-background-color); /* Adds a bottom border */
  margin: 1vh auto; /* Adds top and bottom margins and auto left and right margins to center the container */
}

/* Visual settings of affiliation block */
.affiliation-box {
  border: none;
  width: 50vw; /* Narrow width on larger screens */
  display: flex; /* Makes this a flex container */
  flex-direction: column; /* Stacks the items vertically */
  align-items: center; /* Centers items vertically */
  justify-content: center; /* Centers items horizontally */
  padding: 2vh 0vw 0vh 0vw; /* Adds padding to the top and bottom of the container */
}

/* Sets font size for affiliation block */
.affiliation-prefix,
.affiliation-name {
  font-weight: bold; /* Makes the text bold */
  font-size: 1.2rem;
  font-style: italic; /* Italicizes the text */
  text-align: center; /* Center the text */
  word-wrap: break-word; /* Breaks the text into multiple lines */
  display: inline-block; /* Makes the text inline with the image */
  color: #000000;
}

/* Sets image size for affiliation block */
.affiliation-img {
  width: 25%;
  height: 25%;
  display: inline-block; /* Makes the image inline with the text */
  padding: 0vh 0vw 0vh 0vw; /* Adds padding to the top and bottom of the image */
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .affiliation-img {
    width: 30%;
    height: 30%;
  }
  .affiliation-prefix,
  .affiliation-name {
    font-size: 1.1rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .affiliation-img {
    width: 35%;
    height: 35%;
  }
  .affiliation-prefix,
  .affiliation-name {
    font-size: 1rem;
  }
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .affiliation-container,
  .affiliation-box {
    width: 100%; /* Full width on smaller screens */;
  }
  .affiliation-container,
  .affiliation-box p
    {
        font-size: 0.9rem;
    }
  .affiliation-prefix,
  .affiliation-name {
    display: contents;
  }
  .affiliation-img {
    width: 45%;
    height: 45%;
  }
}

/* AUTHORS BLOCK */

/* Sets a container for authors block */
.author-container {
  display: flex; /* Makes this a flex container */
  flex-wrap: wrap; /* Allows the items to wrap as needed */
  justify-content: center; /* Centers items horizontally */
  align-items: center; /* Centers items vertically */
  margin: 2vh 0vw 1vh 0vw; /* Adds top and bottom margins and auto left and right margins to center the container */
}

/* Visual settings of authors image and names */
.author-img, .author-name {
  margin: 0vh 0.2vw 0vh 0.2vw;
}

.author-img {
  width: 3vw;
  height: 3vw;
  border-radius: 50%; /* Makes the image round */
  display: inline-block; /* Makes the image inline with the text */
}

.byline-prefix {
  font-weight: bold;
  font-size: 1.2rem;
  text-align: justify;
  word-wrap: break-word;
  white-space: normal;
  margin: 0 0.2rem 0 0.2rem;
  color: #000000;
}

.author-name {
  font-weight: bold;
  font-size: 1.2rem;
  text-align: justify;
  word-wrap: break-word;
  white-space: normal;
  margin: 0 0.2rem 0 0.2rem;
  color: #000000;
}

.author-box {
  border: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.author-link {
  text-decoration: none;
  color: #000000;
}

.author-link:hover {
  text-decoration: underline;
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .author-img {
    width: 5vw;
    height: 5vw;
  }
  .byline-prefix,
  .author-name {
    font-size: 1.1rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .author-img {
    width: 7vw;
    height: 7vw;
  }
  .byline-prefix,
  .author-name {
    font-size: 1rem;
    display: block;
  }
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .author-container {
    flex-direction: column;
    margin: 3vh 0vw 2vh 0vw;
  }
  .author-img {
    width: 10vw;
    height: 10vw;
  }
  .byline-prefix,
  .author-name {
    font-size: 1.5rem;
    display: block;
  }
}

/* AUTHORS QUOTE */

.container-sentence {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 1vh 1vw 2vh 1vw;
}

.content-sentence {
  justify-content: center;
  align-items: center;
  position: relative;
  width: 50vw;
  border: #000;
  border-style: dotted;
  padding: 2%;
}

.content-sentence p {
  font-size: 1.6rem;
  font-weight: bolder;
  text-align: left;
  color: #000000;
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .container-sentence {
    margin: 3vh 1vw 2.5vh 1vw;
  }
  .content-sentence {
    width: 60vw;
  }
  .content-sentence p {
    font-size: 1.5rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .container-sentence {
    margin: 3vh 1vw 3vh 1vw;
  }
  .content-sentence {
    width: 70vw;
  }
  .content-sentence p {
    font-size: 1.4rem;
  }
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .container-sentence {
    margin: 3vh 1vw 3.5vh 1vw;
  }
  .content-sentence {
    width: 100%;
  }
  .content-sentence p {
    font-size: 1.3rem;
  }
}

/* LINKAGES BUTTON*/

.button-landing {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #000;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0%);
  transition: all 0.3s ease-in-out;
  margin: 1vh 0vw 3vh 0vw;
}

.button-landing p {
  font-size: 1.3rem;
  font-style: bold;
  text-align: center;
  color: #000;
}

.button-landing:hover {
  border: 4px solid #000;
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .button-landing {
    margin: 1.5vh 0vw 6vh 0vw;
  }
  .button-landing p {
    font-size: 1.2rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .button-landing {
    margin: 2vh 0vw 7.5vh 0vw;
  }
  .button-landing p {
    font-size: 1.1rem;
  }
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .button-landing {
    margin: 2vh 0vw 7vh 0vw;
  }
  .button-landing p {
    font-size: 1rem;
  }
}

/* CONTENTS SVG */

.toc-container {
  flex: 1 0 20%; /* Grow and shrink equally, basis of 20% */
  box-sizing: border-box;
  margin: 1vh;
  position: relative;
  overflow: hidden;
}

.toc-svg-container {
  position: relative;
  height: 100%;
  overflow: hidden;
  align-self: center;
  justify-self: center;
  padding-top: 56.25%;
}
.toc-svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  padding: 5%;
  border: none;
  align-self: center;
  justify-self: center;
  transform: scale(1.4)
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .toc-svg {
        transform: scale(1.7);
    }
}

/* ABSTRACT */

.container-abstract {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: -4vh 0vw 2vh 0vw;
}

.content-abstract {
  display: flex;
  position: relative;
  word-wrap: break-word;
  white-space: normal;
  width: 50vw;
}

.content-abstract p {
  font-size: 1.6rem;
  text-align: justify;
  color: #000000;
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .content-abstract {
    width: 50vw;
  }
  .content-abstract p {
    font-size: 1.5rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .content-abstract {
    width: 100%;
  }
  .content-abstract p {
    font-size: 1.4rem;
  }
}

/* Mobile Abstract */
@media screen and (max-width: 768px) {
  .container-abstract {
    margin: 2vh 0vw 2vh 0vw;
  }
  .content-abstract {
    width: 100%;
  }
  .content-abstract p {
    font-size: 1.3rem;
  }
}

/* SUBTITLE */

.container-subtitle {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 1vh 1vw;
}

.content-subtitle {
  word-wrap: break-word;
  white-space: pre-line;
  position: relative;
  width: 50vw;
}

.content-subtitle h2 {
  font-size: 2rem;
  text-align: center;
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .content-subtitle {
    width: 50vw;
  }
  .content-subtitle h2 {
    font-size: 1.9rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .content-subtitle {
    width: 50vw;
  }
  .content-subtitle h2 {
    font-size: 1.8rem;
  }
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .content-subtitle {
    width: 100%;
  }
  .content-subtitle h2 {
    font-size: 1.7rem;
  }
}

/* MAIN TEXT */

.container-landing {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 1vh 1vw;
}

.content-landing {
  display: flex;
  position: relative;
  word-wrap: break-word;
  white-space: normal;
  width: 50vw;
}

.content-landing p {
  font-size: 1.5rem;
  text-align: justify;
  color: #000000;
}

.text-link {
  text-decoration: none;
  color: var(--ls-link-text-color, #106ba3);
}

.text-link:hover {
  text-decoration: underline;
}

.fn-link {
  text-decoration: none;
  color: var(--ls-link-text-color, #106ba3);
}

/* Media query for screens smaller than 1200px */
@media screen and (max-width: 1200px) {
  .content-landing {
    width: 50vw;
    font-size: 1.4rem;
  }
}

/* Media query for screens smaller than 992px */
@media screen and (max-width: 992px) {
  .content-landing {
    width: 100%;
    font-size: 1.3rem;
  }
}

/* Media query for screens smaller than 768px */
@media screen and (max-width: 768px) {
  .content-landing {
    width: 100%;
    font-size: 1.2rem;
  }
}

/* LINKAGES TABLE */

.linkages-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); /* Create a responsive grid layout */
  gap: 1vh; /* Space between grid items */
  max-width: 100%;
  margin: 1vh 0;
}

.linkages-block {
  background-color: #f8f8f8;
  padding: 2%;
  box-sizing: border-box;
  overflow: hidden;
}

.linkages-block h3 {
  font-size: 1.7rem;
  margin-bottom: 3%;
}

.linkages-block p {
  font-size: 1.4rem;
  line-height: 1.3;
  color: #000000;
}

.linkages-svg-container {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%;
}

.linkages-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10%;
  transform: scale(2.0);
  border: none;
}

@media screen and (max-width: 1200px) {
  .linkages-container {
    grid-template-columns: 1fr; /* Switch to a single column layout */
  }
}

/* FINAL BLOCK */

.gif-background {
  position: relative;
  width: 100%;
  height: 40vh; /* Make it cover the full viewport height */
  background: url("https://www.dropbox.com/s/dnhy5k7obvbngbm/intro.gif?raw=1") no-repeat center center fixed;
  background-size: cover;
  margin: 4vh 0vw 0vh 0vw;
}

.final-block {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  padding: 3%;
  background: rgba(255, 255, 255, 0.7);
}

.button-final {
  padding: 10px 20px;
  margin-top: 20px;
  display: inline-block;
  border: 2px solid #000;
  background-color: #fff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

.button-final p {
  font-size: 1.3rem;
  font-style: bold;
  text-align: center;
  color: #000;
}