@keyframes coinAnim {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}

#entry .framed
{
	transform: rotate(2deg);
}

.challenges .framed
{
	transform: rotate(-4deg);
}

.challenges .descriptions
{
	grid-template-columns: 1fr 1fr;
}

.duckmatter.prototyping .desktop
{
	visibility: visible;
}

#unity-canvas 
{
	width: 27.2rem;
	aspect-ratio: 1;
	background: #231F20 
}

#unity-container
{
	width: fit-content;
    position: absolute;
    left: 3.9rem;
    top: 12.35rem;
}

#research .framed
{
    transform: translate(11rem, 12rem) rotate(-3deg);
}

#research .framed img
{
	width: 30rem;
}

#research .framed.low
{
	transform: rotate(-14deg);
}

#research .framed.low img
{
	width: 20rem;
}

#research .framed.high
{    
    transform: translate(37rem, -2rem) rotate(5deg);
}

#research .framed.high img
{
	width: 25rem;
}

#research .collage
{
	margin: 1rem 44rem 4rem 4rem;
}

#systemic video
{
	width: 60rem;
	transform: rotate(-1deg);
	margin: -5rem -3rem -3rem -3rem;
}

#bipolar .framed
{
	transform: translate(15rem, 24rem) rotate(-3deg);
}

#bipolar .framed img
{
	width: 30rem;
}

#bipolar .framed.low
{
	transform: rotate(6deg);
}

#bipolar .framed.low img
{
	width: 50rem;
}

#bipolar .collage
{
	margin: 3rem 2rem 14rem 2rem;
}

#playtest img
{
	width: 54rem;
	margin: -2rem 0rem 0rem 0rem;
}

#ambigious .framed img
{
	width: 42rem;
}

#ambigious .framed
{
	transform: rotate(-1deg);
}

#ambigious .framed.low.top
{
	transform: translate(-15rem, -17rem) rotate(2deg);
}

#ambigious .framed.low.bottom
{
	transform: translate(-20rem, 17rem) rotate(-6deg);
}

#ambigious .collage
{
	margin: 18rem 0rem 18rem 21rem;
}

#feel
{
	position: relative;
}

#feel .framed
{
	transform: rotate(2deg);
}

#feel .framed img
{
	width: 48rem;
}

#feel .backdrop
{
    transform: translateY(-30%);
}

.arcade
{
	position: relative;
}

.arcade img
{
	position: absolute;
	inset: 0;
	width: 35rem;
}

.arcade img.bg
{
	position: relative;
}

.arcade .animated
{
	mix-blend-mode: screen;
    animation: coinAnim 0.8s steps(2, jump-none) infinite;
}

#prototyping .collage
{
    margin: 0rem 28rem 0rem 0rem;
}

#prototyping .framed.one
{
	transform: translate(27rem, 2rem) rotate(-8deg);
}

#prototyping .framed.two
{
	transform: translate(27rem, 26rem) rotate(2deg);
}

#prototyping .framed video
{
	width: 30rem;
}

#coin
{
	position: relative;
    width: fit-content;
    margin: 0 0 0 auto;
	cursor: pointer;
}

#coin .idle
{
	position: relative;
}

#coin .hover
{
	position: absolute;
	inset: 0;
	visibility: hidden;
}

#coin:hover .idle
{
	visibility: hidden;
}

#coin:hover .hover
{
	visibility: visible;
}

#insertCoin
{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--white100);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 200;
    white-space: nowrap;
    animation: coinAnim 2s steps(2, jump-none) infinite;
}

#emergence .framed img
{
	width: 32rem;
}

#emergence .framed.three img
{
	width: 25rem;
}

#emergence .framed.primary img
{
	width: 65rem;
}

#emergence .framed.primary
{
	transform: rotate(-1deg);
}

#emergence .framed.one
{
	transform: translate(-20rem, 5rem) rotate(-7deg);
    top: unset;
    bottom: 0;
}

#emergence .framed.two
{
	transform: translate(-20rem, -5rem) rotate(2deg);
}

#emergence .framed.three
{
	left: unset;
    right: 0;
    transform: translate(19rem, 3rem) rotate(5deg);
}

#emergence .collage
{
	margin: 6rem 20rem 0rem 16rem;
}

#sound .framed video
{
	width: 50rem;
}

#sound .framed
{
	transform: rotate(-2deg);
}

#world
{
	margin: 8rem 0rem 0rem 0rem;
}

#world .backdrop
{
	position: relative;
    height: 58rem;
    width: 100vw;
    object-fit: cover;
}

#world .collage
{
	position: absolute;
}

#world .framed img
{
	width: 30rem;
}

#world .framed.one img
{
	width: 40rem;
}

#world .framed.two img
{
	width: 37.5rem;
}

#world .framed.four img
{
	width: 25rem;
}

#world .framed
{
	left: 50%;
	top: 50%;
}

#world .framed.one
{
	transform: translate(-50rem, -2rem) rotate(0deg);
}

#world .framed.two
{
	transform: translate(9rem, -3rem) rotate(-1deg);
}

#world .framed.three
{
	transform: translate(-55rem, 42rem) rotate(2deg);
}

#world .framed.four
{
	transform: translate(-34rem, 32rem) rotate(-5deg);
}

#world .framed.five
{
	transform: translate(17rem, 38rem) rotate(-3deg);
}

#cg .collage
{
	margin: 22rem 0rem 0rem 11rem;
}

#cg .framed img
{
	width: 48rem;
}

#cg .framed.low img
{
	width: 50rem;
}

#cg .framed.low
{
	transform: translate(-10rem, -18rem) rotate(2deg);
}

#cg .framed
{
	transform: rotate(-3deg);
}

#result .content
{
	grid-template-rows: 1fr auto 1fr auto 1fr;
}

#result .framed.result video
{
	width: 56rem;
}

#result .bplan img
{
	width: 16rem;
}

#result .deck img
{
	width: 28rem;
}

#result .framed.result.one
{
	grid-row: 1;
	grid-column: 1;
	transform: translate(-4rem, 0) rotate(-2deg);
}

#result .framed.result.two
{
	grid-row: 3;
	grid-column: 1;
	transform: rotate(2deg);
	justify-self: start;
}

#result .framed.result.three
{
	grid-row: 5;
	grid-column: 1;
	transform: translate(-4rem, 0) rotate(-1deg);
}

#result .collage.bplan
{
    left: 0;
    top: 0;
	grid-row: 2;
	grid-column: 1;
	position: absolute;
	transform: translate(51rem, -5rem) rotate(-16deg);
}

#result .bplan .foreground,
#result .deck .foreground
{
	border: none;
}

#result .bplan .framed
{
	transform: translate(9rem, 1rem) rotate(9deg);
}

#result .bplan .framed.primary
{
	transform: unset;
}

#result .deck .framed
{
	transform: translate(6rem, 13.5rem) rotate(-5deg);
}

#result .deck .framed.primary
{
	transform: unset;
}

#result .collage.deck
{
	grid-row: 4;
    grid-column: 1;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-4rem, -12rem);
}

#result .description.one
{
	grid-row: 1;
	grid-column: 2;
}

#result .description.two
{
	grid-row: 3;
	grid-column: 2;
}

#result .description.three
{
	grid-row: 5;
	grid-column: 2;
}

#sponsored
{
	display: inline-flex;
    flex-direction: column;
    align-items: center;
}

#sponsored img
{
	width: 20rem;
}

@media (max-width: 1920px)
{
	#emergence .framed img
	{
		width: 27rem;
	}

	#emergence .framed.three img
	{
		width: 21rem;
	}
	
	#emergence .framed.one
	{
		transform: translate(-14rem, 5rem) rotate(-3deg);
	}
	
	#emergence .framed.two
	{
		transform: translate(-11rem, -4rem) rotate(2deg);
	}

	#emergence .framed.three
	{
		transform: translate(14rem, 5rem) rotate(5deg);
	}

	#world .framed img
	{
		width: 25rem;
	}

	#world .framed.one img
	{
		width: 36rem;
	}

	#world .framed.two img
	{
		width: 35rem;
	}

	#world .framed.one 
	{
    	transform: translate(-47rem, -2rem) rotate(0deg);
	}

	#world .framed.two
	{
		transform: translate(8rem, -2rem) rotate(-1deg);
	}

	#world .framed.three
	{
		transform: translate(-48rem, 44rem) rotate(2deg);
	}

	#world .framed.five
	{
		transform: translate(17rem, 42rem) rotate(-3deg);
	}
}

@media (max-width: 1600px), (max-height: 1080px)
{
	#research .collage
	{
		margin: 1rem 35rem 5rem 2rem
	}

	#research .framed 
	{
    	transform: translate(9rem, 12rem) rotate(-3deg);
	}

	#bipolar .framed.low img 
	{
    	width: 44rem;
	}

	#bipolar .framed img 
	{
    	width: 24rem;
	}
	
	#bipolar .framed 
	{
    	transform: translate(15rem, 21rem) rotate(-3deg);
	}

	#bipolar .collage 
	{
    	margin: 3rem 1rem 10rem 1rem;
	}

	#ambigious .framed img 
	{
    	width: 36rem;
	}

	#ambigious .framed.low.bottom 
	{
    	transform: translate(-19rem, 14rem) rotate(-6deg);
	}

	#ambigious .framed.low.top 
	{
    	transform: translate(-13rem, -14rem) rotate(2deg);
	}

	#ambigious .collage 
	{
    	margin: 14rem 0rem 15rem 20rem;
	}

	#research .framed.high img
	{
		width: 20rem;
	}

	#research .framed.high 
	{
    	transform: translate(31rem, -1rem) rotate(5deg);
	}

	#research .framed img
	{
		width: 24rem;
	}

	#research .framed.low img
	{
		width: 16rem;
	}

	#prototyping .framed
	{
		display: none;
	}

	#prototyping .collage
	{
		margin: unset;
	}

	#emergence .framed:not(.primary)
	{
		display: none;
	}

	#emergence .collage
	{
		margin: unset;
	}
	
	#emergence .framed.primary img 
	{
    	width: 54rem;
	}
	
	#world .framed
	{
		display: none;
	}
	
	#world .backdrop
	{
		height: 40rem;
		mix-blend-mode: normal;
	}

	#world
	{
		margin: auto 0;
	}

	#cg .framed.low img
	{
		width: 42rem;
	}
	
	#cg .framed img 
	{
    	width: 40rem;
	}

	#cg .framed.low 
	{
    	transform: translate(-10rem, -15rem) rotate(2deg);
	}

	#cg .collage 
	{
    	margin: 18rem 0rem 0rem 10rem;
	}

	#result .collage.bplan 
	{        
		transform: translate(-17rem, -7rem) rotate(-16deg);
        right: 0;
		left: unset;
	}

	#result .bplan img 
	{
    	width: 14rem;
	}
	
	#result .deck .framed:not(.primary)
	{
		display: none;
	}

	#result .deck .framed.primary
	{
		transform: translate(2rem, 4rem) rotate(-5deg);
	}

	#result .framed.result video 
	{
	    width: 48rem;
	}

	#result .framed.result.one 
	{
		transform: rotate(-2deg);
	}

	#result .framed.result.two
	{
		justify-self: unset;
	}

	#result .framed.result.three 
	{
		transform: rotate(-1deg);
	}
}

@media (max-width: 1360px)
{
	#result .description.one 
	{
		grid-row: 2;
		grid-column: 1;
	}
	
	#result .description.two 
	{
		grid-row: 4;
		grid-column: 1;
	}
	
	#result .description.three 
	{
		grid-row: 6;
		grid-column: 1;
	}

	#result .collage.bplan,
	#result .collage.deck
	{
		display: none;
	}
}

@media (max-width: 1024px)
{
	#research .collage
	{
		margin: auto;
	}

	#research .framed
	{
		display: none;
	}

	#research .framed.high
	{
		display: block;
		position: relative;
		transform: rotate(5deg);
	}
	
	#research .framed.high img
	{
    	width: 26rem;
	}

	#systemic video 
	{
    	width: 48rem;
	}

	#bipolar .collage
	{
		margin: auto;
	}

	#bipolar .framed:not(.primary)
	{
		display: none;
	}

	#bipolar .framed.low img,
	#ambigious .framed img,
	#feel .framed img,
	#emergence .framed.primary img
	{
    	width: 32rem;
	}

	#playtest img 
	{
		width: 34rem;
		margin: auto;
	}

	#ambigious .collage 
	{
    	margin: 14rem 0rem 15rem 2rem;
	}
	
	#ambigious .framed.low.top 
	{
    	transform: translate(-2rem, -14rem) rotate(2deg);
	}

	#ambigious .framed.low.bottom 
	{
    	transform: translate(-3rem, 14rem) rotate(-6deg);
	}

	#sound .framed video 
	{
    	width: 34rem;
	}
	
	#cg .collage 
	{
		margin: 16rem 0rem 0rem 4rem;
	}

	#cg .framed.low 
	{
    	transform: translate(-4rem, -15rem) rotate(2deg);
	}

	#cg .framed.low img 
	{
    	width: 38rem;
	}

	#cg .framed img 
	{
    	width: 36rem;
	}
	
	#result .framed.result video 
	{
    	width: 32rem;
	}
}

@media (max-width: 640px), (max-height: 800px) and (max-width: 1360px)
{
	#research .framed.high img 
	{
    	width: 17rem;
	}

	#systemic video 
	{
		width: 35rem;
		margin: -5rem -3rem -1rem -3rem
	}

	#bipolar .framed.low img, 
	#ambigious .framed img, 
	#feel .framed img, 
	#emergence .framed.primary img 
	{
    	width: 20rem;
	}

	#playtest img 
	{
		width: 22rem;
		margin-top: -2rem;
	}

	#ambigious .collage 
	{
    	margin: 9rem 0rem 9rem 2rem;
	}

	#ambigious .framed.low.top 
	{
    	transform: translate(-2rem, -9rem) rotate(2deg);
	}
	
	#ambigious .framed.low.bottom 
	{
    	transform: translate(-3rem, 9rem) rotate(-6deg);
	}
	
	.arcade 
	{
    	display: none;
	}

	#prototyping .framed
	{
		position: relative;
		display: block;
	}

	#prototyping .framed.one
	{
		transform: rotate(1deg);
        margin-bottom: -2rem;
	}

	#prototyping .framed.two
	{
		transform: rotate(-3deg);
	}

	#prototyping .framed video 
	{
		width: 20rem;
	}

	#coin
	{
		display: none;
	}

	#sound .framed video 
	{
    	width: 21rem;
	}

	#world .backdrop 
	{
		height: 25rem;
	}

	#cg .collage 
	{
	    margin: 13rem 0rem 0rem 3rem;
	}

	#cg .framed.low 
	{
    	transform: translate(-1rem, -12rem) rotate(2deg);
	}

	#cg .framed.low img 
	{
    	width: 30rem;
	}

	#cg .framed img 
	{
    	width: 28rem;
	}

	#result .framed.result 
	{
    	margin: 0 -2rem;
	}

	#result .framed.result video 
	{
    	width: 22rem;
	}
	
	#sponsored 
	{
		margin: 12vh auto 7vh auto;
	}

	#sponsored p
	{
		margin: 0;
	}

	#sponsored img
	{
		width: 16rem;
	}
}