@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: 'tratatello';
    src: url('../fonts/tratatello/tratatello.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'happytimes';
    src: url('../fonts/happytimes/happy-times-NG_regular_master.otf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
  font-family: 'happytimes';
  src: url('../fonts/happytimes/happy-times-NG_italic_master.otf');
  font-weight: normal;
  font-style: italic;
  font-display: block;
}



/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgba(255,255,255,1);
  --color-text: rgba(0,0,0,1);
  --color-text-link: rgba(0,0,255,0.8);
  --color-text-link-hover: rgba(0,0,255,0.4);

  /* Font values */
  --font-text: 'happytimes', 'Times', serif;
  --font-heading: 'tratatello';
  --font-size-text: 21px;
  --font-size-heading: 8vw;
  --font-size-heading-small: 2.5vw;
--font-size-caption: 16px;

/* padding */
  --text-column-padding: 3.2vw;

  /* Margin value */
  --margin: 1rem;
  --column-background-color: white;
}



/* GENERAL STYLES */

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

html, body {
  scroll-behavior: smooth;
}

body {
  position: relative;
  /* background-color: var(--color-background); */
  font-family: var(--font-text);
  font-size: var(--font-size-text);
  color: var(--color-text);
  width: 100%;
  height: 100vh; /* Ensures the body takes up the full viewport height */
  hyphens: auto;
  counter-reset: figure-counter sidenote-counter;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;  /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background: url('../images/Background7.png') no-repeat center center;
  background-size: 100% 100%; /* Ensure the image stretches to cover the full viewport */
  z-index: -100; /* Places the background behind the content */
  pointer-events: none;
}

.landing-page {
  width: 100vw;
  height: 100dvh;
}


.info {
  background-color: rgb(247, 8, 8);
  color: rgb(255, 217, 0);
  font-style: normal;
  padding:3px;
  background-position: center;
  text-align: center;
}


.title {
  font-family: 'tratatello';
  color: #ffffff;
  text-shadow: 
      0 0 10px rgba(236, 2, 2, 0.7), /* Inner glow */
      0 0 50px rgba(32, 132, 165, 0.7), /* Outer glow */
      0 0 15px rgba(0, 0, 0, 0.522),      /* Green outer glow */
      0 0 20px rgb(111, 34, 34);      /* Stronger green glow */
  font-size:calc( var(--font-size-heading) * 1.1);
  font-style: italic;
  position: center;
  text-align: center;
  letter-spacing: 5px;
  line-height: 1.5;
  hyphens: none;

}

.title-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#abstract,
#introduction,
#chapter-i,
#chapter-ii,
#chapter-iii,
#chapter-iv,
#chapter-v {
  scroll-margin-top: 120px;
}

.navigation-image-mobile {
  display: none;
}

.nav-button {
  position: absolute;
  border-radius: 50%;
  width: 5%;
  height: auto;
  aspect-ratio: 1 / 1;
  background-color: #d30707;
  border-color: black;
  border-style: dashed;
  transform: translate(-50%, -50%);
  z-index: 400;
}

.nav-button:hover{
  background-color: red;
}

/* Adjust positions relative to the image */
#b1{
  top: 51%;
  left: 20.5%;
}

#b2 {
  top: 60.5%;
  left: 31.2%;
}

#b3 {
  top: 42.5%;
  left: 38.7%;
}

#b4 {
  top: 56.2%;
  left: 48.2%;
}

#b5 {
  top: 47.45%;
  left: 58.7%
}

#b6 {
  top: 54%;
  left: 70.3%
}

#b7 {
  top:37.5%;
  left: 77.45%;
}

.navigation {
  position: relative;
  margin: 0 22%;
  box-sizing: border-box;
  transition: all 0.6s ease-in-out;
  z-index: 999;
  will-change: transform;
}



.navigation.sticky {
  position: fixed;
  top: 0px;
  left: 0px;
  transform: scale(0.4) translate(-105%, -3%);
  transform-origin: top left;

} 

#nav-placeholder {
  display: none;
  height: 0;
}

.nav-container {
  width: 100vw;
  height: 80vh;

}

.middle-column-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: justify;
  padding-left: 26%;
  padding-right: 26%;
  clear: both;

}

.middle-column {
background-color: var(--column-background-color);
padding: var(--text-column-padding);
box-sizing: border-box; 
width: 100%;
clear: both;
margin-bottom: 12vh;
border-radius: 3vh;
}

.figure-side-right {

position: absolute;
width: 26vw;
right: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
}

.figure-side-left {
position: absolute;
width: 26vw;
left: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
flex-direction: column;
}

.figure-container {
  width: 50%;
  background-color: black;
  padding: 0.6vw;
  border-radius: 10px;
  margin-bottom: 3vh;
}

.left {
  margin-right: 2vw;
}

.right {
  margin-left: 2vw;
}

figcaption {
  background-color: white ;
  color: rgb(110, 111, 116);
  padding: 10px;
  border: 2px solid #000000;
  border-radius: 8px;
  border-style: dashed;
  font-size: var(--font-size-caption);
  margin-top: 1vh;
  text-align: left;
  font-style: italic;
}

figure {
/* background-color: white ;
color: rgb(110, 111, 116); */
border: 2px solid #000000;
border-radius: 10px;
border-style: dashed;
margin: 0;

}

.figure-container figure {
  counter-increment: figure-counter; /* Increment for each figure */
}

.figure-container figcaption::before {
  content: "[Fig. " counter(figure-counter) " ]";
  display: block; /* Moves the figure number to a new line */
  background: rgb(247, 8, 8);
  color: white;
  font-weight: bold;
  padding: 10px;
  width: fit-content;
  color: rgb(255, 217, 0);
  position: relative;
  top: -5px;
}

/* sidenotes */


.sidenote-number {
  counter-increment: sidenote-counter;
  color:rgb(247, 8, 8);
}

.sidenote-number:after,
.sidenote:before {
  position: relative;
  vertical-align: baseline;
}

.sidenote-number:after {
  content: counter(sidenote-counter);
  top: -0.5rem;
  left: 0.1rem;
}

.sidenote:before {
  content: counter(sidenote-counter) " ";
}

input.margin-toggle {
  display: none;
}

label:hover {
  color: rgb(0, 0, 255);
}

.sidenote,
  .marginnote {
    display: none;
  }

  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote {
        display: block;
        float: left;

        margin: 2em 2em 2em 2em;
        /* position: relative; */
    
    }

    .sidenote {
      font-size: var(--font-size-caption);
      word-wrap: break-word;
      box-sizing: border-box;
      border: dashed rgb(0, 0, 255);
      padding: 10px;
    }


/* sidenotes */


img {
  width: 100%;
  transition: 300ms ease-in-out;
  transform-origin: center;
  z-index: 100;
  position: relative;

}

figure img:hover{
  transform: scale(2.1);
  z-index: 200;
}

.references {
  border-radius: 50px;
  text-align: center;
  border-style: dashed;
  background-color: rgb(223, 218, 218);
  word-wrap: break-word;
  border-width: 30px;          /* Change this value to make it thicker or thinner */
  border-color: blue;  

}

.references-2 {
  border-radius: 50px;
  text-align: center;
  border-style: dashed;
  background-color: rgb(223, 218, 218);
  word-wrap: break-word;
  border-width: 30px;          /* Change this value to make it thicker or thinner */
  border-color: rgb(255, 217, 0);    
}




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

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


h1{
font-size: var(--font-size-heading);
font-family: var(--font-heading);
line-height: 1;
text-align: center;
margin-bottom: 11vh;
scroll-margin-top: 20vh;
}



h2{
  font-size: var(--font-size-heading-small);
  font-family: var(--font-heading);
  line-height: 1;
  text-align: center;
}

h3{
  /* h3 style */
}

h4, h5, h6{
  /* h4-h5-h6 style */
}

p{
  /* paragraph style */
}

ol, ul{
  /* ordered list and unordered list styles */
}

blockquote{
  /* blockquote element style */
}

hr{
  /* horizontal rule style */
}



/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */

}

/* navigation */
 
nav{
  
}

/* content */

main{
 
}

summary{
  
}

.landing-page-2 {
  width: 100vw;
  height: 50dvh;
}

.acknowledgement {
  background: radial-gradient(circle, #dcdbe6 0%, rgb(222, 45, 45) 80%);
  background-color: rgb(222, 45, 45);
  color: rgb(0, 0, 0);
  font-style: normal;
  padding: 15px;
  background-position: center;
  text-align: center;
  letter-spacing: 0.2px;

}






/* 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-text: 20px; --font-size-caption: 15px;} } 
@media (min-width: 299px) and (max-width: 340px) { :root{ --font-size-text: 20px; --font-size-caption: 15px;} }
@media (min-width: 341px) and (max-width: 440px) { :root{ --font-size-text: 20px; --font-size-caption: 15px;}}
@media (min-width: 441px) and (max-width: 779px) { :root{ --font-size-text: 24px; --font-size-caption: 18px;} }
@media (min-width: 780px) and (max-width: 992px) { :root{ --font-size-text: 16px; --font-size-caption: 12px;} }
@media (min-width: 993px) and (max-width: 1280px) {  :root{ --font-size-text: 18px; --font-size-caption: 14px;} }
@media (min-width: 1281px) and (max-width: 1320px) {  :root{ --font-size-text: 19px; --font-size-caption: 15px;} }
@media (min-width: 1321px) { :root{ --font-size-text: 20px; --font-size-caption: 15px;} }

/* 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) {

  :root {
    --text-column-padding: 6vw;
    --font-size-heading: 14vw;
    --font-size-heading-small: 6vw;
  }

  /* your 'mobile' overriding css properties here */

  .navigation {
    opacity: 0;
    position: relative;
    margin: 0;
    transition: 100ms;
    top: 0;
    /* display: flex;
    justify-content: space-between; */
    /* align-items: center; */
  }

  .navigation-image {
    display: none;
  }

  .nav-container {
    height: 0dvh;
  }

  .nav-button {
    position: static;
    border-radius: 50%;
    /* width: 25%;
    height: auto;
    aspect-ratio: 1 / 1; */
    background-color: #d30707;
    border-color: black;
    border-style: dashed;
    transform: translate(-0%, 25%);
    z-index: 400;
  }

  .button-container-mobile {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: space-between;
  
  }

  .navigation-image-mobile {
    display: block;
    position: absolute;
    z-index: 1;
  }

  /* #b1{
    top: 51%;
    left: 20.5%;
  }
  
  #b2 {
    top: 60.5%;
    left: 31.2%;
  }
  
  #b3 {
    top: 42.5%;
    left: 38.7%;
  }
  
  #b4 {
    top: 56.2%;
    left: 48.2%;
  }
  
  #b5 {
    top: 47.45%;
    left: 58.7%
  }
  
  #b6 {
    top: 54%;
    left: 70.3%
  }
  
  #b7 {
    top:37.5%;
    left: 77.45%;
  } */

  .navigation.sticky {
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    transform: none; /* Disable scaling and translation */
    width: 100%; /* Ensure the nav bar stretches the full width */
    z-index: 999; /* Make sure it stays on top */
    transform-origin: top center;
  }

  .middle-column-container {
    padding-left: 0;
    padding-right: 0;
  }

  .figure-side-right {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    }
    
    .figure-side-left {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-direction: column;
    }

    .figure-container {
      width: 100%;
      background-color: black;
      padding: 2vw;
      border-radius: 10px;
      margin-bottom: 3vh;
    }
    
    .left {
      margin-right: 0vw;
    }
    
    .right {
      margin-left: 0vw;
    }

  /* 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 */

}