* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

body {
    background-color: rgb(242, 235, 220);
    font-family:'Redaction';
    font-size: 19px;
    line-height: 21px;
    overflow: hidden;
}

body.unlocked {
    overflow: auto; /* allow scroll */
  }

body.dark-mode {
    background-color: black;
    color: rgb(242, 235, 220);
}

img, video{
    width: 100%;
    display:block
}

a { 
    color:black;
    text-decoration:underline;
}

a.dark-mode{
    color: rgb(242, 235, 220);
}

a:hover, a:focus {
    color: rgb(235, 245, 41);
}

@font-face {
    font-family:'Redaction';
    src:url(fonts/redaction-regular.woff) format('woff');
}

@font-face{
    font-family: 'Redaction10';
    src:url(fonts/redaction10-regular.woff) format('woff');
}

@font-face {
    font-family: 'Redaction20';
    src:url(fonts/redaction20-regular.woff) format('woff');
}

@font-face{
    font-family: 'Redaction35';
    src:url(fonts/redaction35-regular.woff) format('woff');
}

@font-face{
    font-family:'CirrusCumulus';
    src:url(fonts/cirruscumulus.woff) format('woff');
}

@font-face{
    font-family:'ManifontGrotesk';
    src:url(fonts/manifontgroteskbookdot.woff) format('woff');
}


/* hero video */

div.herovideo{
    width:300px;
    position: fixed;
    bottom: 20px;
    right: 40px;
}

div.herovideo video{
    border-radius: 10px;
    /* border: 10px dotted rgb(235, 245, 41); */
}

/* typography */
.redaction10 {
    font-family:'Redaction10';
}

.redaction20 {
    font-family:'Redaction20';
}

.redaction35 {
    font-family: 'Redaction35';
}

.manifont {
    font-family: 'ManifontGrotesk';
    /* color:rgb(235, 245, 41); */
}

.cirruscumulus {
    font-family: 'CirrusCumulus';
}

div.titletext {
    font-size: 400px;
    line-height: 400px;
    font-family: 'CirrusCumulus';
}

div.titletext2 {
    font-size: 400px;
    line-height: 400px;
    font-family: 'CirrusCumulus';
}

div.titlecaption {
    font-size:32px;
    line-height: 32px;
    font-family: Arial, Helvetica, sans-serif;
}

div.titlecaption2 {
    font-size:32px;
    line-height: 32px;
    font-family: Arial, Helvetica, sans-serif;
}

div.titlecaption2.dark-mode {
    color: rgb(242, 235, 220);
    font-size:32px;
    line-height: 32px;
    font-family: Arial, Helvetica, sans-serif;
}


div.subtitle {
    font-size: 40px;
    line-height:40px;
    font-style:italic;
}

div.largetext {
    font-size: 100px;
    line-height: 100px;
}

div.mediumtext {
    font-size:28px;
    line-height: 32px;
}

div.mediumtext.biggerlineheight{
    line-height:45px;
}

div.smalltext {
    font-size: 25px;
    line-height: 28px;
}

div.stretchtexthalf{
    display:inline-block;
    transform: scaleX(0.5);
}

div.textcenter{
    text-align:center;
}

div.textjustifylast{
    text-align-last:justify;
}

div.textjustify{
    text-align:justify;
    text-align-last: justify;
}

div.textindent{
    text-indent: 100px;
}

div.stretchtext{
    display:inline-block;
    transform: scaleX(0.7);
}

div.alignright{
    text-align: right;
}

div.aligncenter{
    text-align: center;
}

em{
    font-style:italic;
    /* text-decoration: underline; */
}

mark{
    background-color: rgb(235, 245, 41);
}

span.invis{
    opacity:0%
}

/* margins */

div.mtneg32point2{
    margin-top:-32.2px;
}

div.mt10{
    margin-top:10px;
}

div.mt20{
    margin-top:20px;
}

div.mt50 {
    margin-top:50px;
}

div.mt100 {
    margin-top:100px;
}

div.mt150 {
    margin-top:150px;
}

div.mt200 {
    margin-top:200px;
}

div.mt300{
    margin-top:300px;
}

div.mt350{
    margin-top:350px;
}

div.mt400 {
    margin-top:400px;
}

div.mt500 {
    margin-top:500px;
}

div.mt700{
    margin-top:700px;
}

div.mt800{
    margin-top:800px;
}

div.negmt350{
    margin-top:-350px;
}

div.mb50 {
    margin-bottom:50px;
}

div.mb100 {
    margin-bottom:100px;
}

div.mb200 {
    margin-bottom:200px;
}

div.mb300{
    margin-bottom:300px;
}

div.mb400{
    margin-bottom:400px;
}

div.mb500{
    margin-bottom: 500px;
}

div.mb700{
    margin-bottom: 700px;
}

div.ml3pc{
    margin-left:3%;
}

div.ml5pc{
    margin-left: 5%;
}

div.ml10pc{
    margin-left:10%;
}

div.ml20pc{
    margin-left:20%;
}

div.ml30pc{
    margin-left:30%;
}

div.ml35pc{
    margin-left: 35%;
}

div.ml39point85pc{
    margin-left: 39.85%;
}

div.ml40pc{
    margin-left:40%;
}

div.ml40point05pc{
    margin-left:40.05%;
}

div.ml45pc{
    margin-left: 45%;
}

div.ml50pc{
    margin-left:50%;
}

div.ml60pc{
    margin-left:60%;
}

div.mlauto{
    margin-left:auto;
}

div.mrauto{
    margin-right:auto;
}

div.mr50{
    margin-right:50px;
}

/* padding */

div.pad20{
    padding: 20px;
}

/* colours */

div.text-yellow{
    color:rgb(235, 245, 41);
}

div.text-beige{
    color:rgb(242, 235, 220);
}

div.text-black{
    color:black;
}

div.bg-yellow {
    background-color:rgb(235, 245, 41);
}

div.bg-black {
    background-color:rgb(0, 0, 0);
}

div.bg-beige {
    background-color: rgb(242, 235, 220);
}

div.border-black {
    overflow: hidden;
    border: 5px dotted rgb(0, 0, 0);
    padding: 50px
    /* box-shadow: 10px 15px 5px black; */
}

div.border-highlight {
    overflow: hidden;
    border: 5px dotted rgb(0, 0, 0);
    background-color: rgb(235, 245, 41);
    padding: 50px
}

div.border-dotted {
    border: 5px dotted rgb(235, 245, 41);
}

/* layout */

div.overlay {
    position: absolute;
    z-index: 2;
}

div.underlay{
    position: absolute;
    z-index: -1;
}

div.fullscreen-opaque {
    width:100vw;
    height:100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(242, 235, 220);  
    z-index: 999; 
}

div.fullscreen-opaque.dark-mode {
    width:100vw;
    height:100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;  
    color: rgb(242, 235, 220);
    z-index: 999; 
}

div.fullscreen {
    width:100vw;
    height:100vh;
    position: relative;
}

div.fullscreen.center{
    align-items: center;
    justify-content: center;
    display: flex;
}

div.vw100{
    width: 100vw;
}

div.width100{
    width:100%;
}

div.width80{
    width:80%;
}

div.width60{
    width:60%;
}

div.width40{
    width:40%;
}

div.width35{
    width:35%;
}

div.width30{
    width:30%;
}

div.width25{
    width:25%;
}

div.width20{
    width:20%;
}

div.width15{
    width:15%;
}

div.width10{
    width:10%;
}

div.width5{
    width:5%;
}

div.container{
    display:flex;
    flex-wrap:wrap;
}

div.flexend{
    justify-content:flex-end;
}

div.flexcenter{
    justify-content: center;
}

div.flexbetween{
    justify-content: space-between;
}

div.alignstart{
    align-items: flex-start;
}

div.overlay{
    position:absolute;
}

div.caption{
    position: absolute;
    top: 50%;
    left: 50%;
}

div.center{
  margin-left: auto;
  margin-right: auto;
}

div.justifycenter{
    justify-content: center;
}

div.absolute{
    position:absolute
}

/* folio marks */

.scrollElement {
    position: fixed;
    pointer-events: none;
    opacity: 0;
}

.scrollElement.visible {
    opacity: 1;
    pointer-events: auto;
  }

.folio-left{
    top: 20px;
    left: 2%;
    width: 100%;
    z-index: 998;
}

.folio-middle{
    top: 20px;
    width: 100%;
    z-index: 998;
}

/* splash screen */

.welcome {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    color: rgb(235, 245, 41);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
  }
  
  .welcome.visible {
    display: flex;
    flex-wrap: wrap;
  }

/* sticky word */

div.sticky-is {
    position: sticky;
    top: 300px;
}

div.sticky-friction1 {
    position:sticky;
    top: 190px;
}

div.sticky-friction2 {
    position:sticky;
    top: 400px;
}

div.sticky-container {
    height: 600px; /* Limit the scroll area */
    overflow: hidden;
    position: relative;
}

div.sticky-LOF {
    position: sticky;
    top: 3%;
}

/* dots */

.dot{
    height: 1.5vw;
    width: 1.5vw;
    background-color: rgb(235, 245, 41);
    border-radius: 50%;
    display: inline-block;
    position: fixed;
    display: none;
}

.thing2dot1{
    top: 48%;
    left: 35%;
}

.thing2dot2{
    top: 68%;
    left: 14%;
}

.thing2dot3{
    top: 83%;
    left: 39.5%;
}

.devicesdot1{
    top: 45%;
    left: 69.4%;
}

.devicesdot2{
    top: 53%;
    left: 69.4%;
}

.devicesdot3{
    top: 61%;
    left: 69.4%;
}

.buddhadot1{
    top: 47%;
    left: 27%;
}

.buddhadot2{
    top: 38%;
    left: 30%;
}

/* images */

.imagepopup{
    position: fixed;
    display: none;
    z-index: -1;
}

.humans1{
    top: 15%;
    left: 10%;
}

.humans2{
    top: 38%;
    left: 28%;
}

.things1{
    top: 50%;
    left: 55%;
}

.things2{
    top: 50%;
    left: 15%;
    width: 25%;
}

.devices{
    top: 25%;
    left: 60%;
    width: 20%;
}

.buddhahand{
    top: 40%;
    left: 15%;
    width: 20%;
}

.fellowhumans{
    top: 40%;
    left: 60%;
    width: 21%;
}

.rectangles{
    top: 20%;
    left: 35%;
    width: 30%;
}

.mannequins1{
    top: 42%;
    left: 10%;
    width: 34%;
}

.philosophersstone{
    top: 25%;
    left: 55%;
    width: 32%;
}

.adamandeve{
    top: 10%;
    left: 75%;
    width: 20%;
}

.mannequins2{
    top: 49%;
    left: 50%;
    width: 30%;
}

.refraction{
    top: 19%;
    left: 52%;
    width: 22%;
}

.tide{
    top: 25%;
    left: 57%;
    width: 32%;
}

.earthrot{
    width: 7%;
    opacity: 0;
}

.earthrot.show{
    opacity: 1;
}

.dancingbaby{
    width: 15%;
    opacity: 0;
}

.dancingbaby.show{
    opacity: 1;
}

/* hover image (defunct) */

.underlayphoto{
    position: fixed;
    z-index: -1;
    display: none;
    pointer-events: none ;
    cursor: pointer;
}

.up-flowers{
    top:25%;
    left:20%;
    width: 20%;
}

.up-mirror{
    top:20%;
    left:75%;
    width: 20%;
}

.hover-text:hover + .underlayphoto {
    display: block;
}

/* proposal */

div.proposal {
    display:inline-block;
    font-size: 75vw;
    transform: scaleX(0.23);
}

div.proposal-fullscreen{
    top:5%;
    left:0;
    width:100vw;
    height:100vh;
    position: relative;
    justify-content: center;
    display: flex;
}

/* div.proposal-fullscreen.show{
    display: flex;
} */
   

/* svgs */

.filter-yellow{
    filter: brightness(0) saturate(100%) invert(82%) sepia(95%) saturate(436%) hue-rotate(11deg) brightness(113%) contrast(92%);
}

/* triggers and effects */

div.hidden{
    display: none;
}

div.show{
    display: block;
}

div.underline{
    text-decoration: underline;
}

.horsevideo {
    width: 35%;
    height: auto;
  }

.smiley{
    font-family: 'Courier New', Courier, monospace;
    font-size: 36px;
    display: none;
    line-height: 25px;
    color: rgb(235, 245, 41);
}

.smiley.show{
    display: inline-block;

}

.lof{
    font-size: 109x;
    margin-left: -.5%;
    margin-top: 3px;
}

.lof-a{
    font-size: 40px;
    margin-left: -.2%;
    margin-top: 3px;
}

.lof-b{
    font-size: 40px;
    margin-left: -.2%;
    margin-top: 3px;
}

.lof-c{
    font-size: 40px;
    margin-left: -.2%;
    margin-top: 3px;
}

.lof-d{
    font-size: 40px;
    margin-left: -.2%;
    margin-top: 3px;
}

.lof-e{
    font-size: 40px;
    margin-left: -.2%;
    margin-top: 3px;
}

/* line arrow */

.verticalline {
    border-left: 5px dotted black;
    height: 1700px;
  }

.arrow {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

.verticalline.dark-mode {
    border-left:rgb(242, 235, 220);
}

.arrow.dark-mode {
    border: rgb(242, 235, 220);
}

/* proposal body */
.discomfort1 {
    opacity: 1;
}

.discomfort1.highlight{
    background-color: rgb(235, 245, 41)
}

.discomfort2 {
    opacity: 1;
}

.discomfort2.highlight{
    background-color: rgb(235, 245, 41)
}

.discomfortimg{
    top:10%;
    left: 5%;
    width:28%;
}

.timedelay1 {
    opacity: 1;
}

.timedelay1.highlight{
    background-color: rgb(235, 245, 41)
}

.timedelay2 {
    opacity: 1;
}

.timedelay2.highlight{
    background-color: rgb(235, 245, 41)
}

.timedelayimg{
    top:5%;
    left: 70%;
    width:28%;
}

.engagethebody1 {
    opacity: 1;
}

.engagethebody1.highlight{
    background-color: rgb(235, 245, 41)
}

.engagethebody2 {
    opacity: 1;
}

.engagethebody2.highlight{
    background-color: rgb(235, 245, 41)
}

.engagethebodyimg{
    top:20%;
    left: 5%;
    width:28%;
}

.nonpositive1 {
    opacity: 1;
}

.nonpositive1.highlight{
    background-color: rgb(235, 245, 41)
}

.nonpositive2 {
    opacity: 1;
}

.nonpositive2.highlight{
    background-color: rgb(235, 245, 41)
}


.nonpositiveimg{
    top:5%;
    left: 70%;
    width:25%;
}


/* final text */

div.finaltext1 {
    font-size: 20vw;
    line-height: 300px;
    transform: scaleX(0.5);
    text-align: center;
}

div.finaltext2 {
    font-size: 9vw;
    line-height: 130px;
    transform: scaleX(0.8);
    text-align: center;
    white-space: nowrap;
}

div.finaltext3 {
    font-size: 30vw;
    line-height: 300px;
    transform: scaleX(0.4);
    text-align: center;
    white-space: nowrap;
}

div.finaltext4 {
    font-size: 25vw;
    line-height: 400px;
    transform: scaleX(0.45);
    text-align: center;
    white-space: nowrap;
}

div.finaltext5 {
    font-size: 20vw;
    line-height: 310px;
    transform: scaleX(0.45);
    text-align: center;
    white-space: nowrap;
}

div.finaltext6{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 230px;
    line-height: 230px;
    white-space: nowrap;
    transform: scaleX(0.6)
}

/* debug */
div.debug{
    background-color: blue;
}