@font-face {
  font-family: "acumin-pro", sans-serif;
  src: url('https://use.typekit.net/acr0pub.css');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
  
@font-face {
  font-family: "acumin-pro-condensed", sans-serif;
  src: url('https://use.typekit.net/acr0pub.css');
  font-weight: 400;
  font-style: normal;
}
  @font-face {
  font-family: "acumin-pro-extra-condensed", sans-serif;
  src: url('https://use.typekit.net/acr0pub.css');
  font-weight: 400;
  font-style: normal;
  }
  
@font-face {
  font-family: "ibm-plex-serif", sans-serif;
  src: url('https://use.typekit.net/acr0pub.css');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  src: url('https://use.typekit.net/acr0pub.css');
  font-family: "ibm-plex-serif", sans-serif;
  font-weight: 400;
  font-style: italic;
}


  
 
/* VARIABLES */
  
:root {
/* Color values */
  --color-background:  rgb(255, 255, 255);
  --color-text:rgb(0, 0, 0);
  --color-accent:  rgb(138, 195, 255);
/* Font values */
  --font-size: 20px;
/* Margin value */
  --margin: 0.5vw;
  --padding: 0.5vw;
  --font-family: "acumin-pro", sans-serif;
  }

/* ELEMENTS */

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

.header {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  padding: 1rem;
  box-sizing: border-box;
  
  background-color: var(--color-accent);
  color: var(--color-background);
} 

.header-content{
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  align-content: left;
  width: 100%;
  height:100vh;
  padding: 2rem;
  box-sizing: border-box;
}

.info-bar {
  position:absolute;
  top: 1rem;
  left: 1rem;
  width: calc(100% - 2rem);
  display: flex;
  justify-content: space-between;
  font-size: max(0.9rem, 1.2vw);
  z-index: 2;
  background-color: var(--color-accent);
  color: var(--color-background);  
  font-family: "acumin-pro-condensed", sans-serif;
}

body {
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  text-align: left;   
  background-color: var(--color-text-link);
}

main {
  background-color: yellow;
  overflow-y: visible;
  width: 100%;
  position: relative;
  margin-top: 82vh;
  border-radius: 10rem;
  padding: 1rem 0;
}

.background {
  overflow-y: visible;
  width: 92%;
  height: calc(100% - 4rem);
  position: relative;
  background-color: var(--color-background);

  border-radius: 6rem;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 2rem;
}

.content {
  grid-column: 2 / 4; 
  display: flex;
  flex-direction: column; 
  width: 100%;
  margin-top: 4rem;
}

.bar {
  width: 80%; 
  margin: 2.5rem auto; 
  padding: 0rem; 
  text-align: center; 
  border: 0.25vw solid var(--color-accent); 
  border-radius: 2.75rem; 
  font-family: "acumin-pro-condensed", sans-serif;
  font-weight: 400;
  font-size: max(1.5rem, 3.5vw);
  color: var(--color-accent);
}

.note {
  margin-top: 3rem;
  margin-bottom: 7rem;
  border: solid 0.25rem var(--color-accent);
}

.figure {
  display: none;
  float: right;
  width: 50%;
  margin-right: -50%;
  padding: 1rem;
  font-size: 0.8em;
  box-sizing: border-box;
  line-height: 130%;
  text-align: left;
}

.figure img {
  max-width: 100%;
  height: auto;
}

/* TEXT */

p {
  font-size: max(0.95rem, 1.1vw);
  line-height: 135%;
  font-family: "ibm-plex-serif", sans-serif;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 4rem;
  hyphenate-limit-chars: 6 3 3;
}

h1 {
  font-family: "acumin-pro", sans-serif;
  font-size: 11.2vw;
  line-height: 70%;
  font-weight: 800;
  text-align: center;
  margin: 0;
}

h2 {
  font-family: "acumin-pro", sans-serif;
  font-size: max(2rem, 3vw);
  line-height: 100%;
  margin: 0 0.5rem;
  text-align: center;
  padding: 1rem;
}

h3 {
  font-family: "acumin-pro", sans-serif;
  font-size: max(1.3rem, 2.2vw);
  line-height: 105%;
  text-align: center;
  margin: 0;
}

h4 {
  font-size: max(1rem, 1.2vw);
  text-align: center;
  font-family: "acumin-pro-condensed", sans-serif;
  font-weight: 400;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  
}

h5 {
  font-size: max(1.4rem, 2.3vw);
  text-align: center;
  font-family: "acumin-pro-condensed", sans-serif;
  font-weight: 400;
  margin: 2rem auto;
  color: var(--color-background);
  background-color: var(--color-accent);
  border-radius: 50%; 
  padding: 0em 0em 0.1em 0em; 
  /*display: inline-block; */
  width: 20%;
}

.thesis-maintitle {
  margin-top: 11rem;
}

.r-circle{
  font-size: 0.4em;
  vertical-align: text-top;
  color: rgb(255, 255, 255);
}
    
.thesis-subtitle {
  font-size: max(2.5rem, 4vw);
  text-align: center;
  font-family: "acumin-pro-extra-condensed", sans-serif;
  font-weight: 400;

}

p.notes {
  font-size: max(1rem, 1.7vw);
  text-align: center;
  font-family: "ibm-plex-serif", sans-serif;
  font-style: normal;
  color: var(--color-accent);
  margin-bottom: 2rem; 
  margin-top: 0;
  padding-top: 0rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  hyphens: none!important;
}

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

.links {
  color: var(--color-accent);
  font-style: italic;
}

#email-container {
  text-align: center; 
  margin-top: 0.5rem; 
  margin-bottom: 4rem;
}

#email-container a {
  font-family: "ibm-plex-serif", sans-serif;
  color: var(--color-text); 
  text-decoration: none; 
  font-size: max(1rem, 1.2vw); 
  transition: color 0.3s ease; 
}

#email-container a:hover {
  color: var(--color-accent); 
}

.arrow {
  font-size: max(2rem, 3vw);
  text-align: center;
}

.arrow-right {
  margin-left: 0.2rem ;
  margin-right: 0.2rem ;
}

.figure-ref {
  font-size: max(0.8rem, 0.9vw);
  border: 0.1vw solid var(--color-text);
  padding-top: -0.3rem;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  font-family: "acumin-pro", sans-serif;
}

.figure-ref:hover {
  background-color: yellow;
  padding-top: -0.3rem;
}
.figure-ref:hover + .figure {
  display: block;
}

.yasmin-small {
  font-family: "ibm-plex-serif", sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--color-accent);
}

.yasmin-big {
  font-family: "ibm-plex-serif", sans-serif;
  font-style: italic;
  color: yellow;
  padding: 0em 0em 0.1em 0em; 
  display: inline-block;  
}

.yasmin-note {
  font-family: "ibm-plex-serif", sans-serif;
  font-style: italic;
}

.footnote-ref:hover + .sidenote-right{
  display:block;
}

.list {
  grid-column: 1 / 2;
  position: sticky;
  top: 20px;
  align-self: start;
  margin-top: 6rem;
  margin-left: 2rem;
  padding: 0;

  font-size: 1em;
  line-height: 170%;
  font-family: "acumin-pro", sans-serif;

  list-style-type: none;
}

.navigation {
  background: transparent; 
  border-radius: 50%; 
  padding: 0.5rem 1rem; 
  transition: background 0.3s ease, border-radius 0.3s ease, padding 0.3s ease; 
  position: relative; 
}

.navigation.active[href*="chapter-"],
.navigation.active[href="#abstract-title"],
.navigation.active[href="#intro"],
.navigation.active[href="#conclusion"],
.navigation.active[href="#bibliography"] {
  background: yellow; 

}

.navigation.active[href*="note-"] {
  background: var(--color-accent); 
  color: white;
}

.navigation:hover::before {
  content: "▶"; 
  position: absolute; 
  left: -1.5rem; 
  top: 50%; 
  transform: translateY(-50%); 
  font-size: 1.2rem; 
  color: var(--color-text); 
}

.numbers {
  margin: 0 1rem;
}

.sidenote-right{
  font-family: "acumin-pro", sans-serif;
  display: none;
  float:right;
  width:50%;
  margin-right: -50%;
  padding:1rem;
  box-sizing: border-box;
  font-size: max(0.3rem, 0.8vw);
  line-height: 120%;
  text-align: left;
}

.footnote-ref {
  font-family: "acumin-pro", sans-serif;
  font-size: max(0.8rem, 1vw); 
  border-radius: 100%; 
  width: max(1.3rem, 1.5vw);  
  display: inline-block; 
  align-items: center; 
  text-align: center; 
  background-color: aliceblue;
  box-shadow: inset 0 0em 0.3em var(--color-accent);
  margin-top: max(-1.2rem, -0.3vw);
  margin-bottom: max(-1.2rem, -0.3vw);
}

.footnote-ref:hover {
  background-color: var(--color-background);
  border-radius: 100%;
  width: max(1.3rem, 1.5vw);
  display: inline-block;
  text-align: center;
  color: var(--color-background);
  box-shadow: none;
  margin-top: max(-1.2rem, -0.3vw);
  margin-bottom: max(-1.2rem, -0.3vw);
}



.sidenote-right, .sidenote-right *{
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

#abstract-title {
  margin-top: 1.5rem;
}

#bibiography-text {
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}




  /* 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: 10px;} 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: 780px) 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) */

/* MOBILE STYLES */
@media (max-width: 779px) {

.background {
  display: block; 
  width: 90%; 
}

.note {
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 4rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}


body {
  text-align: center;
}

p.notes {
  padding: 0.5rem;
  hyphens: none!important;
}

p {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  margin-bottom: 2rem;
  text-align: justify; 
  hyphens: auto; 
  -webkit-hyphens: auto; 
  -moz-hyphens: auto; 
  -ms-hyphens: auto; 
  hyphenate-limit-chars: 6 3 3;
}


h1 {
  font-size: 2.5rem;
  line-height: 70%;
}

h2 {
  padding-bottom: 0;
}

h5 {
  margin: 1rem auto;
  padding: 0.2em 0.2em 0.2em 0.2em;
}


.sidenote-right,
.sidenote-left {
  display: none; 
  float: none; 
  width: 100%; 
  margin: 0; 
  padding: 0.5rem 0; 
  font-size: 0.9em; 
}


.footnote-ref {
  display: inline-block; 
  margin-left: 0.1rem;
  align-items: center; 
  text-align: center;
}


.content {
  width: 100%; 
  padding: 0; 
  grid-column: 1; 
  margin: 0;
}


.list {
  display: none;
}


.info-bar {
  font-size: 0.8rem; 
}


.thesis-maintitle {
  margin-top: 7rem; 
}

.thesis-subtitle {
  font-size: 1.7rem; 
}

main {
  background-color: yellow;
  overflow-y: visible;
  width: 100%;
  position: relative;
  margin-top: 92vh;
  border-radius: 7rem;
  padding: 0.5rem 0;
  border-radius: 5rem;
}

.background {
  border-radius: 3rem;
}
  
.content {
  margin-top: 1.5rem;
}

.bar {
  margin:  1rem auto;
}

.figure {
  display: none;
  flex-direction: column;
  align-items: center; 
  text-align: left; 
  width: 100%; 
  margin: 0 auto; 
}


.figure-ref:hover + .figure {
  display: flex; 
}


.figure img {
  width: 50%; 
  margin: 0 auto; 
}

.figure .figure-text {
  width: 50%; 
  text-align: left; 
  margin-top: 0.5rem; 
}

.navigation {
  background: transparent; 
  border-radius: 50%; 
  padding: 0.5rem 1rem; 
  transition: background 0.3s ease, color 0.3s ease;
  color: var(--color-text); 
}

.navigation:hover::before {
  display: none;
}

.sticky-nav {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  background-color: var(--color-background);
  border-bottom: 0.25rem solid var(--color-accent);
  z-index: 1000;
  transition: top 0.3s ease;
}

.sticky-nav.visible {
  top: 0;
}

.sticky-nav .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.5rem;
  margin: 0;
  list-style-type: none;
}

.sticky-nav .navigation {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.navigation[href*="note-"]:hover {
  background: var(--color-accent); 
  color: var(--color-background); 
}

.navigation[href*="chapter-"]:hover,
.navigation[href="#abstract-title"]:hover,
.navigation[href="#intro"]:hover,
.navigation[href="#conclusion"]:hover,
.navigation[href="#bibliography"]:hover {
  background: yellow; 
  color: var(--color-text); 
}

.sticky-nav .navigation[href*="note-"]:hover {
  background: var(--color-accent); 
  color: var(--color-background); 
}


.sticky-nav .navigation[href*="chapter-"]:hover,
.sticky-nav .navigation[href="#abstract-title"]:hover,
.sticky-nav .navigation[href="#intro"]:hover,
.sticky-nav .navigation[href="#conclusion"]:hover,
.sticky-nav .navigation[href="#bibliography"]:hover {
  background: yellow; 
  color: var(--color-text); 
}

.arrow {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.arrow-right {
  margin-left: 0.2rem;
}

#email-container {
  margin-bottom: 2rem;
}
  
}




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

}