@import url('reset.css');
@font-face {
    font-family: CSTMX;
    src: url(FONT.ttf);
}
 
html {
    background: black;
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
    user-select: none;
}

body {
    position: absolute;
}

main {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 100vh;
    background: black;
}

div {
    height: 100vh;
    width: 12vw;
    position: relative;
    display: inline-block;
    overflow: hidden;
    white-space: normal;
}

img {
    visibility: hidden;
    height: 100vh;
    z-index: 0;
}
div:hover img{
    visibility: visible;
}

a {
    text-decoration: none;
    width: 100vw;
    white-space: normal;
}


h1 {
    font-family: CSTMX, Helvetica, sans-serif;
    font-size: 4em;
    text-decoration: none;
    color: white;
    width: 20vw;
    padding: 1vh;
    padding-top: 2vh;
    z-index: 500;
    white-space: normal;
}



@keyframes transin {
    0% {width: 12vw}
    100% {width: 30vw}
}
@keyframes transout {
    0% {width: 30vw}
    100% {width: 12vw}
}



.dontshow {
    display: none;
}
.hide {
    display: none;
}


div#front1:hover, div#front2:hover, div#front3:hover, div#front4:hover, div#front5:hover, div#front6:hover, div#front7:hover, div#front8:hover, div#front9:hover, div#front10:hover, div#back:hover {
    animation: transin;
    animation-duration: .1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    width: 30vw;
}
div#front1, div#front2, div#front3, div#front4, div#front5, div#front6, div#front7, div#front8, div#front9, div#front10, div#back {
    animation: transout;
    animation-duration: .1s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

div#back1, div#back2, div#back3, div#back4, div#back5, div#back6, div#back7, div#back8, div#back9, div#back10 {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 30vw;
    background: black;
}

.text {
    color: white;
    font-family: garamond-premier-pro-display, serif;
    width: 25vw;
    padding-right: 3vw;
    z-index: 100;
/*
    position: absolute;
    top: 0;
*/
    padding: 2vh;
    white-space: normal;
    overflow-x: hidden;
    overflow-y: scroll;
    line-height: 1.25em;
}



.title {
    font-family: CSTMX, Helvetica, sans-serif;
    font-size: 15vw;
    text-decoration: none;
    color: white;
    bottom: 0px;
    width: 1000vh;
    height: 12vw;
    z-index: 50;
    white-space: normal;
    transform-origin: top left;
    transform: rotate(-90deg);
    cursor: pointer;
}

div:hover p.title{
/*    margin-left: -25vw;*/
    visibility: visible;
    font-size: 55vw;
    color: black;
}

div:hover p#white{
    visibility: visible;
    font-size: 60em;
    color: white;
}

.fiction {
    font-family: CSTMX, Helvetica, sans-serif;
    font-size: 6em;
    text-decoration: none;
    color: white;
    width: 100vw;
    z-index: 50;
    white-space: normal;
    margin: 5vw;
}

.body {
    display: none;
    visibility: hidden;
    font-family: adobe-garamond-pro, serif;
    width: 15vw;
    z-index: 100;
    position: absolute;
    bottom: 0;
    padding: 1vh;
    white-space: normal;
    color: white;
}
.intro {
    margin-left: 10vw;
    font-family: adobe-garamond-pro, serif;
    width: 22vw;
    z-index: 100;
    padding: 1vh;
    white-space: normal;
    color: white;
    line-height: 1.25em;
}
.intromobile {
    display: none;
}
.overlay {
    display: none;
}
#lulu {
    font-variation-settings: 'wght' 396;
}
#the-match {
    font-variation-settings: 'wght' 504;
}
#dandelion {
    font-variation-settings: 'wght' 522;
}
#color-and-light {
    font-variation-settings: 'wght' 729;
}
#all-will-be-well {
    font-variation-settings: 'wght' 711;
}
#the-starlet-apartments {
    font-variation-settings: 'wght' 522;
}
#confession {
    font-variation-settings: 'wght' 540;
}
#asleep-at-the-wheel {
    font-variation-settings: 'wght' 454.5;
}
#what-can-you-do-with-a-general {
    font-variation-settings: 'wght' 450;
}
#cream {
    font-variation-settings: 'wght' 306;
}
::-webkit-scrollbar { 
    display: none; !important 
}



@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { 
    
    html {
        overflow-x: hidden;
    }
    
    div#front1:hover, div#front2:hover, div#front3:hover, div#front4:hover, div#front5:hover, div#front6:hover, div#front7:hover, div#front8:hover, div#front9:hover, div#front10:hover, div#back:hover {
        animation: none;
        width: 100vw;
    }
    div#front1, div#front2, div#front3, div#front4, div#front5, div#front6, div#front7, div#front8, div#front9, div#front10, div#back {
        animation: none;
        width: 100vw;
    }
    
    div#back1, div#back2, div#back3, div#back4, div#back5, div#back6, div#back7, div#back8, div#back9, div#back10 {
        animation: none;
        overflow-x: hidden;
        overflow-y: scroll;
        width: 100vw;
        height: 80vh;
        background: black;
    }
    div:hover img{
        visibility: hidden;
    }
    div:hover p.title{
        margin-left: 0vw;
        visibility: visible;
        font-size: 18em;
        color: white;
    }
    div:hover p#white{
        visibility: visible;
        font-size: 18em;
        color: white;
    }
    .title {
        visibility: visible;
        text-decoration: none;
        color: white;
        transform: none;
        height: 12vh;
        padding-top: 0;
        white-space: normal;
        padding: 2vh;
        top: 0;
        left: 0;
        position: absolute;
        font-size: 18em;
        z-index: 200;
    }
    .body {
        display: none;
    }
    .text {
        width: 80vw;
        font-size: 3em;
        padding-left: 7vw;
        line-height: 1.25em;
    }
    div {
        width: 100vw;
        height: 13vh;
        z-index: 0;
    }
    main {
        overflow-x: hidden;
        overflow-y: scroll;
        white-space: normal;
        height: auto;
        width: 100vw;
        background: black;
    }
    body {
        position: absolute;
    }
    h1 {
        font-size: 10em;
        width: 90vw;
        padding: 5vw;
        padding-bottom: 0;
    }
    .fiction {
        font-size: 15em;
        letter-spacing: -.1em;
    }
    .intro {
        display: none;
    }
    .intromobile {
        display: block;
        margin-left: 10vw;
        font-family: adobe-garamond-pro, serif;
        width: 60vw;
        z-index: 100;
        padding: 1vh;
        white-space: normal;
        color: white;
        line-height: 1.25em;
        font-size: 3em;
        line-height: 1.25em;
    }
    div#front2 #the-match:hover {
        margin-left: -25vh;
        transition: 1.25s; 
        transition-timing-function: linear;
    }
    div#front3 #dandelion:hover {
        margin-left: -25vh;
        transition: 1.25s;  
        transition-timing-function: linear;
    }
    div#front4 #color-and-light:hover {
        margin-left: -50vh;
        transition: 2.5s;  
        transition-timing-function: linear;
    }
    div#front5 #all-will-be-well:hover {
        margin-left: -50vh;
        transition: 2.5s;  
        transition-timing-function: linear;
    }
    div#front6 #the-starlet-apartments:hover {
        margin-left: -115vh;
        transition: 5.75s;  
        transition-timing-function: linear;
    }
    div#front7 #confession:hover {
        margin-left: -55vh;
        transition: 2.75s;  
        transition-timing-function: linear;
    }
    div#front8 #asleep-at-the-wheel:hover {
        margin-left: -85vh;
        transition: 4.25s;  
        transition-timing-function: linear;
    }
    div#front9 #what-can-you-do-with-a-general:hover {
        margin-left: -160vh;
        transition: 8s;  
        transition-timing-function: linear;
    }
}