body.flying {
	overflow: hidden !important;
}

header, footer, nav {
	z-index: 11;
	position: relative;
}
.sib {
	position: relative;
	z-index: 10;
}

.scraps.scraps-vignette:after {
	content:'';
	position: fixed;
	z-index: 9;
	left: 0;
	top: -5vw;
	height: calc(100vh + 10vw);
	width: 100%;
	background: radial-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
	pointer-events: none;
	opacity: 0.3;
}
.scraps.scraps-vignette.scraps-dark:after {
	opacity: 0.7;
}


.sdummy {
	visibility: hidden;
	pointer-events: none;
/*	z-index: 99;*/
/*	position: relative;*/
}
.sdummy > * {
	scroll-margin-top: -10px;
/*	background: linear-gradient(45deg,#eee,#333);*/
}

.scrapsheet {
	position: fixed !important;
	width: 520vw; /* determine this in JS with a formula? */
	top: -100vh;
	left: -100vw;
	padding: 100vh 100vw;
	transition: transform 1s ease-in-out, transform-origin 1s linear;
	display: block;
	transition-origin: 50% 50%;
	box-sizing: border-box;
}

.flying .scrapsheet {
	animation-duration: 1.2s; /* make option? */
	animation-timing-function: ease-out;
}
.flyleftup    .scrapsheet { animation-name: flyleftup;    }
.flyrightup   .scrapsheet { animation-name: flyrightup;   }
.flyleftdown  .scrapsheet { animation-name: flyleftdown;  }
.flyrightdown .scrapsheet {	animation-name: flyrightdown; }

@keyframes flyleftup {
	0% { transform: none }
	50% { transform: rotateZ(1deg) rotateY(10deg) scale(0.94) translateY(100px) }
	100% { transform: none }
}
@keyframes flyrightup {
	0% { transform: none }
	50% { transform: rotateZ(-1deg) rotateY(-10deg) scale(0.94) translateY(100px) }
	100% { transform: none }
}
@keyframes flyleftdown {
	0% { transform: none }
	50% { transform: rotateZ(1deg) rotateY(10deg) scale(0.94) translateY(-100px) }
	100% { transform: none }
}
@keyframes flyrightdown {
	0% { transform: none }
	50% { transform: rotateZ(-1deg) rotateY(-10deg) scale(0.94) translateY(-100px) }
	100% { transform: none }
}

.sdummy div {
	background: linear-gradient(45deg, #000, #ccc);
	width: 60vw;
}

.scrapsheet > .scrap {
	min-height: 55vh;
	transition: all 1s;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	filter: grayscale(0.8) blur(1px) brightness(1.4);
	box-sizing: content-box;
	cursor: crosshair;
	width: auto !important;
	max-width: none !important;
/*	opacity: 0.5;*/ 
}
.scraps-dark .scrapsheet > .scrap {
	filter: grayscale(0.8) blur(2px) brightness(0.7);
	opacity: 1;
}
.scrapsheet > .scrap.hot, .scrap:hover {
	filter: none !important;
	z-index: 10;
	opacity: 1;
}
.scrapsheet > .scrap.hot {
	cursor:	default;
}

.scrap > * {
	max-width: 85vw;
	width: 1200px;
	margin: calc(20px + 2vw) !important; 
	padding: 3vw;
}

.scrap > p, .scrap > h1, .scrap > h2, .scrap > h3, .scrap > h4, .scrap > h5, .scrap > h6 {max-width: 600px !important}

.scraps-shadows .scrap .has-background:not(.has-background .has-background),
.scraps-shadows .scrap > figure > img,
.scraps-shadows .scrap > .wp-block-cover,
.scraps-shadows .scrap > :not(.has-background) img {
	box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	border-radius: 2px 3px 0 40% / 50% 50% 0px 3px;
}