/* GLOBAL */

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

html {
	font-size: 0.85em;
	font-family: Replica Mono LL, sans-serif;
	}

	@font-face {
		font-family: 'Replica Mono LL';
		src: url('font/ReplicaMonoLL-Regular.woff2') format('woff2'),
			url('font/ReplicaMonoLL-Regular.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	
#page {
	height: calc(var(--vh, 1vh) * 100);
	overflow-x: hidden;
	overflow-y: scroll;
/* 
	scroll-snap-type: y mandatory;
	scroll-padding: 1em;
 */
	}
	
h1, h2, h3, h4, p {
	margin: 0;
	padding: 0;
	text-align: center;

	}			

a {
	text-decoration: none;
	color: inherit;
	}
	
	a:active {
		color: inherit;
		}

	a:visited {
		color: inherit;
		}

/* DESKTOP */

main {
	width: 100%;
	padding: 1em;
	}

	#grid {
		 margin: 0 auto;
		}

	#grid-mobile {
		 display: none;
		}
		
		.entry-mobile {
			display: none;
			}

		.entry {
			width: 300px;
			height: fit-content;
			scroll-snap-align: start;
			}		
			
			.entry .entry-content {
				display: none;
				}

			.stamp {
				position: absolute;
				top: 0 !important;
				left: 0 !important;
				width: 100%;
				height: calc(var(--vh, 1vh) * 75);
				margin-bottom: 3em;
				}
			
				.stamp .entry-thumb {
					display: none;
					}
		
				.entry-content {
					height: calc(var(--vh, 1vh) * 75);
					display: flex;
					flex-direction: column;
					justify-content: center;
					}
				
					.entry-content-inner {
						height: fit-content;
						}

						.entry-content-inner p {
							width: calc(var(--videoWidth) * 1px);
							margin: 0 auto;
							}

						.html5_video_players {
							width: fit-content !important;
							height: fit-content;
							filter: brightness(97%);
							margin: 0 auto;
							margin-bottom: 1em;
							}

							.h5vp_player_temp {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								}
	
								.plyr_wrapper {
									width: 100%;
									height: fit-content;
									display: flex;
									flex-direction: column;
									justify-content: center;
									}
									
									.plyr {
										border-radius: 20px !important;
										}
	
										.plyr__controls {
											background: none !important;
											}
										
										.plyr__video-wrapper {
											height: fit-content;
											width: fit-content;
											}
	
										.plyr--video {
											overflow: hidden;
											height: fit-content;
											width: fit-content;
											margin: 0 auto;
											}
											
											.plyr video {
												height: auto;
												width: auto;
												max-height: calc(var(--vh, 1vh) * 70);
												}	
				
				.entry-image {
					width: 100%;
					display: flex;
					cursor: pointer;
					}
					
					.entry-image > a {
						pointer-events: none;
						width: max-content;
						margin: 0 auto;
						}

						img {
							filter: brightness(97%);
							}
										
						.attachment-post-thumbnail {
							width: 100%;
							height: auto;
							border-radius: 20px;					
							}
						
						.image-stamp {
							width: auto;
							max-height: calc(var(--vh, 1vh) * 75);
							border-radius: 20px;
							margin: 0 auto;
							max-width: 100%;
							height: auto;				
							}
							
							
						.alignnone {
							width: max-content;
							height: calc(var(--vh, 1vh) * 70);
							border-radius: 20px;
							margin: 0 auto;
							margin-bottom: 1em;
							max-width: unset;						
							}		
				
			.entry-header {
				margin: 0.5em 0 2em 0;
				height: max-content;
				}	



.border {
	border: 2px solid red;
	}


.controls {
	z-index: 999999999;
	position: relative;
	}

	.button {
		align-self: start;
		cursor: pointer;
		font-family: 'Material Icons';
		position: absolute;
		}

			.material-symbols-outlined {
				font-size: 3em !important;
				}


		.previous {
			top: calc(var(--vh, 1vh) * 35);
			left: -0.75em;
			}
			
			.previous span {

			}

		.next {
			right: -1em;
			top: calc(var(--vh, 1vh) * 35);
			}

			.next span {

			}
			
		.mut {
			left: -0.75em;
			}

article:last-of-type .next {
	display: none;
  }

article:first-of-type .previous {
	display: none;
  }

.hide {
	display: none !important;
	}	

/* MOBILE */

/* 
@media (pointer:coarse) {
 */
@media (max-width: 720px) {

	main {
		padding: 0;
		}

		#page {
			height: calc(var(--vh, 1vh) * 100);
			overflow-x: hidden;
			overflow-y: scroll;
			scroll-snap-type: y mandatory;
			}

			#grid {
				 display: none;
				}

			#grid-mobile {
				display: block;
				}

				.mut-mobile {
					position: fixed;
					z-index: 999999999;
					color: white;
					left: 0.5em;
					top: 0.25em;
					}
	
				.entry {
					display: none;
					}
	
				.entry-mobile {
					display: block;
					height: calc(var(--vh, 1vh) * 100);
					width: 100%;
					background: lightgrey;
					scroll-snap-align: start;		
					}
			
					.entry-content {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;		
						}
				
						.entry-content-inner {
							height: 100%;
							position: relative;
							}
						
						.entry-content-inner p {
							width: 100%;
							margin: 0 auto;
							position: absolute;
							z-index: 99999999;
							bottom: 0;
							padding: 1em 0;
							text-align: center;
							color: white;
							}

							.alignnone {
								width: 100%;
								height: calc(var(--vh, 1vh) * 100);
								object-fit: cover;
								margin: 0;							
								}

							.entry-content-inner p:before {
								content: " ";
								position: absolute;
								bottom: 0;
								width: 100%;
								display: block;
								height: 12em;
								background: linear-gradient(0deg, rgba(0, 0, 0, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
								mix-blend-mode: multiply;
								z-index: -999;
								}
												
							.html5_video_players {
								width: 100%;
								height: 100%;
								margin: 0 auto;
								}
						
								.h5vp_player_temp {
									height: 100%;
									display: flex;
									flex-direction: column;
									justify-content: center;							
									}
		
									.plyr {
										border-radius: unset !important;
										}
							
									.plyr_wrapper {
										width: 100%;
										height: auto;
										display: flex;
										flex-direction: column;
										justify-content: center;							
										}
								
										.plyr--video {
											overflow: hidden;
											height: auto;
											width: 100%;
											margin: 0 auto;								
											}
									
											.plyr__video-wrapper {
												height: auto;
												width: 100%;									
												}
										
												.plyr video {
													width: 100vw;
													height: calc(var(--vh, 1vh) * 100);
													object-fit: cover;
													max-height: unset;										
													}
						

}