.big70small100 {
    width: 70%;
}
.big50small100 {
    width: 49%;
}
@media (max-width: 1000px) {
    .big70small100 {
        width: 100%;
    }
    .big50small100 {
        width: 100%;
    }
}

/*
sidenotes
https://gertjanvandenburg.com/blog/how_i_made/
https://github.com/edwardtufte/tufte-css/blob/gh-pages/tufte.css
*/
/*body { counter-reset: sidenote-counter; }*/

.sidenote, .marginnote { float: right;
                         clear: right;
                         margin-right: -25%;
                         width: 20%;
                         margin-top: 0;
                         margin-bottom: 0;
                         font-size: 0.9rem;
                         vertical-align: baseline;
                         position: relative; }

.sidenote-number { counter-increment: sidenote-counter; }

.sidenote-number:after, .sidenote:before { font-family: et-book-roman-old-style;
                                           position: relative;
                                           vertical-align: baseline;
                                            margin-left: -0.2em;
                                            margin-right: 0.2em;
                                            font-weight: 700;
                                            color: #2060d0;}

.sidenote-number:after { content: counter(sidenote-counter);
                         font-size: 1rem;
                         top: -0.5rem;
                         left: 0.1rem;}

.sidenote:before { content: counter(sidenote-counter) " ";
                   top: -0.5rem; }

blockquote .sidenote, blockquote .marginnote { margin-right: -82%;
                                               min-width: 59%;
                                               text-align: left; }

label.sidenote-number { display: inline; }

input.margin-toggle { display: none; }

label.margin-toggle:not(.sidenote-number) { display: none; }



/*TOC for small screens*/
@media (max-width: 1820px) {

  .toc_outside {
  
    position: relative;
    left: -460px;
  }

    .toc {
 min-width: 96%;
    float: left;
    clear: right;
/*        position: relative;*/
  padding: 4px;
  margin-right: 10px;
    margin-left: calc(470px);
  margin-bottom: 10px;
  /* border: solid 1px lightgray; */
    }
    
  .notable {
    display: none;
  }
}

@media (max-width: 1300px) {
  label.margin-toggle:not(.sidenote-number) { display: inline; }
  .sidenote, .marginnote { display: none; }
  .margin-toggle:checked + .sidenote,
  .margin-toggle:checked + .marginnote { display: block;
                                         float: left;
                                         left: 1rem;
                                         clear: both;
                                         width: 95%;
                                         margin: 1rem 2.5%;
                                         vertical-align: baseline;
                                         position: relative; }

@media (max-width: 700px) {
  .main {
    overflow: hidden;
  }
  .toc_outside {
  
    position: relative;
    min-width: 97%;
    margin-left: calc(470px);
  }
    .toc {
 min-width: 97%;
    float: left;
    clear: right;
/*        position: relative;*/
  padding: 0px;
  margin-right: 4px;
    margin-left: 4px;
  margin-bottom: 10px;
  /* border: solid 1px lightgray; */
    }
}

.substack {
  background:white;
  transform: scale(0.75);
  margin-bottom: -20px;
  margin-top: -40px;
}

@media (max-width: 900px) {
  .substack {
    background:white;
    transform: scale(0.75);
    margin-top: 20px;
  }
}

}

/* div in 14 day of sleep experiment where I want the pictures at the beginning to float right but want them to go after the abstract on small screens */
.show_less_eq_than_900px {
  /* max-width: 300px; */
}
.show_more_than_900px {
  margin-left: 8px;
}
@media (max-width: 900px) {
  .show_less_eq_than_900px {
      display: block;
  }
  .show_more_than_900px {
    display: none;
}
}

@media (min-width: 901px) {
  .show_less_eq_than_900px {
      display: none;
  }
  .show_more_than_900px {
    display: inline;
    max-width: 500px;
}
@media (min-width: 1268px) {
  .show_more_than_900px {
  margin-right: -150px;
  max-width: none;
  }
  @media (min-width: 1532px) {
    .show_more_than_900px {
    margin-right: -300px;
    }
    @media (min-width: 1768px) {
      .show_more_than_900px {
      margin-right: -300px;
      }
    }
}
}
}