SI13/ATATA/text_white.css

@font-face {
    font-family: CrimsonR;
    src: url(fonts/CrimsonText-Regular.ttf);
}
@font-face {
    font-family: Cursor;
    src: url(fonts/Cursor-Apple.otf);
}
@font-face {
    font-family: iAWriteBold;
    src: url(fonts/iAWriterDuoS-Bold.ttf);
}
@font-face {
    font-family: iAWriteRegular;
    src: url(fonts/iAWriterMonoS-Regular.ttf)
}
@font-face {
    font-family: wfdtf;
    src: url(fonts/wftfs-Regular.otf)
}

:root{
    --orange: #ff691e;
    --blue: #0631f6;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--orange);
}

::selection {
  color: white;
  background: var(--orange);
}


span.subtitle{
    font-family: CrimsonR;
    font-size: 13v;
    text-align: left;
    color:white;
}

img {
    padding-top:15px;
    width:390px;
    object-fit: contain;
    opacity:0;
}

body {
    margin: 15px;
    font-family: CrimsonR;
    font-size: 13pt;
    font-style: normal;
    line-height: 1.2;
    color: black;
    column-count: 4;
}


span.intro {
    margin-top:25px;
    font-family: CrimsonR;
    font-size: 15pt;
    line-height: 0.8;
    color: var(--orange);
}

span.quote {
    font-family: iAWriteRegular;
    font-size: 45pt;
    line-height: 0.9;
    color:white;
}

span.popCC {
    display:inline;
    width: 200% contain;
    color: var(--blue);
    text-align: center;
    padding: 4px;
    padding-top: 0.2px;
    padding-bottom: 0.2px;
    position: absolute;
    z-index: 1000;
/*  bottom: 110%;
    left: 10%; */
    margin-left: -24px;
    margin-top: -15px;
}

a{
    font-family: iAWriteRegular;
    font-size: 10pt;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

a.home{
    position: fixed; 
    color:var(--orange); 
    background: white;
    z-index:1000;
    mix-blend-mode: luminosity;
    border-radius: 20px;
/*     border: solid 0.5pt ; */
    padding-right: 6px;
    padding-left: 6px;
    padding-top: 1px;
    padding-bottom: 1px;
/*     mix-blend-mode: exclusion; */
}

a.h1 {
    margin-top:25px;
    font-family: CrimsonR;
    font-size: 15pt;
    line-height: 1;
    color: var(--orange);
}

a.link{
    font-family: wfdtf;
    color: var(--blue);
    cursor: pointer;
}

/* a:visited{
    text-decoration: none;
} */

a:hover {
    color: var(--blue);
}

span.intro:hover {
    color: var(--blue);
}



a.fig{
    font-family: CrimsonR;
    text-decoration: none;
    color: white;
}

a.fig:visited{
    text-decoration: none;
    font-family: CrimsonR;
}
a.fig:hover {
    padding-top: 5px;
    color: white;
    background: gold;
    font-family: CrimsonR;
}

span.chapters {
    font-family: CrimsonR;
    font-style: bold;
    font-size: 20pt;
    color: white;
}

span.CC {
    position: relative;
    font-size: 8pt;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: iAWriteRegular;
    color: var(--orange);
}

span.IN {
    position: relative;
    font-size: 8pt;
    color: var(--orange);
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: iAWriteRegular;
/*     background-color: transparent; */
}

span.NN {
    color:white;
}

span.FW{
    color:white;
}

span.DT {
    color:white;
}

span.VB {
    color:white;
}

span.VBP {
    color:white;
}

span.PRP {
    color:white;
}

span.JJ {
    color:white;
}

span.VBZ {
    color:white;
}

span.TO {
    color:white;
}

span.NNS {
    color:white;
}

span.NNP {
    color:white;
}

span.VBN {
    color:white;
}

span.CD {
    color:white;
}

span.WP {
    color:white;
}

span.WDT {
    color:white;
}

span.RB{
    color:white;
}

span.VBG{
    color:white;
}

span.JJS{
    color:white;
}

span.WRB{
    color:white;
}

span.JJR{
    color:white;
}

span.VBD{
    color:white;
}

span.RBS{
    color:white;
}

span.DOT{
    color:white;
}

span.COM{
    color:white;
}

span.MD{
    color:white;
}

span.EX{
    color:white;
}

span.PRP{
    color:white;
}

span.NNPS{
    color:white;
}

span.RBR{
    color:white;
}

span.RP{
    color:white;
}

span.PDT{
    color:white;
}



span.CC:hover {
    color: var(--blue);
}

span.IN:hover {
    color: var(--blue);
   
}

.footnotes {
    color:white;
    
}

@media only screen and (max-width: 1400px){
    body {
        column-count:3;
    }
}
@media only screen and (max-width: 1000px){
    body {
        column-count:2;
    }
}
@media only screen and (max-width: 600px){
    body {
        font-size: 3vw;
        column-count:1;
        padding-left: 2vw;
        padding-right: 4vw;
    }
        span.intro {
    padding-top: 0px;
    font-family: CrimsonR;
    font-size: 4vw;
    line-height: 1;
}


span.quote {
    font-family: CrimsonR;
    font-size: 18vw;
    line-height: 0.9;
}


a.home{
    position: fixed; 
    font-size: 3vw;
    color: black; 
    background: white;
    cursor: pointer;
    z-index:1000;
    border-radius: 20px;
/*     border: solid 0.5pt ; */
    padding-right: 6px;
    padding-left: 6px;
    padding-top: 1px;
    padding-bottom: 1px;
/*     mix-blend-mode: exclusion; */
}

a.link{
    font-family: wfdtf;
    color: black;

}
      
span.popCC {
    display:inline;
    width: 200% contain;
    color: var(--blue);
    font-size: 3vw;
    text-align: center;
    padding: 4px;
    padding-top: 0.2px;
    padding-bottom: 0.2px;
    position: absolute;
    z-index: 1000;
/*  bottom: 110%;
    left: 10%; */
    margin-left: -60px;
    margin-top: -15px;
}

a:visited{
    text-decoration: none;
}

a:hover {
    color: white;
    color: var(--orange);
    cursor: pointer;
}


a.fig{
    font-family: CrimsonR;
    text-decoration: none;
    color: black;
}

a.fig:visited{
    text-decoration: none;
    font-family: CrimsonR;
}
a.fig:hover {
    padding-top: 5px;
    color: white;
    background: black;
    font-family: CrimsonR;
}

span.chapters {
    font-family: CrimsonR;
    font-style: bold;
    font-size: 8vw;
}



span.CC {
    position: relative;
    font-size: 3vw;
    display: inline-block;
/*     cursor: pointer; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: iAWriteRegular;
    color: var(--orange);
}

      img {
          width: 95%;
      }
      
span.IN {
    position: relative;
    cursor: pointer;
    font-size: 3vw;
    color: var(--orange);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: iAWriteRegular;
/*     background-color: transparent; */
}

span.CC:hover {
    color: white;
    background-color: var(--orange);
}

span.IN:hover {
    color: white;
    background-color: var(--orange);
   
}
      
      

}
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 600px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
      body {
        font-size: 3vw;
        column-count:1;
        padding-left: 2vw;
        padding-right: 4vw;
    }
        span.intro {
    padding-top: 0px;
    font-family: CrimsonR;
    font-size: 4vw;
    line-height: 1;
}


span.quote {
    font-family: CrimsonR;
    font-size: 18vw;
    line-height: 0.9;
}


a.home{
    position: fixed; 
    font-size: 3vw;
    color: black; 
    background: white;
    cursor: pointer;
    z-index:1000;
    border-radius: 20px;
/*     border: solid 0.5pt ; */
    padding-right: 6px;
    padding-left: 6px;
    padding-top: 1px;
    padding-bottom: 1px;
/*     mix-blend-mode: exclusion; */
}

a.link{
    font-family: wfdtf;
    color: black;

}
      
span.popCC {
    display:inline;
    width: 200% contain;
    color: var(--blue);
    font-size: 3vw;
    text-align: center;
    padding: 4px;
    padding-top: 0.2px;
    padding-bottom: 0.2px;
    position: absolute;
    z-index: 1000;
/*  bottom: 110%;
    left: 10%; */
    margin-left: -60px;
    margin-top: -15px;
}

a:visited{
    text-decoration: none;
}

a:hover {
    color: white;
    color: var(--orange);
    cursor: pointer;
}


a.fig{
    font-family: CrimsonR;
    text-decoration: none;
    color: black;
}

a.fig:visited{
    text-decoration: none;
    font-family: CrimsonR;
}
a.fig:hover {
    padding-top: 5px;
    color: white;
    background: black;
    font-family: CrimsonR;
}

span.chapters {
    font-family: CrimsonR;
    font-style: bold;
    font-size: 8vw;
}



span.CC {
    position: relative;
    font-size: 3vw;
    display: inline-block;
/*     cursor: pointer; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: iAWriteRegular;
    color: var(--orange);
}

      img {
          width: 95%;
      }
      
span.IN {
    position: relative;
    cursor: pointer;
    font-size: 3vw;
    color: var(--orange);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: iAWriteRegular;
/*     background-color: transparent; */
}

span.CC:hover {
    color: white;
    background-color: var(--orange);
}

span.IN:hover {
    color: white;
    background-color: var(--orange);
   
}
      
      

}