:root
{
	--layout:38.2%;
	--light-grey:#fafafa;
	--light-blue:#D7EDEE;
	--lighter-blue:#EAF4F4;
	--light-yellow:#F9E7C8;
	--black:#282828;
	--white:#fefefe;
	--intro-slide-in:transform .4s cubic-bezier(0,.74,.37,1) 0s;
	--fast-ease:cubic-bezier(.19,.09,.06,1);
	--shadow:0 2px 2px rgba(0,0,0,0.15), 0 4px 4px rgba(0,0,0,0.1), 0 8px 8px rgba(0,0,0,0.1), 0 16px 16px rgba(0,0,0,0.05);
}
html
{
	height:100%;
	overscroll-behavior:none;
	overflow-x:hidden;
}
body
{
	margin:0;
	padding:0;
	height:100%;

	background-color:white;

	font-family:'Inter',sans-serif;
	line-height:1.3;
	color:var(--black);
}
body.is-hover
{
	cursor:pointer;
}
body *
{
	box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.scrollbar-width-detect
{
	position:absolute;
	top:-9999px;
	width:100px;
	height:100px;
	overflow:scroll;
}
.no-scroll
{
	overflow-y:hidden;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.hidden
{
	display:none !important;
}
.flex
{
	display:flex;
	justify-content: space-between;
}
.mobile-only,
html:not(.is-tablet) .tablet-only,
html.is-touchdevice .pointer-only
{
	display:none;
}
.text-center
{
	text-align:center;
}
.text-right
{
	text-align:right;
}
.no-margin
{
	margin:0;
}
a
{
	color:var(--black);
}
a:hover
{
	color:blue;
}
.button,
html.is-touchdevice .button:hover
{
	display:inline-block;
	background-color:var(--black);
	padding:0 10px 0 8px;
	
	color:var(--white);
	
	text-transform:uppercase;
	font-weight:500;
	font-size:.875rem;
	/* line-height:2.375; */
	line-height:2.078rem;
	text-decoration:none;
}
.button:hover
{
	background-color:transparent;
	transition:background-color .2s ease 0s;
	color:#282828;
}
.button.blue:not(:hover)
{
	color:#d7edee;
}


/* sections  */

body
{
	padding-left:calc(100% - var(--layout));

	overflow-y:scroll;
	overflow-x:hidden;

	-webkit-overflow-scrolling: touch;
	
	scroll-snap-type: y proximity;	
}
body.no-snap
{
	scroll-snap-type:none;	
}

#sections /* shadow for section list */
{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
 	width:var(--layout);
	box-shadow:0 0 20px rgba(0,0,0,.2);
	
	transition:var(--intro-slide-in);
	
	pointer-events:none;
	
	background-color:var(--light-grey);
	
	/* glass effect tryouts */
/* 
	background-color:rgba(250,250,250,.1);
	border-left:1px solid rgba(255,255,255,.8);
	backdrop-filter: blur(10px); 
 */

	z-index:900;
}
section
{
	position:relative;
	padding:calc(4.5vh - 12px) 3vw 4.5vh;
	
	min-height:40vh;
	

	border-left:1px solid rgba(255,255,255,.2);
	background-color:var(--light-grey);
	
	line-height:1.38;

	scroll-snap-align:start;

	transition:
		background-color .3s ease 0s,
		opacity .8s var(--fast-ease) 0s,
		var(--intro-slide-in);
	
	z-index:1000;
}
section.sticky
{
	scroll-snap-align:none;
	position:sticky;
	top:7px;
	padding-top:0;
	margin-top:calc((4.5vh + 2.078rem) * -1);
	right:0;
	min-height:0;
	background-color:transparent;
	z-index:1001;
	text-align:right;
	pointer-events:none;
	border-left-color:transparent;
}
section.sticky a
{
	pointer-events:all;
}
section.sticky a.top
{
	width:2.078rem;
	padding:0 !important;
	text-align:center;
}
section.sticky a.top > span
{
	display:block;
	transform: rotate(-90deg);
}

section.sticky a.stuck
{
	transition:background-color .2s ease 0s;
	color:var(--black);
	/* background-color:var(--light-yellow); */
	background-color:transparent;
}
section.sticky a.stuck:hover
{
	color:white;
	background-color:var(--black);
}
section.sticky a.stuck.hide
{
	opacity:0;
}


body.offscreen #sections,
body.offscreen section
{
	transform:translateX(100%);
}
section.intro
{
	/* scroll-snap-align:none; */
	padding-top:250px;
}
section.info
{
	min-height:unset;
}
section.intro,
section.active
{
	background-color:var(--light-blue);
	/* background-color:rgba(215,237,238,.8); */
}
section.twentyyears,
section.about
{
	padding:4.4vh 3vw;
	background-color:var(--light-yellow);
	/* background-color:rgba(249,231,200,.8); */
}
section.about
{
	padding-bottom:5rem;
}
/* body:not(.scrolling) section:not(.active):not(.info):hover, */
section:not(.active):not(.info):not(.sticky):hover,
section.hover
{
	background-color:var(--lighter-blue);
	cursor:pointer;
	user-select:none;
}
section header
{
	padding-top:12px;
}


/* media */

@media (hover: hover) {
	
    /* ... */
	#media
	{
		pointer-events:none; /* allow mousewheel scroll for body when on media */
	}
    
    
}



#media,
#use-media
{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:hidden;
	
	/* transform:translate3d(0,0,0); */
}

#use-media
{
	width:calc(100% - var(--layout));
	transition:background-color 2s ease 0s;
	z-index:1200;
	
	overflow:visible;
}
@media (hover: hover) {
    /* ... */
}


#use-media:not(.active)
{
	opacity:0;
	pointer-events:none;
}

#media .image,
#use-media .image,
body > section > .image
{

	position:absolute;
	left:0;
	top:0;
	
	padding:0 22px;
	
	
	width:360px;
/* 
	width:calc(100% - 20px);
	height:calc(100% - 20px);
 */
	/* background-color:rgba(0,0,0,.1); */
	
	transition:
		opacity .3s ease 0s,
		filter .3s ease 0s;
	
	/* will-change: transform; */
}

body.offscreen #media .image
{
	transition:opacity .6s ease 0s;
}


#media .image.reveal
{
	opacity:0;
}

.image.debug
{
	opacity:.2;	
}


#use-media .image
{
	z-index:1;

/* 
	will-change: transform;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;	
 */


}
#use-media .image.is-section
{
	z-index:2;
}
#use-media .image.transition:not(.hover)
{
	/* transition:transform .2s var(--fast-ease) 0s; */
	transition:transform .16s ease 0s;
}

#use-media .image.dimmed
{
	z-index:0;
	
	transition:	transform .28s ease 0s;
}

html.is-safari #use-media .image.dimmed
{
	transition:none;
}


#use-media .image > div
{
	background-size:cover;
	transition:filter .3s ease 0s;
}
/* 
#use-media .image > img
{
	transition:filter .3s ease 0s;
}
 */

#use-media .image.dimmed > img,
#use-media .image.dimmed > div,
#use-media .image.dimmed > .embed
{
	/* filter: blur(1.5px); */
	/* opacity:.5; */
	filter:brightness(65%);/*  saturate(80%); */
}


#use-media .image .embed
{
	background:var(--light-grey) none no-repeat 50% 50%;
	background-size:cover;
}





#media.section .image
{
	transition:
		opacity .9s ease 0s,
		filter .9s ease .5s;
}





#media .image.hover
{
	transition:opacity .4s ease 0s;
}

#media .image.hide
{
	transition:none;
	opacity:0;

}


#media .image img,
#use-media .image img,
#use-media .embed,
body > section > .image img
{
	display:block;
	position:relative;
	width:100%;
}

#media .image > div,
#use-media .image > div:not(.caption)
{
	width:100%;

	box-shadow:var(--shadow);
        
	background-color:var(--light-grey);
        
    background-position:50% 50%;
    background-size:cover;

	image-rendering: -webkit-optimize-contrast; /* beter downscaling in Chrome */
}

html.is-safari .image > div
{
	image-rendering:auto !important;
}

/* debugging */
/* 
#use-media .image img
{
	opacity:.3
}
 */


#use-media .play
{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	z-index:1;
}
#use-media .embed:not(.paused) .play
{
	display:none;
}

#use-media .embed.has-player
{
	/*REVIEW remove background color as well while hovered?*/
	background-image:none !important;
}

body:not(.magic) #use-media .image.hover .embed.has-player.ready
{
	background-color:transparent !important;
}



#use-media iframe
{
	position:absolute;
	left:0;
	top:0;
	width:100% !important;
	height:100% !important;
	
	pointer-events:none; /* we need this to be able to monitor mousemovent over player */
}

#media .image.hover .display
{
	/* background-size:150%; */
}


#media .image img
{
	background-color:magenta;
}

#media .image.hover img
{
	object-fit:cover;
}


#media .image .title
{
	position:absolute;
	top:0;
	left:0;
	display:none;
	
}
#media .image .more
{
	position:absolute;
	bottom:30px;
	right:30px;
	display:none;
}
#media .image.more .more
{
	display:block;
}


#media .image.hover img
{
	/* box-shadow:0px 10px 30px 0 rgba(0,0,0,.5); */
}

#media.section .image:not(.hover)
{
	opacity:.5;
	/* filter: blur(1.5px); */
	
}
#media.section .image:not(.hover) img,
#media.section .image:not(.hover) > div
{
	
	filter: blur(1.5px);
}


#media .image:not(.hover)
{
	/* filter: sepia(10%) */
}

#use-media-caption
{
	position:fixed;
	left:0;
	top:0;
	background-color:var(--light-yellow);
	padding:16px;
	z-index:1300;
}
#use-media-caption.idle
{
	transition:opacity .2s linear 0s;
	opacity:0;
}
#use-media-caption.hide
{
	display:none;
}

#use-media .image .caption
{
	display:none;
	position:absolute;
	left:50%;
	bottom:40px;
	padding:16px;
	background-color:var(--light-yellow);
	transform:translateX(-50%);
}

/* html.is-tablet #use-media .image.hover .caption.auto-hide */
#use-media .image .caption.auto-hide
{
	display:block;
	animation:.2s linear 2.5s forwards fadeout;
}
@keyframes fadeout {
  from {
  	opacity:1
  }
  to {
    opacity:0
  }
}


/* typography */

section .date
{
	font-weight:200;
	font-size:23px;
	color:#5c5c5c;
}
section h4 .date
{
	font-size:21px;
}
section h2
{
	margin:-2px 0 8px 0;
	
	font-family:'Inter var',sans-serif;
	font-size:40px;
	font-weight:660;
	transition:font-weight .5s var(--fast-ease) 0s;
}
html:not(.is-safari) section:not(.info).active h2,
#use section h2
{
	/* heavier header in active section, not used in Safari due to performance issues */
	font-weight:820;
}
section h3
{
	font-weight:200;
	font-size:21px;
	margin-top:30px;
	margin-bottom:0;
}
section h3:first-child
{
	margin-top:10px;
}
section h3 + p
{
	margin-top:10px;
}
section h4
{
	margin:0;
	font-weight:400;
	font-size:21px;
}
section h4 + p
{
	font-size:18px;
}
section blockquote
{
	font-weight:300;
	font-size:18px;
	margin:18px 36px;
}
section .body p:first-child
{
	margin-top:0;
}

section .more
{
	margin-top:14px;
}
section .arrow
{
	display:inline-block;
	text-decoration: none;
	color:inherit;
	
	font-family:'Inter var',sans-serif;
	transition:font-weight 1.2s var(--fast-ease) .1s;
}
html.is-safari section .arrow
{
	transition:none;
}

section .arrow:hover
{
	font-weight:800;
}
section .arrow-down
{
	margin-top:16px;
	transform:translateY(10px) rotate(90deg);
}
section .arrow-up
{
	margin-bottom:16px;
	transform:translateY(-10px) rotate(-90deg);
}


section.about h2
{
	font-size:48px;
	line-height:1.1;
	font-weight:600;
}
section.about h2 span
{
	transition:font-weight 1.5s var(--fast-ease) .1s;
}
section.about h2 span:hover
{
	font-weight:100;
	transition:none;
}
section.about .intro
{
	margin-top:30px;
	display:flex;
	align-items: center;
}
section.about img.portrait
{
	flex-shrink:0;
	width:125px;
	margin-left:15px;
}
section.about h4
{
/* 
	word-break:break-word;
	hyphens:auto;
 */
}








section:not(.active) .active-only,
section.scrolling .active-only
{
	/* position:relative; */
	visibility:hidden;
	
	
	/* opacity:0; */
}
/* 
section.active .active-only a
{
	transition:transform .3s ease 0s;
	transform:translateY(50%);
}
 */




/* project view */

#use
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	
	padding-left:calc(100% - var(--layout));

	overflow-x:hidden;
	overflow-y:scroll;
	-webkit-overflow-scrolling: touch;
	
	z-index:1100;
	
	transform:translate3D(0,0,0);
	/* opacity:.5; */
}



#use:not(.active),
#use .active-only
{
	display:none;
}
#use header a.button
{
	display:block;
}


#use section
{
	padding-bottom:0;
	
	/* transition:height .2s cubic-bezier(.19,.09,.06,1) 0s; */
	/* transition:height .2s cubic-bezier(.2,.2,.1,1) 0s; */
	/* transition:height .2s var(--fast-ease) .15s; */
	transition:height .3s var(--fast-ease) .05s;
	
	/* transition:height .15s ease 0s; */

	/* padding-bottom:150px; */
	/* background-color:rgba(250,0,0,.3); */
	
}
#use section.transition
{
	/* height:100vh !important; */
}
#use section.transition .body
{
	max-height:0;
	overflow:hidden;
}

#use section header
{
	position:sticky;
	top:0px;
	background-color:#d7edee;
	
	/* background-color:rgba(250,0,0,.3); */
	
}
#use section header a.button
{
	position:absolute;
	right:0;
	top:7px;
}
#use section .more,
#use section.transition .next
{
	display:none;
}

#use section .body.transition
{
	overflow:hidden;
	transition:max-height .4s ease .3s;
	transition:max-height .4s cubic-bezier(.25,.2,.1,1) .25s;
	
	
	max-height:100vh;
}
#use section:not(.transition) .body
{
	min-height:100vh;
	padding-bottom:20px;
}
#use section .body h3:first-child,
#use section .body p:first-child + h3
{
	margin:0;
}
#use section .body.exit
{
	transition:margin-top 1.4s ease 0s;
	margin-top:-1000px;
}











/* logo */

#logo
{
	font-family:neue-haas-unica, sans-serif;
}
#use.offscreen #logo
{
	display:none;
}
.use
{
	position:fixed;
	left:0;
	top:0;
	
	text-align:center;
	transform-origin: 0 0;
	transform:translateY(-100px);
	
	font-size:100px;
	/* letter-spacing:-5px; */
	font-weight:700;
	line-height:90px;
	color:white;
	mix-blend-mode: difference;
	
	/* background-color:rgba(250,0,0,.5); */
	
	cursor:move;
	-webkit-user-select:none;
	user-select:none;
	
	z-index:2000;
}
.use.dot
{
	margin-top:-60px;
}
.use.media
{
	font-size:50px;
	line-height:53px;
}




/* responsive layouts */

@media (max-width:1000px)
{
	html
	{
		overflow:hidden;
	}
	.hd-only
	{
		display:none;
	}
	.button:hover
	{
	
	}
	body
	{
		padding-left:0;
		/* background-color:var(--light-blue); */
		
		
		/* overflow-y:scroll; */
		scroll-snap-type:y mandatory;
		
		/* scroll-padding-top:200px; */
		
	}
	body.proximity-snap
	{
		scroll-snap-type:y proximity;
	}
	body.proximity-snap-section
	{
		scroll-snap-type:none;/* y proximity; */
	}
	
	body.offscreen #sections,
	body.offscreen section
	{
		transform:none;
	}
	.mobile-only
	{
		display:unset;
	}
	.button.mobile-only
	{
		display:inline-block;
	}
	
	#shortcuts
	{
		position:fixed;
		bottom:0;
		z-index:3000;
		text-align:center;
		width:100%;
		transition:transform .5s ease 0s;
		/* transform:translateY(100%); */
		
		background-color:rgba(255,255,255,.25);
		-webkit-backdrop-filter: blur(9px);
		border-top:1px solid rgba(255,255,255,.4);
	}
	#shortcuts.offscreen
	{
		transform:translateY(100%);
	}
	#shortcuts .flex
	{
		justify-content: center;
	}
	#shortcuts .button
	{
		margin:1rem 1.5vw;
		padding:4px 12px;
		border-radius:4px;
	}
	#shortcuts .arrow-up
	{
		display:inline-block;
		transform:translateY(-2px) rotate(-90deg);
	}
	#shortcuts .arrow-down
	{
		display:inline-block;
		transform:translateY(2px) rotate(90deg);
	}
	#shortcuts svg
	{
		margin:0 0 -6px 0;
	}
	#shortcuts.top svg
	{
		margin:0 4px -6px -2px;
	}
	#shortcuts path
	{
		fill:var(--white);
	}
	#shortcuts.top #to-top,
	#shortcuts.top #to-about,
	#shortcuts:not(.top) .label
	{
		display:none;
	}

	
	
	#sections
	{
		display:none;
	}
	#media
	{
		z-index:1001;
		/* display:none; */

		pointer-events: none;
	}
	#media.fast .image
	{
		visibility:hidden;
	}
	#media .image
	{
		position:fixed;
	}


	#media.section .image:not(.hover) img,
	#media.section .image:not(.hover) > div
	{
	
		filter: blur(2px);
	}
	
	


/* 
	section.about
	{
		scroll-snap-align:none;
	}
 */

 
 	section.intro
 	{
 		scroll-snap-align:start;
 	}
 	section.sticky
 	{
 		position:relative;
 	}
	section:not(.info)
	{
		/* opacity:.5; */
		/* margin-bottom:10px; */
	}
	section:not(.info):not(.active):not(.sticky)
	{
		opacity:.5;
		
	}
	body > section:not(.active):not(.info):hover	
	{
		background-color:var(--light-grey) !important;
	}
	
	section.active h2
	{
		/* no font-width changes, as it might cause a wrap to newline */
		font-weight:660;
	}
	section.active.scrolling h2
	{
		/* visibility:hidden; */
	}
	
	section:not(.info)
	{
		/* background-color:transparent !important; */
		/* opacity:.2; */
	}

	section.active:not(.info),
	#use section
	{
		/* background-color:transparent; */
		background-color:rgba(215,237,238,.6);
	}
	
	section:not(.about) > p:not(.active-only):first-of-type
	{
		/* hide first paragraph in list view */
		display:none;
	}
	
/* 
	body.no-scroll > #media
	{
		opacity:0;
	}
 */
 
/* 
 	#use
 	{
 		opacity:.5;
 	}
 */
	
	#use section
	{
		min-height:0;
	}

	#use section header
	{
		/* background-color:rgba(250,0,0,.1); */
		
	}
	section header .date
	{
		/* mix-blend-mode: difference; */
	}

	#use
	{
		padding-left:0;
	}
	#use section
	{
		transition:
			/* background-color .5s ease 0s, */
			height .2s var(--fast-ease) .15s;
			
		/* box-shadow:0 0 10px rgba(0,0,0,.15), 0 0 30px rgba(0,0,0,.05); */
		box-shadow:0 0 5px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.15);
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}
/* 
	#use section.transition
	{
		height:calc(100vh + 100px) !important;
	}
 */
	#use section.active
	{
		/* background-color:rgba(215,237,238,.5) !important; */
		/* background-color:rgba(215,0,0,.2) !important;  */
		background-color:var(--light-blue);
		
		/* background-color:rgba(0,0,0,.1) !important; */
	}
	
	
	#use section .body p:first-child
	{
		margin-top:18px;
		font-size:18px;
	}
	
	#use-media-dots
	{
		position:absolute;
		left:0;
		width:100%;
		display:flex;
		justify-content: center;
	}
	#use-media-dots .dot
	{
		width:6px;
		height:6px;
		background-color:#dedede;
		border-radius:50%;
		margin:3px;
	}
	#use-media-dots .dot.active
	{
		background-color:#999999;
	}
	
	#use-media-swipe
	{
		position:absolute;
		left:0;
		top:0;
		width:100%;
		overflow-x:scroll;
		-webkit-overflow-scrolling: touch;
		
		/* background-color:rgba(0,0,0,.1); */
		/* z-index:1400; */
		
		display:flex;
		scroll-snap-type:x mandatory;
		
		z-index:0;
		
	}
	#use-media-swipe > div
	{
		scroll-snap-align: start;
		
		
		height:100%;
		min-width:100vw;
		z-index:2000;
	}
	#use-media-fullscreen
	{
		display:none;
		position:absolute;
		right:3vw;
		padding:0 10px;
		transform:translateY(-100%);
	}
	#use.has-player #use-media-fullscreen
	{
		display:block;
	}
	
	#use-media-fullscreen svg
	{
		margin-bottom:-3px;
	}
	#use-media-fullscreen path
	{
		fill:var(--white);
	}
	
	#use-media
	{
		width:100%;
		transition:none;
		z-index:1090; /* below #use panel */
	}
	#use-media .image
	{
		position:fixed;
	}
	#use-media .image .caption
	{	
		width:75%;
	}
	#use-media .embed.has-player
	{
		background-image:none !important;
		background-color:#999999 !important;
	}


}



/* modals */

div.modal
{
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;

	background-color:rgba(255,255,255,.9);
	z-index:10000;
	
	transition:opacity .25s ease 0s;
	
	overflow-y:auto;
	
	text-align: center;
}
div.modal.remove
{
	opacity:0;
}
div.modal.hidden
{
	opacity:0;
	pointer-events:none;
}
div.modal:not(.gallery):before
{
	/*	vertically centers dialogue within modal */
	content:'';
	display:inline-block;
	height:100%;
	max-height:100vh;
	vertical-align:middle;

}
div.modal .dialog
{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	
	margin:0;
	padding:10px;

	width:400px;
	max-width:96%;

	text-align:left;
}
div.modal .dialog .head
{
	padding-bottom:12px;
	border-bottom:1px solid #282828;

	font-size:18px;
	font-weight:600;
	line-height:normal;
}
div.modal .dialog .body
{
	padding:15px 0 20px 0;
	font-size:16px;
	line-height:20px;
}
div.modal .dialog .footer
{
	margin-bottom:40px;
	padding-top:15px;
	border-top:1px solid #282828;

	text-align:right;
}



/* debugging */

#fps,#console
{
	position:fixed;
	left:0;
	top:0;
	background-color:rgba(70,70,70,.8);
	color:white;
	z-index:9999;
	
	font-feature-settings: 'tnum' 1;
}
#console
{
	top:20px;
}

/* reveal-the-world view */

body > canvas
{
	display:none;
	
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	
	pointer-events:none;
}
body.magic
{
	background-color:var(--black);
}
body.magic #sections,
body.magic #use section header
{
	background-color:transparent;
}
body.magic section:not(.sticky)
{
	color:var(--white);
	background-color:rgba(107,189,255,0);
}
body.magic a
{
	color:var(--white);
}
body.magic a:hover
{
	text-decoration: none;
}
body.magic section .date
{
	color:rgba(254,254,254,.3);
}
body.magic.no-scroll > section
{
	opacity:.1;
}

body.magic section.intro,
body.magic section.active
{
	background-color: rgba(51,156,239,.3);
}

body.magic section.twentyyears,
body.magic section.about
{
	background-color:rgba(255,197,102,.14);
}

body.magic #use-media-caption
{
	background-color:rgba(249,231,200,.75);
}

body.magic section:not(.active):not(.info):not(.sticky):hover,
body.magic section.hover
{
	background-color:rgba(107,189,255,.1);
}


body.magic > canvas
{
	display:block;
	background-color:var(--black);
}

#toggle-world
{
	position:relative;
}
#toggle-world::before
{
	content:'☀';
	position:absolute;
	left:-22px;
	top:-1px;
}
body.magic #toggle-world::before
{
	content:'☼';
}
body.magic .image > div
{
	opacity:.5;
	background-image:none !important;
}
body.magic .image > div.embed > iframe
{
	display:none;
}



/* tests */

@keyframes weight {
	0% {font-variation-settings: "wght" 100 }
	100% {font-variation-settings: "wght" 900 }
}