@charset "UTF-8";

/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/

@font-face {
  font-family: "Your Font Name";
  src: url("../fonts/yourfontname/yourfontname-roman.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Your Font Name";
  src: url("../fonts/yourfontname/yourfontname-italic.woff2");
  font-weight: normal;
  font-style: italic;
  font-display: block;
}

/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgba(255, 255, 255, 1);
  --color-text: rgb(28, 28, 28);
  --color-text-link: rgba(121, 121, 121, 0.8);
  --color-text-link-hover: rgba(54, 54, 54, 0.4);
  /* Font values */
  --font-text: "Your Font Name", "Helvetica", "Arial", sans-serif;
  --font-size: 10px;
  /* Margin value */
  --margin: 0.1em;
}

/* GENERAL STYLES */

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  width: 100%;
  height: auto;
  overflow-y: auto;
  background-color: rgb(255, 255, 255);
  hyphens: auto;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  font-size: 20px;
  color: black;
}

a:hover {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

h1 {
  font-size: 50px;
}

h2 {
  text-align: center;
  font-size: 34px;
}

h3 {
  /* h3 style */
}

h4,
h5,
h6 {
  text-align: left;
  font-size: 60px;
  /* h4-h5-h6 style */
}

p {
  text-align: justify;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 1rem;
  /* paragraph style */
}

p.paragraph-1 {
  color: blue;
  font-weight: bold;
  font-size: 18px;
}

ol,
ul {
  /* ordered list and unordered list styles */
  list-style-type: none;
  font-weight: 100;
}

blockquote {
  /* blockquote element style */
}

hr {
  /* horizontal rule style */
}

/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: var(--margin);
}

/* navigation */

nav {
}

/* content */

main {
  padding: 1rem;
}

summary {
}

/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* WEBSITE MEDIA QUERIES */

/* responsive typeface for various breaking points, sets the default 'rem' value */
@media (max-width: 299px) {
  :root {
    --font-size: 18px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 299px) and (max-width: 340px) {
  :root {
    --font-size: 19px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 340px) and (max-width: 440px) {
  :root {
    --font-size: 20px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 441px) and (max-width: 779px) {
  :root {
    --font-size: 19px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 200px) and (max-width: 992px) {
  :root {
    --font-size: 20px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --font-size: 21px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 1201px) and (max-width: 1320px) {
  :root {
    --font-size: 22px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}
@media (min-width: 1321px) {
  :root {
    --font-size: 24px;
  }
  html,
  body {
    font: var(--font-size) var(--font-text);
  }
}

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */
/* style this one first and then use the subsequent ones in a cascading way (from general to specific) */

@media (max-width: 779px) {
  /* your 'mobile' overriding css properties here */

  /* utility classes, mobile */

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

/* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

@media (max-width: 339px) {
  /* your overriding css properties here */
}

/* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */

@media (max-width: 779px) and (orientation: landscape) {
  /* your overriding css properties here */
}

/* use this query to apply style for 'small' desktop screens */

@media (min-width: 780px) and (max-width: 992px) {
  /* your overriding css properties here */
}

div.intro-wrapper {
  position: relative;
  width: 100%;
  height: auto;
}

img {
  width: 100vw;
  height: auto;
}

.abstract-paragraph {
  display: block;
  margin-block-start: 0.1em;
  margin-block-end: 0em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  width: 90%; /* Makes the paragraph half the width of the screen */
  margin: 0 auto; /* Centers the paragraph horizontally */
  text-align: justify; /* Aligns the text to the left */
}

.ab-two {
  display: block;
  margin-block-start: 0.1em;
  margin-block-end: 0em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  width: 100%; /* Makes the paragraph half the width of the screen */
  margin: 0 auto; /* Centers the paragraph horizontally */
  text-align: left; /* Aligns the text to
   the left */
}

.contents {
  text-align: left;
  margin-left: 20%;
}

.abstract {
}

.introduction {
  text-align: left;
}

.image-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Prevent blocking interactions with the image */
}

.image-links a{
  height:1rem;
  max-width: 25vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.link {
  position: absolute;
  background: rgba(0, 0, 0, 0);
  color: rgb(0, 0, 0);
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
  pointer-events: all; /* Make sure links are clickable */
  font-size: 14px;
  font-weight: bold;
}

.link:hover {
  background: rgba(188, 188, 188, 0.292);
}

nav {
  margin-top: 20px;
}

/* Button to toggle menu */
.toggle-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(253, 253, 253, 0.888);
  color: rgb(0, 0, 0);
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  border: none;
  animation: rise 1.5s ease-out forwards;
}

/* Hidden Navigation Menu */
#content-nav {
  position: fixed;
  bottom: 60px; /* Places menu above the button */
  left: 20px;
  background: rgba(255, 255, 255, 0.788);
  padding: 10px;
  border-radius: 5px;
  display: none; /* Hidden by default */
  animation: rise 2.5s ease-out forwards; /* Same animation for nav */
  animation-delay: 2s; /* Slight delay after button */
}

#content-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
}

#content-nav ul li {
  margin: 5px 0;
}

#content-nav a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-weight: bold;
}

#content-nav a:hover {
  text-decoration: underline;
}

@keyframes rise {
  0% {
    transform: translateY(100px); /* Start below the viewport */
    opacity: 0; /* Fade in effect */
  }
  100% {
    transform: translateY(0); /* End at natural position */
    opacity: 1; /* Fully visible */
  }
}

.imagez {
  width: 50%; /* Takes up half the screen width */
  height: 100%; /* Matches wrapper height */
  object-fit: contain; /* Maintains aspect ratio */
  position: absolute;
  top: 0;
  left: 0; /* Left-aligned */
}

.footnote2 {
  font-size: 6px;
}

.chapter1{
  top: 21vw; left: 34vw;
}

.chapter2{
  top: 22vw; left: 40vw;
}
.chapter3{
  top: 27vw; left: 59vw;
}
.chapter4{
  top: 30.5vw; left: 30vw;
}
.chapter5{
  top: 20vw; left: 54vw;
}

@media (max-width: 768px) {
  /* .intro-wrapper {
    display: none;
  } */

  .intro-wrapper{
    overflow:hidden;
  }

   .intro-image{
    width:200vw;
    margin-left:-50vw;
  }

  .chapter1{
    top: 41vw; left: 18vw;
  }
  
  .chapter2{
    top: 42vw; left: 40vw;
  }
  .chapter3{
    top: 47vw; left: 59vw;
  }
  .chapter4{
    top: 60.5vw; left: 24vw;
  }
  .chapter5{
    top: 57vw; left: 63vw;
  }

}

.topheading{
  font-size: 30px;
  position: absolute;
  /* padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 20px; */
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
  
  @media (max-width: 600px) {
    p {
        margin-left: 0; /* Remove left margin */
        margin-right: 0; /* Remove right margin */
        text-align: center; /* Center-align text */
    }
}

.quotes{
  font-style: italic;
  font-size: 20px;
  margin-left: 20%;
  margin-right: 20%;

}

.photographs{
  max-width: 400px;
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.sidenote-wrapper {
  cursor: pointer;
}

.margin-toggle {
  display: none;
}

.sidenote-number {
  font-size: 0.8rem;
  color: blue;
  cursor: pointer;
  margin-left: 3px;
}

/* .sidenote {
  display: none;
  float: right;
  clear: right;
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-family: Arial, sans-serif;
  font-weight: 300;
  line-height: 1.3;
  text-indent: 0;
  width: 200px; /* Adjust as needed */
 


.margin-toggle:checked + .sidenote {
  display: block;
}

.figure{
  font-size: 12px;
  text-align: center;
}

.footnote{
  text-decoration: none;
        color: blue;  /* Make footnote number blue */
        font-size: 0.8em; /* Make it smaller */
        margin-top: 1px;
          vertical-align: baseline;
        position: relative;
    top: 2px; 
       
}

.footnote a {
  text-decoration: none;
  color: rgb(88, 194, 208);  /* Make footnote number blue */
  font-size: 0.8em; /* Make it smaller */
  vertical-align: super; /* Raise it */
}

/* Styling for the footnote section at the bottom */
#footnotes {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 0.8rem;
}

#footnotes p {
  margin: 5px 0;
}

/* Back to reference arrow */
#footnotes a {
  text-decoration: none;
  color: gray;
  font-size: 0.8rem;
}