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

* {
  margin: 0;
  overscroll-behavior: none;
}
body {
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  text-transform: uppercase;
}
#root, #__next {
  isolation: isolate;
}

p, h1, h2, h3, h4, h5, h6, ul, li {
    display: block;
    list-style-type: disc;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    unicode-bidi: isolate;
    line-height: 1;
}



/* ----- BASE ----- */


html {
	font-size: 21px;
	font-style: normal;
}

a, a#button, a#button::after, a#button.down, a#button.down::after {
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	transition: 0.2s ease;
}



/* ----- 8 BIT ----- */

body._8bit {
	background-color: #000;
	font-family: "VT323", serif;
	font-weight: 400;
	font-size: 1.2rem;
	color: #ffffff;
	align: center;

	.nav, .footer {
		padding: 1rem 0;
		background-color: #000;
	}

	.main {
		background-color: #fff;
		color: #000;
		margin: 100px auto;
		padding: 2.2rem;
		position: relative;
		text-align: center;
		max-width: 500px;
		z-index: 1;
	}

	.corner {
		width: 16px;
		height: 16px;
		background-color: #000;
		position: absolute;
	}

	.corner.one {top: 0; left: 0;}
	.corner.two {top: 0; right: 0;}
	.corner.three {bottom: 0; right: 0;}
	.corner.four {bottom: 0; left: 0;}

	img {
		width: 100%;
		max-width: 300px;
		margin: 0 auto .5rem;
	}

	h1 {
		font-weight: 400;
		font-size: 4rem;
		margin-bottom: .5rem;
	}

	p {
		font-size: .9rem;
		letter-spacing: 1px;
		margin-bottom: 1.7rem;
		line-height: 1.4;
	}


	a#button {
		background-color: #000;
		color: #fff;
		padding: .5rem 1rem;
		text-transform: uppercase;
		border: solid 3px #fff;
		text-decoration: none;
		margin: 1.3rem auto .4rem;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
    }

    a#button::after {
	    content: url("img/play1.png");
	    line-height: 0;
	    margin-left: 0.6rem;
	    filter: grayscale(100%) brightness(10.0);
	}

	a#button:hover {
		background-color: #fff;
		color: #000;
		border: solid 3px #000;
	}

	a#button:hover::after {
		content: url("img/play2.png");
		line-height: 0;
		filter: grayscale(100%) brightness(0.0);
	}

	a#button.down::after {
		content: url("img/pause1.png");
		line-height: 0;
		filter: grayscale(100%) brightness(10.0);
    }

    a#button.down:hover::after {
    	content: url("img/pause2.png");
    	line-height: 0;
    	filter: grayscale(100%) brightness(0.0);
    }

	.footer ul, .footer ul li {
		list-style: none;
		margin: 0;
	}

	.footer ul {
		margin: 0 auto;
		text-align: center;
	}

	.footer ul li {
		display: inline-block;
		padding: .5rem 1rem;
	}

	.footer a {
		color: #fff;
	}

	.footer a:hover {
		background-color: #fff;
		color: #000;
	}

	.contentContainer {
		position:relative;
		z-index: 10;
	}

	.canvasContainer {
		width: 100vw;
  		height: 100vh;
  		position: fixed;
  		top: 0;
  		left: 0;
  		z-index: 1;
	}

	canvas {
		object-fit: cover;
  		width: 100vw;
  		height: 100vh;
  		position: fixed;
  		top: 0;
  		left: 0;
	  	image-rendering: pixelated;
		filter: contrast(10000%);
	}

	video {
		height: 100%;
    	width: 100%;
	}


}




/* ----- INTERFERENCE ----- */

body.inter {
	background-color: #000;
	font-family: 'Space Mono', monospace;
	font-weight: 700;
	color: #ffffff;
	align: center;

	.contentContainer {
		position: relative;
	}

	div.animWrap {
		background: #000;
		display: flex;
		flex-grow: 2;
		flex-wrap: nowrap;
		justify-content: center;
		padding: .8rem 0 1.1rem;
		margin-bottom: 3rem;
		align-items: center;
		position: relative;
	}

	.redCircle {
		width:20px;
		height: 20px;
		border-radius: 50%;
		background-color: red;
		margin-right: 1rem;
	}

	div.anim {
		background: #000;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 5rem;
		line-height: 1;
		display: flex;
		position: relative;
	}

	.nav, .footer {
		padding: 1rem 0;
		text-align: center;
	}

	.nav {
		font-size: 1.3rem;
	}

	.main {
		color: #fff;
		margin: 5rem auto;
		padding: 2rem;
		text-align: center;
		max-width: 950px;
  		align-items: center;
  		justify-content: center;
	}

	p {
		background: #000;
		color: #fff;
		font-size: .7rem;
		letter-spacing: 1px;
		padding: 1.1rem;
		margin: 0 auto 1.5rem;
		line-height: 1.4;
		max-width: 370px;
	}


	a#button {
		background-color: #fff;
		color: #000;
		text-decoration: none;
		padding: .5rem 1rem;
		text-transform: uppercase;
		margin: 1.3rem auto .4rem;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		text-transform: uppercase;   
    }

    a#button::after {
	    content: url("img/play1.png");
	    line-height: 0;
	    margin-left: 0.6rem;
	    filter: brightness(0.5);
	}

	a#button:hover {
		color: red;
	}

	a#button:hover::after {
		content: url("img/play2.png");
		line-height: 0;
		filter: brightness(0.8) saturate(1.3);
	}

	a#button.down::after {
		content: url("img/pause1.png");
		line-height: 0;
		filter: brightness(0.5);
    }

    a#button.down:hover::after {
    	content: url("img/pause2.png");
    	line-height: 0;
    	filter: brightness(0.8) saturate(1.3);
    }

	.footer {
		background-color: #000;
		width: 100%;
		font-size: .8rem;
	}

	.footer ul, .footer ul li {
		list-style: none;
		margin: 0;
	}

	.footer ul {
		margin: 0 auto;
		text-align: center;
	}

	.footer ul li {
		display: inline-block;
		padding: .5rem 1rem;
	}

	.footer a {
		text-decoration: none;
		color: #fff;
		text-transform: uppercase;
	}

	.footer a:hover {
		color: red;
	}

}



@keyframes blink {
  50% {
    opacity: 0.0;
  }
}

@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

.redCircle {
  animation: blink 1.5s step-start 0s infinite;
  -webkit-animation: blink 1.5s step-start 0s infinite;
}





div.anim {animation: glitch 1s linear infinite; position: relative;}

	@keyframes glitch {
		2%,64%{transform: translate(1px,0) skew(0deg);}
		4%,60%{transform: translate(-1px,0) skew(0deg);}
		62%{transform: translate(0,0) skew(5deg);}
	}

	div.anim:before, div.anim:after{content: attr(title); position: absolute; left: 0;}

	div.anim:before {animation: glitchTop 1s linear infinite; clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);}

	@keyframes glitchTop {
		2%,64%{transform: translate(1px,-1px);}
		4%,60%{transform: translate(-1px,1px);}
		62%{transform: translate(8px,-1px) skew(-8deg);}
	}

	div.anim:after {
		animation: glitchBottom 1.5s linear infinite;
		clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
		-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
	}

	@keyframes glitchBottom {
		2%,64%{transform: translate(-1px,0);}
		4%,60%{transform: translate(-1px,0);}
		62%{transform: translate(-14px,3px) skew(14deg); }
	}


.imgContainer {
  background: #000 no-repeat center;
  background-size: 0;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
.imgContainer::before, .imgContainer::after,
.imgContainer .channel {
  background: inherit;
  background-size: cover;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.imgContainer::before {
  animation: glitch-before 2s linear infinite alternate both;
  content: "";
}
@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 78.1568162976%, 100% 78.1568162976%, 100% 84.3592915354%, 0% 84.3592915354%);
    transform: translate(-7.1460051536%, -0.0255601522%);
  }
  2% {
    clip-path: polygon(0% 25.3334023216%, 100% 25.3334023216%, 100% 33.4574073835%, 0% 33.4574073835%);
    transform: translate(4.6467843723%, -0.2036172994%);
  }
  4% {
    clip-path: polygon(0% 2.5066050696%, 100% 2.5066050696%, 100% 4.9389995174%, 0% 4.9389995174%);
    transform: translate(-2.5402155461%, 0.3585251142%);
  }
  6% {
    clip-path: polygon(0% 31.1120027132%, 100% 31.1120027132%, 100% 40.6155563445%, 0% 40.6155563445%);
    transform: translate(3.0778085636%, 0.2258334128%);
  }
  8% {
    clip-path: polygon(0% 45.8280359225%, 100% 45.8280359225%, 100% 49.6388434003%, 0% 49.6388434003%);
    transform: translate(-0.76293422%, 0.3922345453%);
  }
  10% {
    clip-path: polygon(0% 1.2292948168%, 100% 1.2292948168%, 100% 6.2385241481%, 0% 6.2385241481%);
    transform: translate(1.9600866896%, -0.434980751%);
  }
  12% {
    clip-path: polygon(0% 38.6416398853%, 100% 38.6416398853%, 100% 40.4561864395%, 0% 40.4561864395%);
    transform: translate(-1.6070459147%, -0.1481803453%);
  }
  14% {
    clip-path: polygon(0% 13.5878788818%, 100% 13.5878788818%, 100% 15.73438522%, 0% 15.73438522%);
    transform: translate(-7.2843092882%, -0.0298450795%);
  }
  16% {
    clip-path: polygon(0% 40.5237364944%, 100% 40.5237364944%, 100% 49.1197372158%, 0% 49.1197372158%);
    transform: translate(-7.8585974493%, 0.1053332391%);
  }
  18% {
    clip-path: polygon(0% 23.1058771977%, 100% 23.1058771977%, 100% 26.3899633624%, 0% 26.3899633624%);
    transform: translate(-5.5483605379%, -0.2662174273%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
.imgContainer::after {
  animation: glitch-after 2s linear infinite alternate both;
  content: "";
}
@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 62.7636349243%, 100% 62.7636349243%, 100% 71.6138007938%, 0% 71.6138007938%);
    transform: translate(7.8247634246%, -0.1403523095%);
  }
  2% {
    clip-path: polygon(0% 72.1241543263%, 100% 72.1241543263%, 100% 75.5835788792%, 0% 75.5835788792%);
    transform: translate(-1.4409945036%, -0.4788447092%);
  }
  4% {
    clip-path: polygon(0% 21.1076901766%, 100% 21.1076901766%, 100% 26.0094914147%, 0% 26.0094914147%);
    transform: translate(-7.306807802%, 0.1763871651%);
  }
  6% {
    clip-path: polygon(0% 49.2301457934%, 100% 49.2301457934%, 100% 58.1290568884%, 0% 58.1290568884%);
    transform: translate(3.7796074217%, 0.0048457225%);
  }
  8% {
    clip-path: polygon(0% 46.0129496307%, 100% 46.0129496307%, 100% 50.67071714%, 0% 50.67071714%);
    transform: translate(2.7485089382%, -0.2402293079%);
  }
  10% {
    clip-path: polygon(0% 78.5781585371%, 100% 78.5781585371%, 100% 82.1093997989%, 0% 82.1093997989%);
    transform: translate(6.4781007756%, 0.1006731063%);
  }
  12% {
    clip-path: polygon(0% 58.0848976515%, 100% 58.0848976515%, 100% 60.7289030266%, 0% 60.7289030266%);
    transform: translate(-1.267889259%, 0.4311257206%);
  }
  14% {
    clip-path: polygon(0% 25.2162168401%, 100% 25.2162168401%, 100% 30.2344050452%, 0% 30.2344050452%);
    transform: translate(-1.8141911697%, -0.0056992256%);
  }
  16% {
    clip-path: polygon(0% 60.2441709519%, 100% 60.2441709519%, 100% 63.3728824382%, 0% 63.3728824382%);
    transform: translate(-2.2134956474%, 0.3295710926%);
  }
  18% {
    clip-path: polygon(0% 58.3768756921%, 100% 58.3768756921%, 100% 67.0771412133%, 0% 67.0771412133%);
    transform: translate(-6.9215346851%, -0.0442428892%);
  }
  20%, 100% {
    clip-path: none;
    transform: none;
  }
}
.imgContainer .channel {
  mix-blend-mode: screen;
}
.imgContainer .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.imgContainer .r {
  animation: rgb-shift-r 2s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(0.7670170141%, 0.1628782479%);
  }
  2% {
    transform: translate(-1.3263534536%, -0.3719851214%);
  }
  4% {
    transform: translate(0.8279427274%, 0.478051833%);
  }
  6% {
    transform: translate(-0.0795492149%, 0.1753089635%);
  }
  8% {
    transform: translate(-0.3967887451%, -0.2727661206%);
  }
  10% {
    transform: translate(1.5653694731%, -0.2094098831%);
  }
  12% {
    transform: translate(0.029635995%, -0.1252949739%);
  }
  14% {
    transform: translate(0.0449592414%, 0.3107535925%);
  }
  16% {
    transform: translate(-0.7315515945%, 0.0360640397%);
  }
  18% {
    transform: translate(-0.429871685%, -0.4195210962%);
  }
  20%, 100% {
    transform: none;
  }
}
.imgContainer .r::before {
  background: #f00;
}
.imgContainer .g {
  animation: rgb-shift-g 2s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(-1.1760865777%, -0.2318126329%);
  }
  2% {
    transform: translate(0.2771372229%, -0.2478379507%);
  }
  4% {
    transform: translate(0.2312600016%, 0.432968274%);
  }
  6% {
    transform: translate(-1.1758254382%, -0.3434320751%);
  }
  8% {
    transform: translate(0.7269738655%, 0.2612891516%);
  }
  10% {
    transform: translate(-0.8632048878%, -0.1566063325%);
  }
  12% {
    transform: translate(1.6289696533%, -0.0187011042%);
  }
  14% {
    transform: translate(0.1781416388%, -0.0270220594%);
  }
  16% {
    transform: translate(0.6521031182%, 0.1551006395%);
  }
  18% {
    transform: translate(-1.0914772969%, -0.066040999%);
  }
  20%, 100% {
    transform: none;
  }
}
.imgContainer .g::before {
  background: #0f0;
}
.imgContainer .b {
  animation: rgb-shift-b 2s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(-0.3729871366%, 0.1981161775%);
  }
  2% {
    transform: translate(1.9151368738%, -0.2062584147%);
  }
  4% {
    transform: translate(1.4006969482%, 0.068754436%);
  }
  6% {
    transform: translate(-1.98895727%, 0.0019947373%);
  }
  8% {
    transform: translate(-0.4088626394%, 0.1517117338%);
  }
  10% {
    transform: translate(-1.4290528753%, -0.0030567658%);
  }
  12% {
    transform: translate(1.4744913688%, -0.0478497955%);
  }
  14% {
    transform: translate(-0.1831961389%, 0.2643443067%);
  }
  16% {
    transform: translate(-0.5903087001%, -0.3864789584%);
  }
  18% {
    transform: translate(0.0642212688%, 0.3977362498%);
  }
  20%, 100% {
    transform: none;
  }
}
.imgContainer .b::before {
  background: #00f;
}
 






/* ----- KAWAII ----- */

body.kawaii {
	background-color: #B8E229;
	color: #052D36;
	font-family: "Quicksand", serif;
	font-optical-sizing: auto;
 	font-weight: 700;
 	font-style: normal;
 	font-size: 1rem;

 	.nav {
 		color: #FFF64C;
		padding: 1rem 0;
 		background-color: #052D36;
 		text-align: center;
 	}

 	.main {
		margin: 3rem 6rem;
		text-align: left;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.intro {
	}

 	h1 {
 		font-family: "DynaPuff", serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
		font-size: 4rem;
		margin-bottom: .5rem;
 	}

	p {
		font-size: .9rem;
		letter-spacing: 1px;
		margin-bottom: 1.7rem;
		line-height: 1.4;
	}

	a#button {
		background-color: #FFF64C;
	    color: #052D36;
	    cursor: pointer;
		display: inline-flex;
		align-items: center;
		padding: .35rem 1rem;
		text-transform: uppercase;
		border-radius: 3rem;   
    }

    a#button::after {
	    content: url("img/play1.png");
	    line-height: 0;
	    margin-left: 0.4rem;
	}

	a#button:hover {
		background-color: #052D36;
		color: #FFF64C;
		animation-name: eerie;
	    animation-duration: 2s;
	    animation-iteration-count: infinite;
	    animation-play-state: running;
	}

	a#button:hover::after {
		content: url("img/play2.png");
	}

	a#button.down::after {
		content: url("img/pause1.png");
    }

    a#button.down:hover::after {
    	content: url("img/pause2.png");
    }

	.footer {
 		color: #FFF64C;
 		display: block;
 		width: 100%;
 		text-align: center;
 		position: relative;
 	}

	.footer img {
		width: 100%;
		margin: 0;
	}

	.footer ul, .footer ul li {
		list-style: none;
		margin: 0;
	}

	.footer ul {
		margin: 0 auto;
		text-align: center;
		width: 100%;
		position: absolute;
		bottom: 1rem;
	}

	.footer ul li {
		display: inline-block;
		padding: .5rem 1rem;
	}

	.footer a {
		color: #FFF64C;
	}

	.footer a:hover {
		color: #B8E229;
		animation-name: eerie;
	    animation-duration: 2s;
	    animation-iteration-count: infinite;
	    animation-play-state: running;
	}

	.contentContainer {
		position:relative;
		z-index: 2;
	}

	.canvasContainer {
		width: 100vw;
  		height: 100vh;
  		position: fixed;
  		top: 0;
  		left: 0;
  		z-index: 1;
	}

	.canvasContainer .bg-1 {
		position: absolute;
		left: 0;
		bottom: -300px;
	}

	.canvasContainer .bg-2 {
		position: absolute;
		right: 0;
		top: 0;
	}

}

body.kawaii .main img {
    animation-name: eerie;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    -webkit-animation-name: eerie;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
	}
	
	@keyframes eerie {
		   0% {
		       transform: translate(0px, 0px);
		       animation-timing-function:ease-in-out
		   }

		   50% {
		       transform: translate(0px, 12px);
		       animation-timing-function:ease-in-out
		   }

		   100% {
		       transform: translate(0px, 0px);
		       animation-timing-function:ease-in-out
		   }
	}

	@-webkit-keyframes eerie {
		   0% {
		       transform: translate(0px, 0px);
		       animation-timing-function:ease-in-out
		   }

		   50% {
		       transform: translate(0px, 12px);
		       animation-timing-function:ease-in-out
		   }

		   100% {
		       transform: translate(0px, 0px);
		       animation-timing-function:ease-in-out
		   }
	}


@media only screen and (max-width: 500px) {


html {
	font-size: 18px;
}

	body._8bit .main {
			margin: 3rem auto;
			padding: 1.5rem 1rem 2rem;
			max-width: 440px;
		}

	body._8bit .main img {
		width: 75%;
	}

	body._8bit p {
		font-size: 1rem;
	}

	body.inter .contentContainer {
		width: 100vw;
  		height: 100vh;
	}

	body.inter .main {
		margin: 2rem auto;
		padding: 1rem;
	}

	body.inter div.animWrap {
		flex-direction: column;
	}

	body.inter .redCircle {
		margin: .5rem auto;
	}

	body.inter div.animWrap {
		padding: .8rem 0 1.8rem;
	}

	body.inter p {
		padding: 1.5rem 1.1rem;
	}

	body.inter .footer {
		position: absolute;
		bottom: 0;
	}

	body.kawaii .main {
		flex-direction: column;
        margin: 0;
        padding: 2rem 2rem 3rem;
        text-align: center;
	}

	body.kawaii .intro {
		order: 2;
    	margin-top: 2rem;
	}

	body.kawaii .ufo img {
		max-width: 65%;
    	margin: 0 auto;
	}

	body.kawaii .footer {
		padding-bottom: 3.5rem;

	}

	body.kawaii .footer ul {
		background-color: #052D36;
		padding: 0 0 2rem;
		bottom: 0;
	}

}