/* and */
/*fonts styling */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*background, padding */
* {
  margin:0;
  padding:0;
  }
body {
  height: 100%;
  background-color: #f0f0f0;
  margin-left: 30px;
  margin-top: 30px;
}

/*CONTAINER SETUP */
.container-main {
  display: grid;
  grid-template-columns: 30px 150px 40vw;
  align-items: start;
}

.col-1,
.col-2 {
  position: sticky;
  top: 80px; 
  z-index: 500;
  align-self: start;
}

.hr-main {
  width: calc(30px + 150px + 40vw);
}


@media (max-width: 990px){
  .container-main {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 80vw;
  }

  .col-1,
  .col-2 {
    position: static;
  }

  .col-1,
  .col-2,
  .col-3,
  .hr-main {
    width: 80vw;
  }

}


/*FONTS SETUP */
html {
  vertical-align: top;
  color: #333333;
  font-family: 'Inter',Arial, Helvetica, sans-serif;
  height: 100%;
}

h1, h2, h3, h4 {
margin-left: 40px;
font-size: x-large;
line-height: 1.2;
font-weight: 600;
text-align: left;
padding-bottom: 2vh;
}

p, li, ul, u {
  font-family: 'Inter',Arial, Helvetica, sans-serif;
  line-height: 1.5;
  font-weight: 400;
}

sup {
font-size: 0.6rem;
}

/* LINKS */

a {
  color:inherit;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  color:#F07167 !important;
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.more:hover {
  color:#F07167 !important;
}

/* HOME PAGE FONTS */
.main-header {
  position: sticky;
  top: 0px;
  color: black;
  font-size: 150%;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f0f0f0;
  z-index: 1000;
}

/* SECTION TITLES */
.section-title{
  color: black;
  font-weight: bold;
  font-family:'Inter', Arial, Helvetica, sans-serif;
  padding-top: 0vh;
  padding-bottom: 1vh;
}
.more{
  color: black;
  font-size:70%;
  padding-top:1vh;
  padding-bottom: 0vh;
  font-family:'Inter', Arial, Helvetica, sans-serif;
}

/* PCITE */
.pcite-main{
  font-size: 110%;
  color:black;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  padding-bottom: 0.5vh;
}
.pcite-main > a {
  color: black;
}

.pcite-hidden{
  font-size: 100%;
  color:#5D5D5D;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  padding-bottom: 0.5vh;
}

.pcite-hidden > a {
  color: #5D5D5D;
}

.pcite-main > span,
.pcite-hidden > span {
  text-decoration: none;
}

/* TITLE-TYPE */
.title-type{
  font-size:small;
  font-weight:500;
  padding-top:1vh;
  font-family:'Inter', Arial, Helvetica, sans-serif;
}

.title-type-hidden{
  color: #5D5D5D;
  text-align: left;
  font-size:small;
  padding-top:1vh;
  font-family:'Inter', Arial, Helvetica, sans-serif;
}




/* COLLAPSIBLES */
input[type="checkbox"] {
  display: none;
}

.hidden-content-ro{
  overflow: auto;
  display: none;
}

#ct-ro:checked ~*.hidden-content-ro{
  display:contents;
}

.hidden-content-t{
  overflow: auto;
  display: none;
}

#ct-t:checked ~*.hidden-content-t{
  display:contents;
}

/* HIDDEN IMAGES */

.hidden-image-container {
  height: auto;
  width: 30vw;
  display: none;
  padding-left: 30px;
  z-index: 1;
}

.pcite-main:hover +.hidden-image-container {
  display: block;
  position: absolute;
}

.hidden-image {
  max-width: 30vw;
  padding-bottom:0%;
  max-height: 40vh;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

figcaption {
  font-size: 70%;
  max-width: 20vw;
}

/* PAGES */

hr{
  border: 1.5px solid black;
  margin-top: 3vh;
  margin-bottom: 2vh;
}

.ptext{
  font-size: 100%;
}
.ptext-bold{
  padding-top: 2vh;
  font-weight: 600;
}
.ptext-indented{
  padding-left: 40px;
}
.ptext-indented-bold{
  padding-left: 40px;
  font-weight: 600;
  padding-top: 2vh;
}
.pcite{
  padding-left: 40px;
  font-size: 90%;
  color:#5D5D5D;
  padding-bottom: 0.5vh;
}
.pcite > a {
  color: #5D5D5D;
}

.title-content{
  padding-left: 40px;
  font-size: 90%;
  color:black;
  padding-bottom: 0.5vh;
}

.quote{
  padding-left: 40px;
}

/* Sidenotes */
.endnote-main {
  font-size: 100%;
  padding-top: 0vh;
  padding-bottom: 0vh;
}
body {
  counter-reset: sidenote-counter;
}
.sidenote-number {
  counter-increment: sidenote-counter;
}
/* Counter before the sidenote in the margin. */
.sidenote::before {
  content: counter(sidenote-counter)". ";
  position: relative;
  vertical-align: baseline;
  font-size: 80%;
  font-weight: 600;
}
/* Counter in the main body. */
.sidenote-number::after {
  content: counter(sidenote-counter);
  vertical-align: super;
  font-size: 60%;
}

.sidenote-number:hover, 
.sidenote-number:hover > small, 
.sidenote-main:hover {
  color:#F07167;
}

/* images */

.intext-figure-container {
  margin: 0;
  padding: 0;
}

.intext-figure {
  position: relative;
  height: 90vh;
  background-attachment: fixed;
  background-position: bottom 10vh left 10vw;
  background-size:50vh;
  background-repeat: no-repeat;
}

/* Read Bar */
#read-bar {
  position: fixed;
  bottom: 99vh;
  width: 90vw;
  height: 1vh;
  background-color: #f3eee5;
}
#read-bar-fill {
  height: 100%;
  width: 0;
  background-color: black;
}