@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  margin-block-start: 0;
}

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

/**{
  margin: 0;
  padding: 0;
} */

@font-face {
    font-family: 'HALT';
    src: url('../fonts/yourfontname/HALTimezoneUnlicensed-Regular.otf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


@font-face {
    font-family: 'HALT';
    src: url('../fonts/yourfontname/HALTimezoneTest-Italic-1.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: 'HALT', 'Helvetica', 'Arial', sans-serif;
  --font-size: 24px;
  /* Margin values */
  --margin: 1rem;


  /* Examples of possible variables */

  --font-size-heading: calc(var(--font-size) * 2);
  --font-size-subheading: calc(var(--font-size) * 1.25);
  --font-size-caption: calc(var(--font-size) * 0.875);

  --margin-xs: calc(var(--margin) * 0.5);
  --margin-s: calc(var(--margin) * 1);
  --margin-m: calc(var(--margin) * 2);
  --margin-l: calc(var(--margin) * 3);
  --margin-xl: calc(var(--margin) * 5);

}



/* GENERAL STYLES */

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

.fade-top {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  height: 5%;

  pointer-events: none; /* allows clicking through */

  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 100%
    rgba(255, 255, 255, 0) 0%
  );
}

.fullscreen {
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      display: block;
      display: flex;
      justify-content: center; /* horizontal center */
      align-items: center;
      opacity: 0.5;
      padding-top: 0;
      
    }

.webpagetitle {
  position: relative;
  
}

.webpagetitle h7 {
  position: absolute;
  top: 3em;
  left: 50%;
  transform: translate(-50%, -50%);
  font-variant: small-caps;
  color: #8f8e8e;
  text-align: center;
  font-size: 1.5em;
  font-weight: normal;
}

.webpagetitle h6 {
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translate(-50%, -50%);
  font-variant: small-caps;
  color:#8f8e8e;
  text-align: center;
  font-size: .75em;
  font-weight: normal;
}


.abstract{
  width: 70%;
  margin: 0 auto;
  text-align:justify;
  text-align-last: center;
  font-size: .75em;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 0;
  color: darkgray;
  padding-bottom: 15em;
}

.abstracttitle{
  margin: 0;
  text-indent: 0;
  text-align: center;
  font-size: 20px;
  color:darkgray;
  
  font-weight: normal;
  font-variant: small-caps;
}


body {
  position:relative;
  background-color: white;
  font: var(--font-size) var(--font-family);
  color: #282828;
  width:100%;
  height:auto;
  overflow-y:auto;

}
.superscript {
  background-color: rgb(0, 195, 255);
  color: black;
  font-size: 0.7em;
  padding: 0.4%;
  border-radius: 0%;
  vertical-align:sub;
}

a {
  /*color: var(--color-text-link);
  text-decoration: underline;*/
  color: #282828;
  font-size: 20px;
  text-indent: 2em;
  margin: 0;
  margin-left: 4em;
  text-align: left;
}

a:hover {
  color: #555555;
  /* text-decoration: underline; */
  
}

.container{
  display: flex;
  width: 100%;
  gap: 2rem;
}

.column-left, .column-right {
  width: 50%;
}


figure {
  width: auto;
  /* height: 10em; */
  padding-bottom: 1em;
  padding-top: 0em;
}

img{
  width: 90%;
  padding-top: 3em;
  height: auto;
  display: block;
  margin: 0 auto;
    padding-bottom: 1em;
  -webkit-mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent);
}


.img2{
    padding-top: 3em;
  width: 70%;
  height: auto;
    padding-bottom: 1em;
  display: block;
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent);
}

h1{
  text-align: left;
  font-size: 20px;
  padding-left: 2em;
  margin-left: 4em;
  
}

h2{
  text-align: center;
  font-size: 20px;
  color: #282828;
  width: 100%;
  font-weight: normal;
  font-variant: small-caps;
}


.noindent{
  text-align: left;
  font-size: 20px;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 0 ;
  letter-spacing: 0em;
}

.afterwordtitle{
padding-top: 5em;
padding-bottom: 1.2em;
}

.afterwordleft{
  text-align: left;
  font-size: 20px;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 2.6e,;
  letter-spacing: 0em;
  padding-left: 2em;
}

.lastpara{
  padding-bottom: 2.6em;
}

p{
  
  text-align: left;
  font-size: 20px;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 2.6em ;
}

.topindent{
  padding-top: 2.4em;
}

.quote {
  text-indent: 0;
  text-align: left;
  padding-left: 2.6em;
  font-style: italic;
  color: #555555;
  line-height: 1.3em;
  letter-spacing: -0.01em;
  padding-bottom: 1.3em;
  padding-top: 1.3em;
}
.quote-author {
  text-indent: 0;
  text-align: left ;
  padding-left: 2.6em;
   padding-right: 2.6em;
  color: rgb(0, 195, 255);
  font-size: 15px;
  letter-spacing: 0em;
  line-height: 1.4em;
}

.last-quote-author{
text-indent: 0;
  text-align: left ;
  padding-left: 2.6em;
  padding-right: 2.6em;
  color: rgb(0, 195, 255);
  font-size: 15px;
  letter-spacing: 0em;
  line-height: 1.4em;
  padding-bottom: 8em;
}

.colophontitle{
  margin: 0;
  text-indent: 0;
  text-align: center;
  font-size: 20px;
  color:rgb(0, 195, 255);
  
  font-weight: normal;
  font-variant: small-caps;
  
}

.captions{
  color: #8f8e8e;
  text-align: center;
  text-indent: 0;
  padding: 0;
  font-style: italic;
  font-size: 0.5em;
}

.colophon{
  text-align:justify;
  text-align-last: center;
  font-size: .75em;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 0;
  color: rgb(0, 195, 255);
  padding-top: 1.3em;
  padding-bottom: 3.9em;
  
}

footer{
/*padding-top: 2em;
padding-bottom: 1em;*/
border: none;
border-top: none;
}


blockquote{
  
}

hr{
  border: none;
}


.fade-bottom {
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 5%;

  pointer-events: none; /* allows clicking through */

  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}


/* PAGE STYLES */

/* page structure */

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

/* navigation */
 
nav{
  
}

/* content */

main{
 
}

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

.fullscreen{
  opacity: 0.15;
}
.webpagetitle h7 {
  position: absolute;
  top: 3em;
  left: 50%;
  transform: translate(-50%, -50%);
  font-variant: small-caps;
  color: #8f8e8e;
  text-align: center;
  font-size: .75em;
  font-weight: normal;
}

.webpagetitle h6 {
  position: absolute;
  top: 7em;
  left: 50%;
  transform: translate(-50%, -50%);
  font-variant: small-caps;
  color:#8f8e8e;
  text-align: center;
  font-size: .75em;
  font-weight: normal;
  
}

  .abstract{
  width: 95%;
  margin: 0 auto;
  text-align: justify;
  font-size: .75em;
  line-height: 1.3em;
  letter-spacing: 0.1;
  text-indent: 0;
  color:#8f8e8e;
  padding-top: 0;
  padding-bottom: 5em;
}

.abstracttitle{
  margin: 0;
  text-indent: 0;
  text-align: center;
  font-size: .75em;
  color:#8f8e8e;

  font-weight: normal;
  font-variant: small-caps;
  padding-bottom: 1em;
  padding-top:0 em;
}

.afterwordtitle{
padding-top: 4em;
padding-bottom: 1.2em;
font-size: 0.75em;
}

h2{
  font-size: 0.75em;
  padding-bottom: 1em;
}

.afterwordleft{
  text-align: left;
  font-size: 16px;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 2.6em;
  letter-spacing: 0em;
  padding-left: 2em;
  padding-bottom: 0;
}
.last-quote-author, .quote-author, .last-quote-author{
  font-size: .5em;

}

.captions{
  color: #8f8e8e;
  text-align: center;
  text-indent: 0;
  padding: 0;
}

.colophontitle{
  margin: 0;
  text-indent: 0;
  text-align: center;
  font-size: .75em;
  color:rgb(0, 195, 255);
  
  font-weight: normal;
  font-variant: small-caps;
  
}

.colophon{
  text-align:center;
  
  font-size: .5em;
  line-height: 1.3em;
  letter-spacing: -0.02em;
  text-indent: 0;
  color: rgb(0, 195, 255);
  padding-top: 1.3em;
  padding-bottom: 3.9em;
  
}


  .container {
    display: flex;
    flex-direction: column;
  }

  .column-left, .column-right {
    width: 100%;
  }
  figure {
    opacity: 1;
    height: auto;
  }

  p, .noindent {
    font-size: 16px;
    color: black;
    
  }

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

}