.flexbox {
  display: flex;
flex-direction: column;
align-items: center;
}

.video-container {
height: 100dvh;
width: 100dvw;
scroll-snap-type: y mandatory;

overflow-anchor: none;

overflow-x: hidden;
overflow-y: hidden;
/* changes to overflow-y: auto; when you press the button*/

-ms-overflow-style: none; 
  scrollbar-width: none;

position: relative; 
}

.video-container::-webkit-scrollbar {
  display: none;
}

.video-player {
height: 100dvh;
width: 56.25dvh;
background: black;
margin: 1dvh;
flex-shrink: 0;
scroll-snap-align: center;
justify-content: center;

}

html, body {
overflow: hidden;
font-family: Arial, sans-serif;
color: white;
}

body {
  text-align: center;
	display: flex;
	justify-content: center;
  align-items: center;
  background: rgb(51,51,51);
}

.overlay-div {
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
	translate: -50% -50%;
}

.pause-button {
	opacity: 0;
  pointer-events: none;
	background: rgba(0,0,0,0.5);
	width: 20dvh;
	height: 20dvh;
	border-radius: 50%;
}

.pause-text {
	opacity: 1 !important;
	text-align: center;
	font-size: 8dvh;
	-webkit-text-stroke: 0.5lvh white;
}

.pause-anim {
	animation-name: pauseAnim;
  animation-duration: 2s;
}

@keyframes pauseAnim {
	0%		{opacity: 0;
			transform: scale(0.25);
			}
	12.5%	{
			transform: scale(1.25);
			}
	25%	{opacity: 1;
			transform: scale(1);
			}
	50%	{opacity: 1;
			transform: scale(1);
			}
	100%	{opacity: 0;
			transform: scale(0.25);
			}
}

.overlay-text {
  position: absolute;
	z-index: 2;
	font-size: 5dvh;
}

.video-title {
	bottom: 5%;
	left: 5%;
}

.likes-text {
	bottom: 10%;
	right: 5%;
}

.start-element {
  position: static;
}

.like-button {
	height: 4dvh;
	width: 4dvh;
	outline: solid 1dvh white;
	bottom: 17.5%;
	right: 5%;
	border-radius: 2dvh;
}

.video-cont-div {
	position: relative;
}

.fixed {
  position: fixed;
  bottom: 0%;
  height: 10dvh;
  width: 100dvw;
  background: red;
  z-index: 3;
}