:root{

--blue:#1717df;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:var(--blue);

font-family:'Manjari',sans-serif;

color:white;

overflow-x:hidden;

}

/* Full Capture Area */

#storyCapture{

width:100%;

min-height:100vh;

background:var(--blue);

position:relative;

overflow:hidden;

padding-bottom:40px;

}

/* Noise */

.noise{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background-image:url("noise.png");

    background-repeat:repeat;

    background-size:250px;

    opacity:.8;

    mix-blend-mode:screen;

    pointer-events:none;

    z-index:9999;

}

/* Banner */

.banner{

display:block;

width:min(1000px,92vw);

margin:20px auto;

}

/* Poster */

.poster{

position:relative;

width:min(92vw,850px);

margin:auto;

}

/* Frame */

.frame{

width:100%;

display:block;

}

/* Quote Area */

.content-zone{

position:absolute;

left:14%;
right:14%;

top:15%;
bottom:15%;

display:flex;

align-items:center;

justify-content:center;

padding:25px;

overflow:hidden;

text-align:center;

}

/* Quote */

.quote{

width:100%;

font-weight:700;

line-height:1.8;

font-size:34px;

word-break:break-word;

}

/* Footer */

.footer-image{

display:block;

width:100%;

margin-top:40px;

}

/* Story Button */

.story-btn{

position:fixed;

right:20px;

bottom:20px;

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

border:none;

border-radius:999px;

cursor:pointer;

background:
linear-gradient(
135deg,
#f9ce34,
#ee2a7b,
#6228d7
);

color:white;

font-family:'Manjari',sans-serif;

font-size:15px;

font-weight:700;

box-shadow:
0 10px 25px rgba(0,0,0,.35);

z-index:999;

}

.story-btn img{

width:26px;
height:26px;

object-fit:contain;

filter:
brightness(0)
invert(1);

}

/* Random */

.random-btn{

position:fixed;

right:25px;

bottom:95px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:white;

color:#1717df;

font-size:28px;

font-weight:700;

cursor:pointer;

box-shadow:
0 8px 20px rgba(0,0,0,.3);

z-index:999;

}

/* Mobile */

@media(max-width:768px){

.quote{

font-size:22px;

line-height:1.7;

}

.story-btn{

padding:10px 14px;

font-size:13px;

}

.story-btn img{

width:22px;
height:22px;

}

}