@font-face{

    /* Name used later */
    font-family:"beau";

    /* Load font */
    src:url("fonts/BeauRivage-Regular.ttf");

}

@font-face{

    /* Name used later */
    font-family:"stories";

    /* Load font */
    src:url("fonts/F25_BlackletterTypewriter.otf");

}

:root {
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body{

    margin:0;

    background:
        #111
        url("images/background-4.webp")
        center top / cover
        no-repeat;

    overflow-x:hidden;

}

body.home{

    min-height:100vh;

    overflow:hidden;

}

/*==================================
    COVER
==================================*/

.cover{

    position:relative;

    width:100%;
    max-width:1000px;
    @media (min-width: 1200px) {
    .cover {
        max-width: 85%;
    }
}

    margin:auto;


    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    transform-origin:center center;
    isolation:isolate;


    

}

.cover-image{

    display:block;

    width:100%;
    height:auto;

}

body.zooming .cover{

    transition:transform 2s cubic-bezier(1,-0.008,.85,.005);
    will-change:transform;

}

/*==================================
    SCROLL
==================================*/

.scroll{

    position:absolute;

    width:1100px;
    aspect-ratio:2048 / 682;

    top:20%;
    left:50%;

    transform:translateX(-50%) scale(1.5);



}

.paper{

    position:absolute;

    width:1100px;
    max-width:none;

    left:50%;
    transform:translateX(-50%);

    pointer-events:none;

}

.paper-window{

    position:absolute;

    width:190px;
    height:100%;

    left:50%;
    transform:translateX(-50%);

    overflow:hidden;
    contain:paint;

}




/*==================================
    HANDLES
==================================*/

.left{

    position:absolute;

    width:2.5%;

    top:-1%;
    left:50%;

    transform:translateX(-110px);

}

.right{

    position:absolute;

    width:2.1%;

    top:-1%;
    left:50%;

    transform:translateX(90px);

}

/*==================================
    STORIES
==================================*/

.story-1{
    top: 25%;
}

.story-2{
    top:35%;
}


/*==================================
    ANIMATION
==================================*/

.left,
.right{

    transition: transform .35s ease-in-out;

}

.paper-window{

    transition: width .35s ease-in-out;

}

body.leaving .left,
body.leaving .right,
body.leaving .paper-window{

    transition-duration:.65s;

}

a:hover ~ .left{

    transform:translateX(-165px);

}

a:hover ~ .right{

    transform:translateX(140px);

}

a:hover ~ .paper-window{

    width:300px;

}

.scroll.open .left{

    transform:translateX(-558px);

}

.scroll.open .right{

    transform:translateX(530px);

}

.scroll.open .paper-window{

    width:1100px;

}


/*==================================
    TITLES
==================================*/

h2{

    position:absolute;

    top:5%;
    left:50%;

    transform:translate(-50%,-50%);

    margin:0;

    font-family:"beau", serif;
    font-size:50px;
    font-weight:normal;

    color:#28140d;

    text-shadow:
        0px 0px 5px #dbb860,
        -0.5px -0.5px 0.5px #5d5e56,
        1px 1px 3px #2c150a;

}

h1{

    position:absolute;

    top:15%;
    left:49%;

    transform:translate(-50%,-50%);

    margin:0;

    font-family:"beau", serif;
    font-size:120px;
    font-weight:normal;

    color:#dbb860;

    text-shadow:5px 5px 2px rgb(9,21,23);

}


/*==================================
    LINKS
==================================*/

a{

    position:absolute;

    z-index:10;

    top:12.5%;
    left:50%;

    transform:translate(-50%,-50%);

    margin:0;

    font-family:"stories";
    font-size:22px;

    letter-spacing:-1px;

    text-decoration:none;

    color:#28140dea;

    /* text-shadow:5px 5px 2px rgb(9,21,23); */

}

a:hover{

    color:rgb(222,225,179);

    text-shadow:0px 0px 8px #000000;

    transition:.35s ease;

}


/*==================================
    PARAGRAPHS
==================================*/

p{

    font-family:"beau";

    font-size: 30px;

}

.p2{
    text-align:center;
}

/*==================================
    FADER
==================================*/

#fade {
    position: fixed;
    inset: 0;
    background: black;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s 1s;
    z-index:20;
}

#fade.show {
    opacity: 1;
}