Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body class="rfont pageload" page="0014">
  <row>
    <background class="responsiveem abs-center d-block">
      <div>
        <i class="abs-center d-block bi0">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
        <i class="abs-center d-block bi1">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
        <i class="abs-center d-block bi2">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
      </div>
    </background>
    <column class="col-2 p-1 pull-right-lg">
      <picture class="responsiveem">
        <div>
          <i class="pi0">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
          <i class="pi1">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
          <i class="pi2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
          <i class="pi3">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
        </div>
      </picture>
    </column>
    <foreground class="responsiveem abs-center d-block">
      <div>
        <i class="abs-center d-block">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
      </div>
    </foreground>

    <a copyright class="op05" href="http://www.tinydesign.co.uk/ben-evans-portfolio/index.html" title="(C) Copyright 2018 Ben Evans" target="_blank">&copy; Copyright 2018 Ben Evans</a>
  </row>
</body>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Patua+One');
$animate: all .25s ease-in-out;
//colours
$body: #190d23;
$rail: #190d23;
$stroke: #190d23;
$body50: rgba($body, .5);
$shadow: #1d2049;
$skin: #efd4c6;
$top: #8E7A5D;
$radius: 1em;
$tree1: #683f44;
$tree2: #20112a;
$tree3: #444a2f;
$tree4: #23241a;
$horizon: #1d2049;
$none: rgba(0,0,0,0);
$dark: rgba(0,0,0,0.25);
$shadow75: rgba($shadow, .75);
$shadow50: rgba($shadow, .5);
$shadow25: rgba($shadow, .25);


.abs-center{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

body {
    & *, & *:before, & *:after {
        box-sizing: border-box;
        display: block;
    }
}

html, body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-family: 'Patua One', cursive;
    color: $body;
    background: $body;
    line-height: 1.7em;
    font-size: .7vmin;
}

html, body, main {
    width: 100%;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
}

main {
    flex-grow: 1;
}

row {
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

text, picture {
    width: 100%;
}

picture {
    position: relative;
    width: 100%;
    height: 100%;
}

picture:before {
    content: '';
    padding-top: 100%;
    display: block;
}

picture *, picture *:before, picture *:after, background *,
background *:before, background *:after, foreground *, foreground *:before, foreground *:after, transition:before, transition:after {
    position: absolute;
    content: '';
}

picture *, picture *:before, picture *:after, background *, background *:before, background *:after, foreground *, foreground *:before, foreground *:after {
    top: 0;
    left: 0;
}

picture, background, foreground, text {
    perspective: 5000px;
    perspective-origin: 50% 50%;
}

picture, picture *, foreground, foreground *, background, background * {
    transform-style: preserve-3d;
    /*backface-visibility: hidden;*/
}

picture > *, transition, transition:before, transition:after {
    position: absolute;
    top: 0;
    left: 0;
}

picture > *, background > *, foreground > * {
    width: 100%;
    height: 100%;
}

body {
    & background .bi0 {
        transform: translateZ(-12px);
    }

    & background .bi1 {
        transform: translateZ(-11px);
    }

    & background .bi2 {
        transform: translateZ(-10px);
    }

    & picture i.pi0 {
        transform: translateZ(-5px);
    }

    & picture i.pi1 {
        transform: translateZ(1px);
    }

    & picture i.pi2 {
        transform: translateZ(12px);
    }

    & picture i.pi3 {
        transform: translateZ(13px);
    }
}
/*resets*/
p {
    margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

a, a:visited, a:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 30px rgba(0,0,0,0);
    transition: $animate;
    display: inline-block;
    border-radius: $radius;
}

a:hover {
    box-shadow: inset 0 0 0 60px rgba(0,0,0,0.2), 0 0 0 5px rgba(0,0,0,0.2);
}



//copyright
a[copyright] {
    position: absolute;
    left: 6px;
    top: 6px;
    transform: translate(0, 132px) rotate(-90deg);
    font-size: 7px !important;
    line-height: 1;
    font-weight: 100;
    z-index: 99999999999;
    transform-origin: left top 0;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: none !important;
}


picture {
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

foreground {
    opacity: 1;
    transition: opacity .25s ease-in-out .25s;
}

text {
    opacity: 1;
    transition: opacity .25s ease-in-out .5s;
}


// page-14
// page-14
// page-14

$t1: #832F25;
$t2: #D9412A;
$t3: #270e13;

[page="0014"] background {
    transform: scale(1.4) scaleX(-1) rotate(-.5deg);
    top: 20%;
    left: 5%;
}

[page="0014"] {
    & picture i.pi2 {
        //top
        i:nth-of-type(2) {
            width: 50em;
            height: 13em;
            transform: translate3d(25em,5em,0);
            overflow: hidden;
            border-radius: 10em 10em 1em 1em;

            &:before {
                width: 100em;
                height: 100em;
                background: $t1;
                left: -50em;
                right: -50em;
                margin: auto;
                border-radius: 50%;
                border: 1em solid $t2;
                box-shadow: inset 0 .5em 0 $shadow50, inset 0 2em 0 $t1, inset 0 3em 0 $shadow50;
            }

            &:after {
                width: 50em;
                height: 4em;
                border: 1em solid $t1;
                border-top: none;
                transform: translate3d(0,8em,0);
                box-shadow: 0 .5em 0 $shadow50, inset 0 -.5em 0 $t2;
            }
        }

        i:nth-of-type(3) {
            width: 46em;
            height: 9em;
            transform: translate3d(27em,20em,0);
            background: $t1;
            box-shadow: inset 0 1em 0 $shadow50, inset 0 1em 3em $shadow50;

            &:before {
                width: 48em;
                height: 2em;
                transform: translate3d(-1em,-2em,0);
                background: $t1;
                border-radius: 0 0 1em 1em;
                box-shadow: inset 0 1em 0 $shadow50;
            }

            &:after {
                content: 'TELEPHONE';
                transform: translate3d(1em,0em,0);
                background: #B2ABA1;
                border-radius: 0 0 .1em .1em;
                box-shadow: inset -.1em .1em 0 $shadow50, -.1em .1em 0 $shadow50, 0 0 1em $shadow50;
                border: .2em solid $t1;
                font-size: 5em;
                font-style: normal;
                padding: 0 .3em 0 .3em;
                letter-spacing: .1em;
              line-height:1.1em;
            }
        }
        //sides
        i:nth-of-type(4) {
            width: 50em;
            height: 9em;
            transform: translate3d(25em,29em,0);
            background: $t1;
            border: 1em solid $t1;
            border-bottom: none;
            border-radius: 2em 2em 0 0;
            box-shadow: inset -.3em .3em 0 $t2, inset -.6em .6em 0 $t1, inset -.9em .9em 0 $shadow50, inset -1.2em 1.2em 0 $t1, inset -1.5em 1.5em 0 $shadow50, inset .3em 0 0 $shadow50, inset .6em 0 0 $t1, inset .9em 0 0 $shadow50, inset 1.2em 0 0 $t1, inset 1.5em 0 0 $shadow50;

            &:before {
                width: 2em;
                height: 2em;
                background: $t1;
                border-radius: .3em;
                box-shadow: inset .3em -.3em 0 $shadow50, inset -.3em .3em 0 $t2, -.3em .3em 0 $shadow50, .3em -.3em 0 $t2;
                border: .3em solid $t1;
            }

            &:after {
                width: 2em;
                height: 2em;
                transform: translate3d(46em,0,0);
                background: $t1;
                border-radius: .3em;
                box-shadow: inset .3em -.3em 0 $shadow50, inset -.3em .3em 0 $t2, -.3em .3em 0 $shadow50, .3em -.3em 0 $t2;
                border: .3em solid $t1;
            }
        }
        //door frame
        //left
        i:nth-of-type(5) {
            width: 10em;
            height: 92em;
            transform: translate3d(25em,37em,0);
            background: $t1;
            border-left: 1em solid $t1;
            box-shadow: inset .3em 0 0 $shadow50, inset .6em 0 0 $t1, inset .9em 0 0 $shadow50, inset 1.2em 0 0 $t1, inset 1.5em 0 0 $shadow50;
            border-radius: 0 0 0 1em;
            //right
            &:before {
                width: 10em;
                height: 92em;
                transform: translate3d(39em,0,0);
                background: $t1;
                border-right: 1em solid $t1;
                box-shadow: inset -.3em 0 0 $t2, inset -.6em 0 0 $t1, inset -.9em 0 0 $shadow50, inset -1.2em 0 0 $t1, inset -1.5em 0 0 $shadow50;
                border-radius: 0 0 1em 0;
            }

            &:after {
                transform: translate3d(5em,-3em,0);
                width: 38em;
                height: 95em;
                border: 1em solid $t1;
                box-shadow: -.5em 0 0 $shadow50, 0 0 2em $shadow50, .5em -.5em 0 $t2, inset 0 0 2em 1em $shadow75;
                border-radius: .5em .5em 0 0;
                border-bottom: none;
            }
        }
        //door
        i:nth-of-type(6) {
            transform: translate3d(32.5em,36em,1px);
            width: 34.5em;
            height: 92.75em;
            border: 3em solid $t1;
            border-bottom-width: 15em;
            border-top-width: 4em;
            box-shadow: -.3em .3em 0 $shadow50, .3em -.3em 0 $t2;
            border-radius: .5em;

            &:before {
                transform: translate3d(0em,0em,0);
                width: 100%;
                height: 100%;
                border: 1em solid $t1;
                box-shadow: -.3em .3em 0 $shadow50, .3em -.3em 0 $t2, inset -.3em .3em 0 $shadow50, inset .3em -.3em 0 $t2;
                border-radius: .5em;
            }

            &:after {
                transform: translate3d(-.1em,75em,0);
                width: 29em;
                height: 12em;
                border: .5em solid $t1;
                box-shadow: -.15em .15em 0 $shadow25, inset -.25em .25em 0 $shadow25, inset 0 0 4em $shadow25, 0 0 5em $shadow25;
                border-radius: 1em;
            }
        }
        //base
        i:nth-of-type(7) {
            width: 50em;
            height: 6em;
            transform: translate3d(25em,123.5em,0);
            border-radius: 0 0 1em 1em;
            border-bottom: 1em solid $body;
            opacity: .9;
            box-shadow: inset 0 -2em 2em $shadow25;
        }

        i:nth-of-type(1) {
            width: 60em;
            height: 20em;
            transform: translate3d(15em,118em,0);
            border-radius: 50%;
            background: $body;
            opacity: .5;

            &:before {
                width: 200em;
                height: 40em;
                transform: translate3d(-140em,0,0) rotate(-5deg);
                border-radius: 50%;
                background: $body;
                opacity: .4;
            }
        }
        //glass
        i:nth-of-type(8) {
            transform: translate3d(45em,40em,2px);
            width: 10em;
            height: 73em;
            border: 1em solid $t1;
            border-bottom-width: 0;
            border-top-width: 0;

            &:before {
                width: 100%;
                height: 98%;
                border: 1em solid $body;
                transform: translate3d(-1.5em,0,-4px);
                box-sizing: content-box;
                box-shadow: .75em 0 0 $t2, inset .75em 0 0 $t2;
            }
        }

        i:nth-of-type(9) {
            transform: translate3d(36.5em,52em,1px);
            width: 26.5em;
            height: 13em;
            border: 1em solid $t1;
            border-left-width: 0;
            border-right-width: 0;
            box-shadow: 0 .25em 0 $body, inset 0 .25em 0 $body, 0 -.25em 0 $t2, inset 0 -.25em 0 $t2;

            &:before {
                transform: translate3d(0,23em,0);
                width: 26.5em;
                height: 13em;
                border: 1em solid $t1;
                border-left-width: 0;
                border-right-width: 0;
                box-shadow: 0 .25em 0 $body, inset 0 .25em 0 $body, 0 -.25em 0 $t2, inset 0 -.25em 0 $t2;
            }

            &:after {
                transform: translate3d(0,47em,0);
                width: 26.5em;
                height: 1em;
                background: $t1;
                box-shadow: 0 .25em 0 $body, 0 -.25em 0 $t2;
            }
        }
        //furniture
                i:nth-of-type(10) {
            transform: translate3d(64.5em,79em,3px);
            width: 2.5em;
            height: 6em;
            border-radius:1em;
            box-shadow:-.15em .15em 0 $shadow50;
            background:#555;
            overflow:hidden;
            border:.25em solid #555;
            box-shadow:inset 0 0 1em #000;

            &:before{
                width:1em;
                height:6em;
                background:#808080;
                transform: translate3d(1.25em,0,0);
            }

            }
        }
        //inside
        & picture i.pi1 {
                i:nth-of-type(1) {
            transform: translate3d(33em,34em,0);
            width: 34.5em;
            height: 85em;
            border: 5em solid $t3;
            border-bottom-width: 15em;
            border-top-width: 4em;
            box-shadow: inset .25em -.25em 0 $t1;
       
                        &:before {
            transform: translate3d(-5em,-5em,0);
            width: 40em;
            height: 80em;
       box-shadow:inset 2em -6em 4em $body;
        }
        }

                //glass
        i:nth-of-type(3) {
            transform: translate3d(46em,32em,0);
            width: 10em;
            height: 73em;
            border: 1em solid $t3;
            border-bottom-width: 0;
            border-top-width: 0;

            &:before {
                width: 100%;
                height: 98%;
                border: 1em solid $body;
                transform: translate3d(-1.15em,0,-4px);
                box-sizing: content-box;
                box-shadow: .5em 0 0 $t1, inset .5em 0 0 $t1;
            }
        }

        i:nth-of-type(2) {
            transform: translate3d(38em,51em,0);
            width: 26.5em;
            height: 11.5em;
            border: 1em solid $t3;
            border-left-width: 0;
            border-right-width: 0;
            box-shadow: 0 .25em 0 $body, inset 0 .25em 0 $body, 0 -.25em 0 $t1, inset 0 -.25em 0 $t1;

            &:before {
                transform: translate3d(0,20em,0);
                width: 26.5em;
                height: 11.5em;
                border: 1em solid $t3;
                border-left-width: 0;
                border-right-width: 0;
                box-shadow: 0 .25em 0 $body, inset 0 .25em 0 $body, 0 -.25em 0 $t1, inset 0 -.25em 0 $t1;
            }
                        &:after {
                transform: translate3d(0,41em,0);
                width: 26.5em;
                height: 1em;
                background: $t3;
                box-shadow: 0 .25em 0 $body, 0 -.25em 0 $t1;
            }
        }
        }
            & foreground i {
        box-shadow: inset 0px 0px 100px $stroke, inset 0px 0px 200px $stroke;
    }


}

[page="0008"], [page="0009"], [page="0014"] {
    & *, & *:before, & *:after {
        box-sizing: border-box;
        display: block;
        }
    & background .bi0 {
        background: radial-gradient( circle at 20% 50em, #6d6355, #000);
    }
    & background .bi1 {
        opacity: .9;
        /*background: #5C5449;
            background: radial-gradient( circle at 20% 50em, #6d6355, #000);*/
    }
        //ceiling
        & background .bi1 i:nth-of-type(12) {
            transform: translate3d(-50%,-100em,0);
            width: 200%;
            height: 115.5em;
            background: radial-gradient( circle at 20% 50em, $none, #000);
            opacity: .9;
        }

        & background .bi1 i:nth-of-type(2) {
            transform: translate3d(-50%,-100em,0);
            width: 200%;
            height: 108em;
            background: #2e2823;
            background-image: linear-gradient(to right, rgba(0,0,0,0.1) 11.11%, rgba(0,0,0,0) 11.11%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 61.11%, rgba(0,0,0,0) 61.11%, rgba(0,0,0,0) 100%);
            background-size: 5em 5em;
        }

            & background .bi1 i:nth-of-type(2):before {
                transform: translate3d(0,108em,0);
                width: 200%;
                height: 1.5em;
                background: #11100f;
            }

            & background .bi1 i:nth-of-type(2):after {
                transform: translate3d(0,109.5em,0);
                width: 200%;
                height: 6em;
                background: #494039;
                opacity: .8;
                box-shadow: 0 .5em 0 rgba(0,0,0,0.5),0 1.5em 0 rgba(0,0,0,0.5);
                background-image: linear-gradient(to right, rgba(0,0,0,0.1) 11.11%, rgba(0,0,0,0) 11.11%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 61.11%, rgba(0,0,0,0) 61.11%, rgba(0,0,0,0) 100%);
                background-size: 5em 5em;
            }
        //windows
        & background .bi1 i:nth-of-type(3),
        & background .bi1 i:nth-of-type(4),
        & background .bi1 i:nth-of-type(5),
        & background .bi1 i:nth-of-type(6),
        & background .bi1 i:nth-of-type(7),
        & background .bi1 i:nth-of-type(8) {
            transform: translate3d(10em,20em,0);
            width: 20em;
            height: 45em;
            background: #312b25;
            border-radius: .5em;
            box-shadow: inset -5em 2em .1em rgba(0,0,0,0.25);
            overflow: hidden;
        }

            & background .bi1 i:nth-of-type(3):before,
            & background .bi1 i:nth-of-type(4):before,
            & background .bi1 i:nth-of-type(5):before,
            & background .bi1 i:nth-of-type(7):before,
            & background .bi1 i:nth-of-type(8):before {
                transform: translate3d(2em,2em,0);
                width: 4em;
                height: 9em;
                background: #000;
                border-radius: .5em;
                box-shadow: -.25em -.25em 0 rgba(0,0,0,0.5), 5em 0 0 #000, 4.75em -.25em 0 rgba(0,0,0,0.5), 10em 0 0 #000, 9.75em -.25em 0 rgba(0,0,0,0.5), 15em 0 0 #000, 14.75em -.25em 0 rgba(0,0,0,0.5), 0em 10em 0 #000, -.25em 9.75em 0 rgba(0,0,0,0.5), 5em 10em 0 #000, 4.75em 9.75em 0 rgba(0,0,0,0.5), 10em 10em 0 #000, 9.75em 9.75em 0 rgba(0,0,0,0.5), 15em 10em 0 #000, 14.75em 9.75em 0 rgba(0,0,0,0.5), 0em 22em 0 #000, -.25em 21.75em 0 rgba(0,0,0,0.5), 5em 22em 0 #000, 4.75em 21.75em 0 rgba(0,0,0,0.5), 10em 22em 0 #000, 9.75em 21.75em 0 rgba(0,0,0,0.5), 15em 22em 0 #000, 14.75em 21.75em 0 rgba(0,0,0,0.5), 0em 32em 0 #000, -.25em 31.75em 0 rgba(0,0,0,0.5), 5em 32em 0 #000, 4.75em 31.75em 0 rgba(0,0,0,0.5), 10em 32em 0 #000, 9.75em 31.75em 0 rgba(0,0,0,0.5), 15em 32em 0 #000, 14.75em 31.75em 0 rgba(0,0,0,0.5);
            }

        & background .bi1 i:nth-of-type(4) {
            transform: translate3d(-15em,20em,0);
        }

        & background .bi1 i:nth-of-type(5) {
            transform: translate3d(50em,20em,0);
        }

        & background .bi1 i:nth-of-type(6) {
            transform: translate3d(75em,20em,0);
        }

        & background .bi1 i:nth-of-type(7) {
            transform: translate3d(115em,20em,0);
        }

        & background .bi1 i:nth-of-type(8) {
            transform: translate3d(140em,20em,0);
        }

        & background .bi1 i:nth-of-type(5):before {
            transform: translate3d(1em,2em,0);
        }

        & background .bi1 i:nth-of-type(7):before {
            transform: translate3d(0em,2em,0);
        }

        & background .bi1 i:nth-of-type(8):before {
            transform: translate3d(-1em,2em,0);
        }
        //floor
        & background .bi1 i:nth-of-type(10) {
            transform: translate3d(-50%,70em,0);
            width: 200%;
            height: 100em;
            background: radial-gradient( circle 100em at 60% 50em, #6d6355, #000);
        }
}






@media (orientation:landscape) {
    .pull-right-lg {
        float: right;
    }
    .flex-end {
        justify-content: flex-end;
    }
    .col-2 {
        width: 50%;
    }
    .col-2 > * {
        max-width: 700px;
    }
    .flex {
        display: flex;
        flex-wrap: wrap;
    }
    .flex > * {
        flex: 1;
    }
    row {
        flex-direction: row-reverse;
    }
    .flex-column {
        flex-direction: column;
    }
  
    body:not(.pageload):not([transition="true"]) {
        & picture,
        & picture *,
        & picture *:before,
        & picture *:after,
        & background,
        & background *,
        & background *:before,
        & background *:after,
        & foreground,
        & foreground *,
        & foreground *:before,
        & foreground *:after {
            transition-property: transform;
            transition-duration: .15s;
            transition-timing-function: linear;
            will-change: scroll-position;
        }
    }
    body:not(.pageload):not([transition="true"]) {
        & background,
        & background *,
        & background *:before,
        & background *:after {
            transition-delay: .3s;
        }
    }
    body:not(.pageload):not([transition="true"]) {
        & foreground,
        & foreground *,
        & foreground *:before,
        & foreground *:after {
            transition-delay: .6s;
        }
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body:not(.pageload):not([transition="true"]) {
            & picture,
            & picture *,
            & picture *:before,
            & picture *:after,
            & background,
            & background *,
            & background *:before,
            & background *:after,
            & foreground,
            & foreground *,
            & foreground *:before,
            & foreground *:after {
                transition-property: width, height, border-radius, opacity, transform, background, left;
            }
        }
    }

    about {
        max-width: 50%;
    }
    page:not(#page-0000), abouttext, indexlist {
        &:before, &:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        &:before {
            z-index: -1;
            transform: rotate(-.5deg);
            background: rgba(245,245,245,.95);
            top: 0;
            left: 0;
        }
        &:after {
            background: rgba(0,0,0,0.1);
            z-index: -2;
            top: 2em;
            left: 2em;
            transform: rotate(2deg);
        }
        &, &:before, &:after {
            border-radius: 1em;
        }
    }
    page:not(#page-0000):nth-of-type(even), abouttext {
        &:before {
            transform: rotate(.5deg);
        }
        &:after {
            transform: rotate(-2deg);
        }
    }
    page#pagex {
        transform: translateX(100%);
    }
}
@media (orientation:portrait) {
    text {
        margin-top: 50vh;
    }
    body {
        background: $body;
    }
    page:not(#page-0000), abouttext, indexlist {
        background: #fff;
        border-radius: 1em;
    }
    page#pagex {
        border-radius: 1em 1em 0 0;
    }
    page {
        opacity: 1;
        transform: rotateX(0deg) translate3d(0,0,0);
        transition: all .5s ease-in-out .25s;
        transform-origin: 0 100%;
    }
    page[inview="no"] {
        opacity: 0;
        transform: rotateX(180deg) translate3d(0,0,0);
    }
    page.not-story-dark {
        background: $body !important;
        border: 1px solid #fff;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console