@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: 'Alicja';
    src: url('../fonts/Alice/Alice-Regular.woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
    letter-spacing: 0;
}



/* @font-face {
  font-family: 'Crimsonian';
  src: url('../fonts/Crimson/CrimsonPro-Italic-VariableFont_wght.ttfx');
  font-weight: normal;
  font-style: italic;
  font-display: block
} */

@font-face {
  font-family: 'Neconian';
  src: url('../fonts/Neco/Fonts/WEB/fonts/Neco-Italic.woff2');
  font-weight: normal;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'Neconian';
  src: url('../fonts/Neco/Fonts/WEB/fonts/Neco-Regular.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}


/*rgb(114, 58, 23)*/
/* VARIABLES */

:root {
  /* Color values */
  
  background-image: linear-gradient(rgb(255, 255, 255), rgb(110, 74, 65) );
  --color-text:rgb(114, 58, 23);
  --color-text-link: rgba(114, 58, 23);
  --color-text-link-hover: rgba(61, 61, 177, 0.4);
  /* Font values */
  --font-text: 'Alicja', 'Crimsonian', 'Neconian', 'Helvetica', 'Arial', sans-serif;
  --font-size: 24px;
  /* Margin value */
  --margin: 10vw;
  text-justify: auto;
}



/* GENERAL STYLES */


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

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;
  overflow-x:hidden;
}

a {
  color: rgb(129, 168, 244);
  text-decoration:wavy;
  position: relative;
  z-index: 2;
}

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

h1{
  font-size: 20px;
  font-family: 'Alicja';
  font-style: normal;
  text-align:right;
}

h2{
  font-size: 48px;
  text-align: center;
  font-family: 'Alicja';
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
}

h3{
    font-size: 12px;
      text-align: center;
      font-family: 'Alicja';
     
      text-decoration-thickness: 2px;
      text-underline-offset: 10px;
  }


p{
  font-size: 24px;
  text-align: left;
  font-family: 'Neconian';
  }

  

span{
  display: inline;
}

.links{
  word-break: break-all;
}
/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding-left: 350px;
  padding-right: 6vw;
}

/* navigation */
 
nav{
  position: fixed;
  bottom: 2%;
  left: 0%;
  font-family: 'Alicja';
  font-style: normal;
  font-size: 20px;
  z-index: 3;
  /* padding:5vw; */
}

/* content */

#abstract {
  color: var(--color-text)
}

#overlay {
  position: absolute;
  width: 100%;
  min-width: 100%;
  top: 0%;
}

#overlay tr {
  height : 300px;
  min-width: 100%;
}

.hidden {
  display: none;
}

img {
  max-height : 22vw;
  max-width: 22vw;
  position: relative;
  z-index: 1;
  /* opacity: 70%; */
}

#show-hide {
  position: fixed;
  top: 420px;
  left: 2vw;
  background-color: transparent; 
  border: solid;
  border-radius: 50px;
  color: rgb(114, 58, 23);
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  /* display: inline-block; */
  font-size: 20px;
  
}

#title {
  position: absolute;
  left:14%;
  margin-top: 1%;
}

.intro-wrapper{
  height:150vh;
  
}


.from{
			position: sticky;
			border: none;
			margin-top: 1%;
      font-size: 8vw;
      font-family: 'Alicja';
  font-style: normal;
      text-align:left;
      width:25vw;
      max-height: 150px;
      top: 0;
      left: 2vw;
}

.Hand1{
  position: sticky;
  border: none;
  font-size: 8vw;
  font-family: 'Alicja';
  font-style: normal;
  text-align:left;
  width:25vw;
  max-height: 150px;
  top: 0;
  left: 26vw;
}

.to{
  position: sticky;
  border: none;
  font-size: 8vw;
  font-family: 'Alicja';
  font-style: normal;
  text-align:left;
  width:25vw;
  max-height: 150px;
  top: 0;
  left: 64vw;
}

.Hand2{
  position: sticky;
  border: none;
  font-size: 8vw;
  font-family: 'Alicja';
  font-style: normal;
  text-align:left;
  width:20vw;
  max-height: 150px;
  top: 0;
  left: 79vw;
}

.thesis{
  position: relative;
  
  text-align: center;
}

.figure {
  max-width: unset !important;
  max-height: unset !important;
  width: 70%;
  height: auto;
  
}


.center {
  display: block;
  max-height : 25vw;
  max-width: 25vw;
}

/* .empty{
  background-image: linear-gradient(rgb(255, 255, 255), rgb(216, 207, 205) );
  position:sticky;
  top: 0;
  width: 100%;
  height: 120px;
} */
/* 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: 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) */

@media (max-width: 779px) {

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


  /* utility classes, mobile */

  .desktop-only{
    display:none;
  }

  .mobile-only{
    display:block;
  }

  .intro-wrapper{
    height:90vh;
  }

  h3{
      font-size: 18px;
      text-align: left;
      font-family: 'Alicja';
  font-style: normal;
      text-decoration-thickness: 2px;
      text-underline-offset: 10px;
  }

  h4{
    font-size: 20px;
    text-align: center;
    font-family: 'Neconian';
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
  }

  .table-of-content{
    position: relative;
    padding-top: 60px;
    left: 0vw;
  }

  p{
    font-size: 20px;
    text-align: left;
    font-family: 'Neconian';
    }

    h2{
      font-size: 32px;
      text-align: center;
      font-family: 'Alicja';
  font-style: normal;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 10px;
    }
  
  nav{
    position: relative;
    top: 4vw;
    left: 4vw;
    text-align: center;
    font-family: 'Alicja';
  font-style: normal;
    font-size: 20px;
    /* padding:5vw; */
  }

  div.page-wrapper {
    /* the element that 'wraps' everything */
    padding-left: 10vw;
    padding-right: 10vw;
  }

  #show-hide {
    position: fixed;
    left : 50vw;
    top: 85%;
    background-color: white; 
    border: solid;
    border-radius: 50px;
    color: rgb(114, 58, 23);
    padding: 20px 60px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    transform: translateX(-50%);

  }

  img {
    max-height : 23vw;
    max-width: 23vw;
    position: relative;
    z-index: 1;
  }

  .from{
    position: sticky;
    border: none;
    margin-top: 1%;
    font-size: 10vw;
    font-family: 'Alicja';
  font-style: normal;
    text-align:left;
    width:25vw;
    max-height: 150px;
    top: 0;
    left: 2vw;
}

.Hand1{
position: sticky;
border: none;
font-size: 10vw;
font-family: 'Alicja';
text-align:left;
width:25vw;
max-height: 150px;
top: 0;
left: 29vw;
}

.to{
position: sticky;
border: none;
font-size: 10vw;
font-family: 'Alicja';
text-align:left;
width:25vw;
max-height: 150px;
top: 0;
left: 62vw;
}

.Hand2{
position: sticky;
border: none;
font-size: 10vw;
font-family: 'Alicja';
text-align:left;
width:20vw;
max-height: 150px;
top: 0;
left: 75vw;
}
}


  /* opacity: 60%;



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

}