/* FONTS */
@font-face {
  font-family: "Unica77";
  src: url('fonts/Unica77LL-Medium.eot');
  src: url('fonts/Unica77LL-Medium.eot') format('embedded-opentype'),
       url('fonts/Unica77LL-Medium.woff2') format('woff2'),
       url('fonts/Unica77LL-Medium.woff') format('woff'),
       url('fonts/Unica77LL-Medium.ttf') format('truetype');
}

@font-face {
  font-family: "Unica77";
  src: url('fonts/Unica77LL-MediumItalic.eot');
  src: url('fonts/Unica77LL-MediumItalic.eot') format('embedded-opentype'),
       url('fonts/Unica77LL-MediumItalic.woff2') format('woff2'),
       url('fonts/Unica77LL-MediumItalic.woff') format('woff'),
       url('fonts/Unica77LL-MediumItalic.ttf') format('truetype');
  font-style: italic;
}

@font-face {
  font-family: "Formula";
  src: url('fonts/FormulaCondensed-Bold.eot');
  src: url('fonts/FormulaCondensed-Bold.eot') format('embedded-opentype'),
       url('fonts/FormulaCondensed-Bold.woff2') format('woff2'),
       url('fonts/FormulaCondensed-Bold.woff') format('woff'),
       url('fonts/FormulaCondensed-Bold.ttf') format('truetype');
}

@font-face {
  font-family: "Formula Exp";
  src: url('fonts/FormulaCustomBold-Exp.eot');
  src: url('fonts/FormulaCustomBold-Exp.eot') format('embedded-opentype'),
       url('fonts/FormulaCustomBold-Exp.woff2') format('woff2'),
       url('fonts/FormulaCustomBold-Exp.woff') format('woff'),
       url('fonts/FormulaCustomBold-Exp.ttf') format('truetype');
}
@keyframes dash {0%{stroke-dashoffset: 1200} 100%{stroke-dashoffset: 0}}







/* GENERAL */
:root {
  --accent: #000;
  --back: #111;
  --s: 14px;
  --m: 20px;
  --mUP: 28px;
  --l: 48px;
  --xl: 14vw;
  --c0: #ffedff;
  --c1: #fffccd;
  --c2: #caffe1;
  --c3: #ffe6c8;
  --c4: #dcf0ff;
  --cs: #0f041e;
  --navColor: unset;
}
::selection {color: white;background-color: var(--accent)}
::-moz-selection {color: white;background-color: var(--accent)}
html{
  min-height:100%;
  position:relative;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html, body {max-width: 100%; transition: all .3s; overflow-x: hidden}
body{
  font-family: Unica77, Helvetica, sans-serif;
  font-size: var(--m);
  line-height: 1.35;
  color: var(--accent);
  height:100%;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  background-color: var(--c4);
}
main{z-index: 100}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}
h1{
  font-size: var(--l);
  font-family: Formula, Helvetica, sans-serif;
  text-rendering: optimizeSpeed;
  font-weight: normal;
  text-transform: uppercase;
  transition: line-height .3s;
}
h2{
  font-size: var(--l);
  font-family: Formula, Helvetica, sans-serif;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.6px;
}
a{color: var(--accent)}
a:hover{font-style: italic}
i{font-style: italic}
article{transition: padding .1s}
article:hover h1{line-height: .82}
article:hover .open_rgt{transform: rotate(-3deg) !important}
article:hover .open_lft{transform: rotate(3deg) !important}
section{padding-top: 20px}
section div{display: flex}
section small{font-size: var(--s); line-height: 1.1}
figure img{width: 100%; cursor: pointer}
figcaption{font-size: var(--s); max-width: 500px;}
sup{border-bottom: 2px var(--accent) solid; border-radius: 2px}

/* STICKY HEADERS */
header{
  position: fixed;
  top: 0%;
  width: 100%;
  display: flex;
  background-color: var(--back);
  z-index: 290;
}
header h1{font-size: var(--l); padding-left: 10px; letter-spacing: 1px;}
header a{text-decoration: none; cursor: pointer}
header a:hover{font-style: normal}
header img{width: 20px; cursor: pointer; margin-bottom: 10px; margin-right: 4px;}
header span{
  position: absolute;
  top: 0;
  right: 0%;
  padding: 0 1%;
  font-size: var(--l);
}
cont{display: flex}
cont span{width: 160px}
cont small{width: calc(100% - 160px); font-size: var(--m)}
cont a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: var(--s);
    border: 2px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    border-radius: 5px;
    padding: 5px 8px 3px 8px;
    margin-right: 5px;
  }
cont a:hover{font-style: normal}

/* NAVIGATION */
nav{
  position: fixed;
  top: 70px;
  left: 10px;
  font-size: var(--s);
  width: calc((100vw - 1000px)/2);
  min-width: 400px;
  z-index: 200;
}
nav li{text-indent: 1em}
nav li .indent{text-indent: 2em}
.indent{text-indent: 2em}
nav a {text-decoration: none}
nav a:hover {text-decoration: underline; font-style: normal}
#nav_btn{cursor: pointer}








/* TOAST */
#toast{
  position: fixed;
  top: 200px;
  left: 100px;
  max-width: 350px;
  background-color: var(--back);
  z-index: 400;
  padding: 20px;
  border: 2px var(--accent) solid;
  border-bottom: 4px var(--accent) solid;
  border-radius: 5px;
  display: none;
}

/* LIGHTBOX */
#lightbox{
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .8);
  display: none;
  z-index: 500;
  justify-content: center;
  cursor: pointer;
}
#lightbox img{
  display: block;
  margin: auto;
  max-width: 80vw;
  max-height: 80vh;
  vertical-align: middle;
}
#lightbox h3{position: absolute; bottom: 20px; text-align: center; color: white}
#lightbox a{color:white}

/* COLOPHON */
#end_colophon{font-size: var(--s); display: flex; border-top: 1.5px solid var(--accent); padding-top: 30px;}
#end_colophon span{margin: 0 auto}

/* COLORS */
#index, #open_index{background-color: var(--back); color: white}
#zero, #open_0{background-color: var(--c0)}
#one, #open_1{background-color: var(--c1)}
#two, #open_2{background-color: var(--c2)}
#three, #open_3{background-color: var(--c3)}
#four, #open_4{background-color: var(--c4)}

/* BIBLIOGRAPHY */
.biblio{display:list-item; line-height: 1.6; list-style-type: "– ";}

/* GRID */
.col_s{width: 15%;line-height: 1;padding-right: 3%}
.col_m{width: 75%;margin: auto;max-width: 800px;}
.img_s{width: 49.5%}
.img_third{width: 33%}
.img_xs{height: 300px; width: auto}
#img_amz{width: 25.5%; margin-right: 60px}

/* SUBTITLE */
.subtitle_note{padding-top: 68px}
.subtitle{font-size: var(--mUP); letter-spacing: -1px; text-decoration: none;display: flex; align-items: center; padding-top: 68px;}
.subtitle:hover{font-style: normal}
.subtitle:hover .subtitle_text{text-decoration: underline}
.subtitle:hover span::after{content: " #"}
.subtitle:hover .subtitle_number::after{content: none}
.subtitle_text{text-decoration: underline}
.subtitle_number{
  border-radius: 5px;
  font-size: var(--m);
  padding: 3px 6px 1px 0px;
  margin-right: 5px;
  margin-top: -3px;
}

/* NOTES */
.note{background-color: var(--accent); border:none; padding: 3px 2px 2px 2px}
.hand_note{
  cursor: pointer;
  border: 2px var(--accent) solid;
  padding: 3px 3px 1px 3px;
  vertical-align: middle;
  font-size: smaller;
}
.hand_note:hover{border: 2px var(--accent) solid;border-bottom: 4px var(--accent) solid}
.hand_glossary{cursor: pointer;border-bottom: 2px var(--accent) solid; border-radius: 2px; text-decoration: none;}
.hand_glossary:hover{border-bottom: 4px var(--accent) solid; font-style: normal;}
#diagrams_caption{margin-top: -35px}

/* OPENINGS */
#open_2 h1{line-height: .9}
#open_3 h1{width: 35%; line-height: .86}
#two:hover h1{line-height: .82}
#three:hover h1{line-height: .82}
#open_2{min-height: 100vh}
#open_3{min-height: 110vh}
#open_4{min-height: 50vh}
.open{
  position: relative;
  background-color: var(--back);
  display: flex;
  width: 100vw;
  z-index: 300;
}
.open h1{
  font-size: var(--xl);
  width: 45%;
  line-height: 1.1;
  padding-top: 60px;
  padding-left: 10px;
  z-index: 360;
  transition: 1s line-height;
}
.open img{display: initial;z-index: 350; width:50%;}
.open_caption{
  font-size: calc(var(--xl)/5);
  line-height: 1;
  display: flex;
}
.open_caption span{
  position: absolute;
  width: 40%;
  padding: 10px;
  border: 3px solid var(--accent);
  border-bottom: 7px solid var(--accent);
  border-radius: 5px;
}
.open_lft{left: 0; margin-left: 2%; transition: transform 1s; transform: rotate(-3deg)}
.open_rgt{right: 0; margin-right: 2%; transition: transform 1s; transform: rotate(3deg)}
.open_number{
  position: absolute;
  width: 100% !important;
  right: -90%;
}

/* INDEX */
#index{z-index: 800}
#open_index{height: 100vh; max-height: 100vh; display: block}
#index_wrapper{display: flex}
#index_wrapper div{width: 100%; padding: 1%}
#index_header{color: white; display: flex;}
#index_header a{color: white; text-decoration: none; font-size: var(--l); padding-left: 10px;}
#index_header h2{position: absolute; right: 10px; margin-top: 15px}
.index_chapter {margin-left: 0; height: 100vh}
.index_chapter h2{width: 100%}
.index_chapter a{text-decoration: none; color: inherit}
.index_chapter a:hover{text-decoration: underline;font-style: normal}
.index_chapter span{color: var(--accent); border-radius: 5px; font-size: var(--s); padding: 6px 10px 3px 10px; text-transform: uppercase}
.index_chapter p{margin-bottom: 20px}
.tags{position: relative; width: 100%; padding: 0% !important}
.indx_c0{color: var(--c0)} .indx_c0 span{background-color: var(--c0)}
.indx_c1{color: var(--c1)} .indx_c1 span{background-color: var(--c1)}
.indx_c2{color: var(--c2)} .indx_c2 span{background-color: var(--c2)}
.indx_c3{color: var(--c3)} .indx_c3 span{background-color: var(--c3)}
.indx_c4{color: var(--c4)} .indx_c4 span{background-color: var(--c4)}

/* MODS */
.mod_wrapper{display: flex}
.mod_title{
  width: 30%;
  margin-right: 3%;
  border: 2px solid var(--accent);
  border-radius: 5px;
  border-bottom: 4px solid var(--accent);
  padding: 10px;
  height: fit-content;
}
.mod_desc{width: 70%}
.mod_title, .mod_desc{width: 90%}
.mod_title{display: block}
.mod_title small{text-decoration: underline;}





/* HOMEPAGE */
#homepage{display: flex; padding: 10px; min-height: 80vh}
#homepage h1{font-size: 240px; line-height: .82}
#homepage h3{position: absolute; top: 240px; left: 320px; font-size: 42px; line-height: .9; letter-spacing: -2px}
#hp_title{position:absolute; top: 0; left: 0; padding: 40px 20px; width: 100%}
#hp_links{position:relative; display: table; margin: auto; padding: 60px 0px}
#hp_links{position:absolute; top: 0; left: 60%;display: grid; width: 40%; height: 610px}
#hp_links a {text-decoration: none; font-size: var(--l); margin: 50px 0px}
#hp_links a:hover {font-style: normal}
#hp_links a:hover span{border-bottom: 12px solid var(--accent)}
#hp_links span{border-radius: 10px; border: 4px solid var(--accent); border-bottom: 8px solid var(--accent); padding: 10px 18px 12px 18px}
.ext {font-family: "Formula Exp"}
#hp_wrapper{display: flex}
#hp_wrapper #one{padding-top: 60px}
#hp_wrapper #two{padding-top: 60px}
#hp_wrapper #three{padding-top: 60px}
.hp_captionBox{font-size: calc(var(--m)*1.3); line-height: 1; display: flex;}
.hp_captionBox span{
  margin: auto;
  padding: 10px;
  border: 3px solid var(--accent);
  border-bottom: 7px solid var(--accent);
  border-radius: 5px;
}
#hp_abstract{font-size: var(--l); min-width: 80%}
.hp_hand{cursor: pointer;border-bottom: 4px var(--accent) solid; border-radius: 5px; text-decoration: none}
.hp_hand:hover{border-bottom: 7px var(--accent) solid; font-style: normal}
.hp_gif{max-width: 100%; padding-top: 60px;}
.popup{font-size: var(--mUP); text-decoration: none; letter-spacing: -.5px}
.popup:hover{font-style: normal}
.popup small{font-size: calc(var(--m)/1.2)}

/* VIDEOS */
.vids{
  padding: 10px 0;
  min-width: 640px;
  height: 360px;
}

.vid_desktop{display: initial}
.vid_mobile{display: none; padding: 5%!important}

#vid_1, #vid_2, #vid_3{padding-top: 0px}





















/*MEDIA QUERY*/
@media (max-width: 1380px) {
.vids{
    padding: 10px 0;
    min-width: 560px;
    height: 315px;
  }
}

@media (max-width: 1085px) {
  :root {
  --s: 16px;
  --m: 18px;
  --l: 32px;
  --xl: 13vw;
  }
  header h1{letter-spacing: .5px}
  nav{
    display: none;
    top: 50px;
    border: 2px solid var(--accent);
    border-radius: 5px;
    background-color: var(--navColor);
  }
  nav a{padding-left: 7px}
  nav ul{
    text-align: left;
    width: calc(100vw - 20px);
    height: 100vh;
    padding-bottom: 30px;
  }
  section div{display: block}
  cont{display: block}
  .img_s{width: 100%}
  .img_xs{height: unset; width: 100%}
  .img_third{width: 100%}
  .col_m{width: 90%}
  .col_s{display: none}
  #toast{
    top: unset;
    bottom: 30px;
    left: 10px;
    width: calc(90vw - 24px);
    padding: 10px;
    border: 2px var(--accent) solid;
    border-bottom: 4px var(--accent) solid;
    border-radius: 5px;
  }
  #end_colophon{display: block}
  #end_colophon span{margin: 0}
  #img_amz{width: 75%}
  #nav_btn{display: none;}
  #open_index {height: 80vh; max-height: unset}
  #open_0{min-height: 60vh}
  #open_1{min-height: 60vh}
  #open_2{min-height: 60vh}
  #open_3{min-height: 80vh}
  #open_4{min-height: 60vh}
  .open h1{line-height: .9; width: 25%}
  .open img {width: 70%}
  .open_caption{font-size: calc(var(--l)/1.8)}
  .open_caption span{width: 50%; border: 2px solid var(--accent); border-bottom: 4px solid var(--accent);}
  .open_number{right: -87%}
  .subtitle {padding-top: 50px}
  #index_wrapper{display: block}
  #index_abstract{position: relative;bottom: unset;font-size: var(--m);padding: 70px 20px;max-width: 100%}
  #index_header {margin-bottom: 10px}
  #index_header h2{margin-top: 10px}
  .index_chapter {margin-left: 10px; height: unset}
  .index_chapter p {margin-bottom: 0}
  .tags{display: none}
  #diagrams_caption{margin-top: 0}
  .mod_wrapper{display: block}
  #homepage{display: block}
  #homepage h1{font-size: 120px}
  #homepage h3{top: 120px; left: 170px; font-size: 21px; letter-spacing: -1.3px}
  #hp_title{padding: 20px 10px; position: relative}
  #hp_links{position:relative; left: 0; width: 100%; height: 30vh}
  #hp_links a {margin: auto}
  #hp_links a:hover span{border-bottom: 9px solid var(--accent)}
  #hp_links span{border-radius: 10px; border: 4px solid var(--accent); border-bottom: 6px solid var(--accent); padding: 8px 15px 10px 15px}
  #hp_text{max-width: 100%}
  #hp_wrapper{display: block}
  #hp_abstract{font-size: var(--mUP); width: 90%}
  .hp_hand{border-bottom: 3px var(--accent) solid; border-radius: 3px}
  .hp_hand:hover{border-bottom: 5px var(--accent) solid}
  .vids{
    padding: 5% 0;
    min-width: 480px;
    height: 270px;
  }
  .vid_desktop{display: none}
  .vid_mobile{display: initial}
}



@media (max-width: 550px) {
  :root {
  --xl: 20vw;
  }
  #homepage h1{font-size: 25vw}
  #homepage h3{top: calc(19vw + 25px); left: 35vw; font-size: 4.2vw; letter-spacing: -.2vw}
  .vids{
    padding: 2% 0;
    min-width: 240px;
    height: 135px;
  }
}