@font-face {
	font-family: Furore;
	src: url(assets/furore.otf);
	font-display: swap;
}
@font-face {
	font-family: "Junegull";
	src: url(assets/junegull.otf);
	font-display: swap;
}
@font-face {
	font-family: "Chalkboard SE";
	src: url(assets/chalkboard.woff);
	font-display: swap;
}

html{
	font-size: 16px;
	font-family: "Fuzzy Bubbles", Cursive;
	color: white;
	/* scroll-snap-type: y proximity; */
}

body{
	margin: 0;
	padding: 0;
	scrollbar-gutter: stable both-edges;
	background-image: url("assets/background.webp");
	background-position-x: center;
	overflow: auto;
	min-height: 100vh;
	font-size: 18px;
	
	--nav-height: 4rem;
	--content-width: 850px;
	--accent-color: #add19b;
	--glow-color: #6bff766b;
	--background-color: #004a43;
}

nav{
    grid-template-columns: repeat(4, max-content) 1fr max-content;
	position: fixed;
	top: 0;
	
	width: 100%;
	height: var(--nav-height);
	padding: 0 2rem;
	box-sizing: border-box;
	
	z-index: 10;
	border-bottom: 2px solid white;
}

svg{
	fill: white;
}

nav, nav div{
	display: inline-grid;
	grid-auto-flow: column;
	grid-auto-rows: 5rem;
}

a{
	color: inherit;
	text-decoration: none;
}
a.active{
	border-bottom: 2px solid;
	border-left: 2px solid;
}

[data-tooltip]::before{
	position : absolute;
	top: 5rem;
	content : attr(data-tooltip);
	opacity : 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}
[data-tooltip]:hover::before{
	opacity : 1;
}

body > section{
	display: grid;
	position: relative;
	scroll-snap-align: center;
	padding: 1rem;
}

section > .section-background{
	margin: 0 auto;
	padding: 1rem 0;
	width: max-content;
	background: #0004;
	border-radius: 1rem;
}

section h2{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2rem;
	width: var(--content-width);
	
	color: white;
	font-family: Junegull, Sans-Serif;
	font-size: 2rem;
	text-align: left;
	text-transform: uppercase;
	text-shadow: -1px 1px 10px #0d7aaca0;
	filter: drop-shadow(-11.5px 24.5px 6.5px #0009);
}

h1, h2, h3, h4, h5, h6{
	text-align: center;
}

p{
	margin: 0 auto;
	padding: 0.6rem 2rem;
	max-width: var(--content-width);
	
	font-weight: bold;
}

p, label{
	filter:
		drop-shadow(-0.5px 2px 0px black);
		/* drop-shadow(0 0 7.5px #0d7aac); */
}

p a,
ul a{
	text-decoration: 2px underline var(--accent-color);
}

footer{
	text-align: right;
	padding: 1rem;
	color: var(--accent-color);
}

.text-2{
	font-weight: 700;
}

.frosted-glass{
	backdrop-filter: blur(3px);
}

.grid{
	display: grid;
	grid-template-columns: repeat(3, calc(var(--content-width)/3));
	gap: 2rem;
	
	max-width: var(--content-width);
	margin: 0 auto;
}
.grid > section{
	/* backdrop-filter: blur(3px); */
	background-color: #0004;
	padding: 0 1.5rem;
	border-radius: 1rem;
}

.center{
	text-align: center;
	width: max-content;
}

.fox-image{
	width: 20vw;
	height: 20vw;
}

#nav-logo{
	display: inline-block;
}
#nav-logo img{
	width: calc(var(--nav-height) - 10px);
	height: calc(var(--nav-height) - 10px);
	border-radius: 50%;
	padding: 5px;
	padding-top: 8px;
}

#twitter-logo,
#medium-logo,
#discord-logo,
#socials a{
	height: 2rem;
	padding: 1rem;
}
#medium-logo svg,
#twitter-logo svg,
#discord-logo svg,
#socials a svg{
	height: 100%;
}
#medium-logo{
	padding-left: 0.25rem;
}

#twitter-logo svg{
	fill: #FFFFFF;
}
#medium-logo svg{
	fill: #FFFFFF;
}
#discord-logo svg{
	fill: #FFFFFF;
}


#menu{
	float: right;
	color: white;
}
#menu a{
	height: 1rem;
	padding: 0.25rem;
	margin: 1.25rem;
	text-align: center;
	font-weight: 300;
}

#welcome{
	display: grid;
	position: relative;
	place-content: center;
	
	height: 100vh;
	
	margin-top: 0;
	padding: 0;
	
	font-family: Junegull, Sans-Serif;
	text-align: center;
	
}
#welcome::before{
	content: "\00a0";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 250vh;
	background: url("assets/backgrounds/welcome-to-portals-open.webp") center -75px/cover no-repeat;
}

#welcome div{
	margin-top: 20rem;
	font-family: "Fuzzy Bubbles", Cursive;
	font-weight: bold;
	font-size: calc(1.25rem - 1.5px);
	letter-spacing: 1px;
}

#welcome p{
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	font-size: 1.75rem;
	filter:
		drop-shadow(0px 1.5px 0px rgba(0, 0, 0, 1))
		drop-shadow(0px 3px 12px rgba(0, 12, 74, 1))
		drop-shadow(-0.5px 2px 0px black);
}

#portals-open{
	padding: 0;
	grid-template-rows: repeat(2, min-content);
	height: 120vh;
}

#portals-open h2{
	margin-top: 15vh;
	font-size: 3rem;
	margin-left: 5rem;
}

#portals-open p{
	padding: 0;
	margin-bottom: 0.5rem;
}

#portals-open :is(.top-left, .top-right, .bottom-left, .bottom-right){
	font-size: 15px;
	font-weight: bold;
	position: absolute;
}

#portals-open .top-left{
	top: 25vh;
	left: 5.5vw;
	padding: 3rem 2rem 3rem 4rem;
	max-width: 19rem;
	background: url("assets/frames/portal-tl.webp") center/cover no-repeat;
}

#portals-open .top-right{
	top: 26vh;
	right: 0.5vw;
	padding: 4rem 5rem 3.5rem 5.5rem;
	max-width: 25rem;
	background: url("assets/frames/portal-tr.webp") center/cover no-repeat;
}

#portals-open .bottom-left{
	top: 55vh;
	left: 1.5vw;
	padding: 4rem 3rem 3rem 4.5rem;
	max-width: 22rem;
	background: url("assets/frames/portal-bl.webp") center/cover no-repeat;
}

#portals-open .bottom-right{
	top: 70vh;
	right: 8vw;
	padding: 3rem 5.5rem 2.5rem 6.5rem;
	max-width: 21rem;
	background: url("assets/frames/portal-br.webp") center/cover no-repeat;
}

#portals-open .bottom-text{
	margin-top: 108vh;
	text-align: center;
	filter:
		drop-shadow(0px 1.5px 0px rgba(0, 0, 0, 1))
		drop-shadow(0px 3px 12px rgba(0, 12, 74, 1));
}

#wtf-cubetopia{
	display: block;
	position: relative;
	min-height: 80vh;
	font-size: 19px;
}
#wtf-cubetopia::before{
	content: "\00a0";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 450vh;
	background: url("assets/backgrounds/whats-cubetopia-to-faq.webp") center top/cover no-repeat;
}

#wtf-cubetopia .background-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-height: 260rem;
}

#wtf-cubetopia h2{
	margin-top: 40vh;
}

#wtf-cubetopia div,
#team-grid > section,
#explore-with-foxels div:not(.explore-dimension, .explore-tribes, .explore-seasons, .no-shadow){
	filter:
		drop-shadow(0px 1.5px 0px rgba(0, 0, 0, 1))
		drop-shadow(0px 3px 12px rgba(0, 12, 74, 1));
}

.text-red{
	color: #ea797f;
}
.text-green{
	color: #84e2b8;
}
.text-yellow{
	color: #fecd84;
}
.text-blue{
	color: #78bdff;
}
.text-orange{
	color: #f5e382;
}

#explore-with-foxels{
	display: block;
	min-height: 100vh;
	margin-top: 15rem;
}

#explore-with-foxels pre{
	white-space: pre-line;
}

#explore-with-foxels > section{
	font-size: 1.5rem;
	text-align: center;
}

#explore-with-foxels .grid{
	position: relative;
	grid-template-columns: repeat(3, 1fr);
	place-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

#explore-with-foxels :is(.explore-dimension, .explore-tribes, .explore-seasons){
	font-size: 0.9rem;
	font-weight: bold;
}

#explore-with-foxels :is(.explore-dimension, .explore-tribes, .explore-seasons) h3{
	position: absolute;
	font-size: 3rem;
	font-weight: normal;
	text-shadow: -3px 3px 4px rgba(0, 0, 0, 0.75);
}

#explore-with-foxels .explore-dimension{
	position: absolute;
	margin-top: 15rem;
	margin-left: 5.5vw;
	padding: 3.5rem 3.5rem 3.5rem 3rem;
	max-width: 25rem;
	background: url("assets/frames/explore-dimension.webp") center/cover no-repeat;
}

#explore-with-foxels .explore-dimension h3{
	top: -5rem;
}

#explore-with-foxels .explore-tribes{
	position: absolute;
	top: 66vh;
	right: 5.5vw;
	padding: 3.5rem;
	max-width: 27rem;
	background: url("assets/frames/explore-tribes.webp") center/cover no-repeat;
}

#explore-with-foxels .explore-tribes h3{
	top: -5rem;
}

#explore-with-foxels .explore-seasons{
	margin: 0 auto;
	margin-top: 34rem;
	padding: 3rem 2rem 3rem 5rem;
	
	font-size: 1rem;
	max-width: 44rem;
	background: url("assets/frames/explore-seasons.webp") center/cover no-repeat;
}

#explore-with-foxels .explore-seasons h3{
	top: 47rem;
}

#day-n-night{
	position: absolute;
	left: 1rem;
	top: 50rem;
	max-width: 13rem;
}

#just-tetris{
	position: absolute;
	right: 7rem;
	top: 58rem;
}
#just-tetris::before{
	top: 2rem;
	left: 1rem;
}
#just-tetris img{
	max-width: 12rem;
}

#explore-with-foxels .vibe-paper p{
	display: grid;
	place-items: center;
	grid-auto-flow: column;
	column-gap: 7rem;
	padding: 3rem 0;
	filter: none;
}

#explore-with-foxels .vibe-paper :is(button, a){
	display: inline-grid;
	place-items: center;
	width: var(--width);
	height: 60px;
	
	font-size: 1.3rem;
	font-family: inherit;
	line-height: 42px;
	color: #fff;
	background: transparent;
	
	padding: 0;
	border: none;
	border-radius: 5px;
	outline: none;
	
	cursor: pointer;
	
	& span{
		display: inline-block;
		position: absolute;
		
		margin: 0;
		width: var(--width);
		height: 40px;

		border-radius: 5px;
		text-align: center;
		background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
		
		box-sizing: border-box;
		transition: all .3s;
	}
}

#explore-with-foxels .vibe-paper a.rotate-reveal{
	--width: 200px;
	
	transition: all 0.3s ease;
	perspective: 230px;
	
	& span:nth-child(1) {
		transform: rotateX(90deg);
		transform-origin: 50% 50% -20px;
	}

	& span:nth-child(2) {
		transform: rotateX(0deg);
		transform-origin: 50% 50% -20px;
	}

	&:hover span:nth-child(1) {
		transform: rotateX(0deg);
	}

	&:hover span:nth-child(2) {
		color: transparent;
		transform: rotateX(-90deg);
	}
}

#explore-with-foxels .vibe-paper a.border-reveal{
	--width: 250px;
	
	&:hover{
		color: rgba(0,172,238,1);
	}
	&:hover span:first-child{
		background: linear-gradient(0deg, white, white);
	}
	
	& .border-tl, & .border-br{
		background: transparent;
	}
	
	& .border-tl::before, & .border-tl::after{
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		background: rgba(2,126,251,1);
		transition: all 0.3s ease;
	}
	& .border-tl::before{
		height: 0%;
		width: 2px;
	}
	& .border-tl::after{
		width: 0%;
		height: 2px;
	}
	&:hover .border-tl::before{
		height: 100%;
	}
	&:hover .border-tl::after{
		width: 100%;
	}
	
	& .border-br::before, & .border-br::after{
		position: absolute;
		content: "";
		bottom: 0;
		right: 0;
		background: rgba(2,126,251,1);
		transition: all 0.3s ease;
	}
	& .border-br::before{
		height: 0%;
		width: 2px;
	}
	& .border-br::after{
		width: 0%;
		height: 2px;
	}
	&:hover .border-br::before{
		height: 100%;
	}
	&:hover .border-br::after{
		width: 100%;
	}
}


#explore-with-foxels .grid > section{
	display: grid;
	place-content: center;
	gap: 0.5rem;
	padding: 1.5rem;
	
	border: 2px solid #fff4;
	cursor: pointer;
}

#explore-with-foxels .grid :is(h3, h4){
	margin: 0;
}

#explore-with-foxels .grid h4{
	color: #fff9;
	font-size: 0.8rem;
}

#explore-with-foxels .grid section div{
	display: grid;
	place-content: center;
	
	width: 10rem;
	height: 8rem;
}

#explore-with-foxels .grid section > div.expand{
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--narrative-grid-width) - 4rem);
	height: calc(var(--narrative-grid-height) - 3.5rem);
	
	padding: 2rem;
	
	background-color: var(--background-color);
	border: inherit;
	border-radius: inherit;
	
	overflow-y: hidden;
	z-index: 1;
	
	opacity: 0;
	pointer-events: none;
	clip-path: inset(
		var(--narrative-inset-top)
		var(--narrative-inset-right)
		var(--narrative-inset-bottom)
		var(--narrative-inset-left)
		round 1rem
	);
	transition: ease 500ms;
	transition-property: opacity, clip-path;
}

#explore-with-foxels .grid section > div.expand.show{
	opacity: 1;
	pointer-events: unset;
	clip-path: inset(0 0 0 0 round 1rem)
}

#explore-with-foxels .narrative-icon{
	width: 8rem;
	height: 8rem;
	margin: 0 auto;
	
	opacity: 0.75;
	filter: invert(1);
}

.gitbook-link{
	display: inline-grid;
	grid-auto-flow: column;
	column-gap: 0.5rem;
	border: 2px solid;
	padding: 0.5rem;
	color: #4ab94e;
	text-decoration: none;
}

.gitbook-link svg{
	height: 1.5rem;
	fill: #4ab94e;
}

#sneak-peeks.grid{
	grid-template-columns: repeat(5, auto);
	column-gap: 3rem;
	margin-bottom: 5rem;
}

#sneak-peeks img{
	max-width: 12rem;
	border-radius: 0.75rem;
	border: 4px solid black;
}

img#cube-is-new-meta{
	position: relative;
	border: none;
}

#team-grid{
	grid-template-columns: repeat(4, auto);
	padding-bottom: 1rem;
	max-width: unset;
}

#team-grid section{
	padding: 1.5rem;
	background: url("assets/backgrounds/sneak-peek.webp") center/cover no-repeat;
	border-radius: 0.75rem;
}

#team-grid section img{
	max-width: 12rem;
	border-radius: inherit;
	border: 5px solid black;
}

#team-grid section p{
	backdrop-filter: unset;
	padding-bottom: 0;
	text-align: center;
}

#team-grid section h3{
	margin: 0;
	padding-top: 0.5rem;
	font-size: 1.75rem;
}

#team-grid section :is(h3, p){
	filter: drop-shadow(2.5px 2.5px 0px black);
}

#imagine-baby-cubetopia{
	position: absolute;
	width: 18rem;
	right: 4rem;
	top: 2.5rem;
}

#green-fox{
	position: absolute;
	right: 0;
	top: 10rem;
	max-width: 15rem;
	rotate: -90deg;
	transform: scaleX(-1);
}

#faq{
	row-gap: 1rem;
}

.faq-question{
	width: var(--content-width);
	margin: auto;
	
	overflow: hidden;
	font-weight: 400;
	
	outline: none;
	border-bottom: 3px solid white;
	
	cursor: pointer;
	
	filter:
		drop-shadow(0px 1.5px 0px rgba(0, 0, 0, 1))
		drop-shadow(0px 3px 12px rgba(0, 12, 74, 1));
}

.faq-question > input[type = checkbox]{
	display: none;
}

.faq-question > label{
	display: inline-block;
	position: relative;
	
	padding: 1.5rem 2rem;
	width: var(--content-width);
	box-sizing: border-box;
	color: white;
	
	font-weight: bold;
	cursor: pointer;
}

.faq-question > label::after{
	content: "\25bd";
	
	position: absolute;
	right: 2rem;
	
	width: 1em;
	height: 1em;
	
	font-size: 1.5rem;
	text-align: center;
	transform: translateY(-25%);
	transition: all 0.35s;
}

.faq-question > div{
	overflow: hidden;
	padding: 0 2rem;
	max-height: 0;
	opacity: 0;
	transition: all 350ms;
}

.faq-question input:checked + label::after{
	transform: rotate(180deg);
}

.faq-question input:checked ~ div{
	max-height: 100vh;
	padding: 0 2rem;
	padding-bottom: 2rem;
	opacity: 1;
}

#join-the-movement{
	place-content: end center;
	height: 500px;
	padding-bottom: 4rem;
	color: black;
	background: url("assets/backgrounds/footer.webp") center/cover no-repeat;
}

#rainbow{
	font-family: Furore, Sans-Serif;
	font-size: 3.5rem;
	
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
	background-size: 800% 800%;
	background-image: linear-gradient(
		to right,
		#ef5350,
		#f48fb1,
		#7e57c2,
		#2196f3,
		#26c6da,
		#43a047,
		#eeff41,
		#f9a825,
		#ff5722
	);
	animation: rainbow 5s linear infinite;
}

@keyframes rainbow{
	0%{
		background-position: 0% 50%;
	}
	50%{
		background-position: 100% 25%;
	}
	100%{
		background-position: 0% 50%;
	}
}

#join-the-movement .subtext{
	margin-top: 2rem;
	color: #f4bf70;
}

#join-the-movement .subtext img{
	display: inline-block;
	vertical-align: middle;
	height: 1.5em;
}