@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@100..800&family=Cabin:ital,wght@0,400..700;1,400..700&family=Days+One&display=swap" rel="stylesheet');


:root {
	--heading-font:  "Cabin", serif;
	--context-font:  "Anek Latin", serif;

	/* font size */
	--base-size: 16px;
	--gutter-size:calc(2*var(--base-size));
	
	--color--background: #E5E5E5;
	--color--black: #141414;
	--color--fluorescentgreen: #29E648;
	--color--lightgreen: #03BD5E;
	--color--darkgreen: #015A4F;
	--color--purple: #E427FF;

	--block-size: 19.5vw;
}

@media (min-width:768px){
	:root{
		--base-size: 17px;
		--gutter-size: calc(4*var(--base-size));
	}
}

html{
	/* https://www.w3schools.com/cssref/css_pr_scroll-snap-type.php */
	scroll-behavior: smooth;
}

body{
	width: 100vw;
	height: 100vh;
	background-color: var(--color--background);
	overflow-x: hidden;
	overflow-y: auto;
}

#navbutton{
	font-size: calc(1.8*var(--base-size));
	position: fixed;
	right: var(--gutter-size);
	top: var(--gutter-size);
}

#navbutton:hover{
	cursor: pointer;
}

#menu{
	position: fixed;
	top: 0px;
	bottom: 0px;
	background-color: var(--color--black);
	color: var(--color--background);
	inset: 0;
	place-content: center; /* Center the tracks. */
	place-items: center; /* Center within the tracks. */

	animation: slideinfrombottom 500ms forwards; 
}

.close button {
	font-family: var(--context-font);
	font-size: calc(1.5*var(--base-size));
	position: absolute;
	right: var(--gutter-size);
	top: var(--gutter-size);
}

.close button:hover{
	cursor: pointer;
}

nav ul{
	display: flex;
	flex-direction: column;
	gap: var(--gutter-size);
	justify-content: center;
}

nav ul li p{
	font-size: calc(2*var(--base-size));
	text-transform: uppercase;
	font-weight: 400;
}

nav ul li p:hover{
	color: var(--color--darkgreen);
	text-decoration: underline;
	cursor: pointer;
}

.popup{
	background-color: #141414;
}

main{
	max-width: 100vw;
	display: flex;
	flex-direction: column;
	scroll-snap-type: y mandatory;
}

section{
	width: 100vw;
	overflow-x: hidden;
	overflow-y: hidden;
	scroll-snap-align: start;
}

h2{
	font-family: var(--heading-font);
	font-size: calc(2*var(--base-size));
	font-weight: 400;
	padding-block: var(--gutter-size);
	text-align: left;
	line-height: 90%;
	color: white;
}

h3{
	font-family: var(--heading-font);
}

p{
	font-family: var(--context-font);
	font-size: var(--base-size);
	line-height: 140%;
	font-weight: 200;
}

aside{
	font-family: var(--context-font);
	font-size: calc(0.8*var(--base-size));
	color: var(--color--background);
	opacity: 30%;
	position: relative;
	text-align: center;
}

footer{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-inline: calc(1*var(--gutter-size));
	padding-block: calc(0.8*var(--gutter-size));
	height: auto;
}

footer p:nth-child(1){
	width: 100%;
	font-weight: 400;
	color: var(--color--darkgreen);
}

#channel-users{
	display: none;
}


/* blocks *//* blocks *//* blocks */
/* blocks *//* blocks *//* blocks */
/* blocks *//* blocks *//* blocks */

/* image *//* image *//* image */

section:has(#image-blocks){
	margin: 0px;
	height: 98vh;
	width: 100vw;
}

#image-blocks{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: calc(0.2*var(--gutter-size));
	overflow-x: auto;
	margin-top: calc(3*var(--gutter-size));
	padding-left: 0px;
	animation: scroll 60s linear infinite;
	overflow-x: visible;
}

@keyframes scroll {
	from {
	  transform: translateX(0%);
	}
	to {
	  transform: translateX(-500%);
	}
}

#image-blocks:hover{
	animation-play-state: paused;
	/* https://www.w3schools.com/cssref/css3_pr_animation-play-state.php */
}

.image-blocks{
	width: calc(4*var(--block-size));
	height: calc(4*var(--block-size));
	aspect-ratio: 1/1;
	object-fit: cover;
	position: relative;
}

.image-blocks img{
	aspect-ratio: 1/1;
	object-fit: cover;
	overflow: hidden;
	filter: grayscale(100%);
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale */
}

.image-blocks.hover img{
	filter: grayscale(0%);
	/* cursor: pointer; */
}

.image-blocks img:nth-child(1){
	margin-left: var(--gutter-size);
}

figcaption{
	width: 100%;
	position: absolute;
	gap: calc(0.3*var(--gutter-size));
	top: calc(10*var(--gutter-size));
	left:var(--gutter-size);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	z-index: 2;
}

figcaption p:nth-child(1){
	width:80%;
	font-size: calc(1.5*var(--base-size));
	font-family: var(--heading-font);
	color: var(--color--darkgreen);
	font-weight: 500;
}


/* I originally wanted to put description and use text-overflow since some of them are too long, but it couldn't work so I deleted it. lol*/
/* figcaption p:nth-child(2){
	display: none;
	max-width: 100%;
	font-size: calc(1*var(--base-size));
	color: var(--color--black);
    text-overflow: ellipsis;
} */

section:nth-of-type(1) aside{
	color: var(--color--darkgreen);
	transform: translateY(calc(8*var(--gutter-size)));
}


/* video *//* video *//* video */

section:has(#video-blocks){
	height: 98vh;
	overflow-y: hidden;
	background-color: #141414;
	margin: 0px;
	display: flex;
	flex-direction: column;
	padding-block: calc(2*var(--gutter-size));
	gap: var(--gutter-size);
}

#video-blocks{
	height: 100vh;
	overflow-y: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: calc(2*var(--gutter-size));
	overflow-x: auto;
	padding-left: 0px;
	scroll-snap-type: x mandatory;
}

.video-blocks{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(2*var(--gutter-size));
	scroll-snap-align: center;
}

#video-blocks p{
	font-family: var(--heading-font);
	text-transform: uppercase;
	color: var(--color--background);
}

.video-blocks video{
	width: 100vw;
	aspect-ratio: 4/5;
	filter: grayscale(100%) opacity(30%);
	object-fit: cover;
	overflow: hidden;
}

.video-blocks iframe{
	width: 100vw;
	aspect-ratio: 4/5;
	filter: grayscale(100%) opacity(30%);
}

.video-blocks.opacity iframe,
.video-blocks.opacity video{
	filter: grayscale(100%) opacity(100%);
}

.video-blocks:hover video,
.video-blocks:hover iframe{
	filter: grayscale(0%);
}

/* text *//* text *//* text */

section:has(#text-blocks){
	width: 100vw;
	height: 98vh;
	display: flex;
	flex-direction: column;
}

#text-blocks{
	height: 90vh;
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	gap: calc(2*var(--gutter-size));
	scroll-snap-type:x mandatory
}

blockquote{
	display: flex;
	align-items: center;
	padding: calc(1*var(--gutter-size));
	scroll-snap-align: center;
}

blockquote p{
	width: 80vw;
	height: auto;
	font-size: calc(1.7*var(--base-size));
	font-weight: 400;
	color: #015A4F;
}

blockquote p.slidein{
	animation: slideinfromtop 1s ease-in forwards; 
}

blockquote:nth-of-type(2) p.slidein{
	animation: slideinfrombottom 1s ease-in forwards; 
}

@keyframes slideinfromtop {
	0% {
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

@keyframes slideinfrombottom {
	0% {
		transform: translateY(-40%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

section:nth-of-type(3) aside{
	color: var(--color--darkgreen);
}

/* audio *//* audio *//* audio */

section:has(#audio-blocks){
	width: 100vw;
	height: 98vh;
	display: flex;
	flex-direction: column;
	background-color: var(--color--darkgreen);
}

#audio-blocks{
	height: 90vh;
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	scroll-snap-type: x mandatory; 
}

#audio-blocks li{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(1*var(--gutter-size));	
	scroll-snap-align: center;
}

#audio-blocks p{
	width: 100vw;
	text-align: center;
	color: var(--color--background);
}

#audio-blocks p:nth-of-type(2){
	font-family: var(--heading-font);
	text-transform: uppercase;
}

#audio-blocks img{
	width: 80vw;
	object-fit: contain;
	filter: grayscale(100%);	
}

#audio-blocks img:hover{
	cursor: pointer;
	animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

section:nth-of-type(4) aside{
	color: var(--color--background);
}

/* links *//* links *//* links */

section:has(#link-blocks){
	width: 100vw;
	height: 98vh;
	overflow-y: hidden;
	overflow-x: auto;
	background-color: var(--color--black);
	margin: 0px;
	padding-block: calc(1*var(--gutter-size));
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gutter-size);
}

#link-blocks{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: calc(1*var(--gutter-size));
	padding-inline: var(--gutter-size);
	background-color: var(--color--black);
	width: 400%;
}

.link-blocks{
	position: relative;
}

.link-blocks img , .link-blocks .PDF, 
.link-blocks iframe{
	object-fit: cover;
	max-width: 80vw;
	height: 70vh;
	aspect-ratio: 3/4;
	overflow: hidden;
	filter: grayscale(100%) opacity(80%);	
}

.link-blocks.rich{
	height: 70vh;
	aspect-ratio: 3/4;
	filter: grayscale(100%) opacity(100%);	
	max-width: 80vw;;
}

/* normal link img*/

.linkoverlay{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	color: var(--color--background);
	display: none;
}

.linkoverlay h3{
	font-size: calc(1.2*var(--base-size));
	position: absolute;
	width: 70%;
	top:0;
	left: 0;
}

.linkoverlay .description{
	position: absolute;
	bottom:0;
	left: 0;
}

.linkoverlay .arrow {
	position: absolute;
	top:0;
	right: 0;
}

.linkoverlay h3,
.linkoverlay .description,
.linkoverlay .arrow {
	margin: calc(1.2*var(--gutter-size));
}

/* hover image and display linkoverlay */
.link-blocks:hover img ,
.link-blocks:hover .PDF,
.link-blocks:hover iframe,
.link-blocks:hover .rich{
	filter: grayscale(100%) opacity(20%);	
}

.link-blocks:hover .linkoverlay{
	display: block;
}

section:nth-of-type(5) aside:nth-of-type(2){
	display: none;
}


/* desktop */
/* desktop */
/* desktop */

@media (min-width: 768px){
	
	section{
		width: 100vw;
		height: 98vh;
		scroll-snap-align: start;
	}

	h2{
		font-size: calc(3*var(--base-size));
	}

	nav ul{
		display: flex;
		flex-direction: row;
	}

	#navbutton{
		top: calc(0.8*var(--gutter-size));
	}

	footer{
		height: 5vh;
		flex-direction: row;
		justify-items: space-between;
		gap: var(--gutter-size);
	}

	footer section{
		width: 100%;
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: right;
		gap:calc(0.6*var(--gutter-size)) ;
	}
	
	footer section h3{
		color: var(--color--darkgreen);
	}
	#channel-users{
		display: flex;
	}

	/* blocks  *//* blocks  *//* blocks  */
	/* blocks  *//* blocks  *//* blocks  */
	/* blocks  *//* blocks  *//* blocks  */

	/* image  *//* image  *//* image  */

	#image-blocks{
		margin-top: calc(2*var(--gutter-size));
	}

	.image-blocks{
		width: var(--block-size);
		height:  50vh;
	}

	figcaption{
		width: 100%;
		top: calc(5*var(--gutter-size));
		left: calc(var(--gutter-size));
	}

	figcaption p:nth-child(1){
		width:100%;
		font-size: calc(1.5*var(--base-size));
	}
	
	/* figcaption p:nth-child(2){
		width:100%;
		display: flex;
		font-size: calc(1*var(--base-size));
		word-break: break-all;  */
		/* https://developer.mozilla.org/en-US/docs/Web/CSS/word-break  */
		/* whether line breaks appear wherever the text would otherwise overflow its content box. */
	/* }  */

	.image-blocks figcaption{
		display: none;
	}

	.image-blocks:hover img{
		filter: grayscale(0%);
	}
	
	.image-blocks:hover figcaption{
		display: flex;
	}	

	.image-blocks.display img{
		filter: grayscale(100%);
	}

	section:nth-of-type(1) aside{
		transform: translateY(calc(3*var(--gutter-size)));
	}

	/* video  *//* video  *//* video  */

	section:has(#video-blocks){
		height: 98vh;
	}

	#video-blocks{
		gap: calc(0.2*var(--gutter-size));
		overflow-x: auto;
		padding-inline: calc(3*var(--gutter-size));
		padding-block: 0px;
	}

	.video-blocks{
		gap: calc(0.8*var(--gutter-size));
	}
	
	#video-blocks video{
		width: 70vw;
		aspect-ratio: 16/9;
	}

	#video-blocks iframe{
		width: 70vw;
		aspect-ratio: 16/9;
	}	

	aside{
		font-size: calc(1*var(--base-size));
	}

	/* text  *//* text  *//* text  */

	#text-blocks{
		gap: calc(1*var(--gutter-size));
	}

	blockquote{
		width: 100%;
		padding: calc(3*var(--gutter-size));
	}

	blockquote:nth-child(2){
		margin-left: auto;
	}

	blockquote p{
		width: 100vw;
		font-size: calc(2.5*var(--base-size));
	}

	/* audio *//* audio *//* audio */

	#audio-blocks{
		gap:0px;
		align-items: center;
		justify-content: center;
		width: 100vw;
		overflow-x: hidden;
	}

	#audio-blocks li{
		display: flex;
		flex-direction: column;
		gap: calc(0.3*var(--gutter-size));
		align-items: center;
		width: 14vw;
	}

	#audio-blocks img{
		object-fit: cover;
		filter: grayscale(100%) opacity(50%);	
	}

	#audio-blocks img:hover{
		filter: opacity(100%);
	}

	section:has(#audio-blocks) aside:nth-last-of-type(1){
		display: none;
	}

	#audio-blocks li p:nth-of-type(2){
		font-size: calc(1*var(--base-size));
	} 


	/* links *//* links *//* links */

	.link-blocks iframe, .rich,.link-blocks picture img , .link-blocks .PDF{
		width: calc(1.2*var(--block-size));
		height: 60vh;
	}

	.linkoverlay{
		height: 60vh;
	}

	#link-blocks{
		gap: calc(0.3*var(--gutter-size));
		margin-top: var(--gutter-size);
		height: 60vh;
		overflow-y: hidden;
		animation: scroll2 60s linear infinite ;
	}

	#link-blocks:hover{
		animation-play-state: paused;
	}

	@keyframes scroll2 {
		from {
		transform: translateX(20%);
		}
		to {
		transform: translateX(-100%);
		}
	}

	.linkoverlay h3,
	.linkoverlay .description,
	.linkoverlay .arrow {
		margin: calc(0.7*var(--gutter-size));
	}

	section:nth-of-type(5) aside:nth-of-type(1){
		display: none;
	}

	section:nth-of-type(5) aside:nth-of-type(2){
		display: block;
	}

}