@charset "utf-8";
@import url('style_gen.css');
:root{
	--text-main-color: #fff;
}

html, body, body * {margin: 0;padding: 0;}
html, body {overflow-x: hidden; overflow-x: clip; max-width: 100%; }
body{color: #fff; text-align: center; background-color: #000;}
body *{transition: all .3s ease-in-out;}
#myVideos{position: relative; left: 50%; display: grid; grid-row-gap: 5vh; margin-top: 3vh; margin-bottom: 7vh; transform: translate(-50%, 0%);}
.description{position: relative; color: #fff;}
.item{position: relative;}
video{height: auto;}
.custom-play, .custom-pause{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.5); color: white; font-size: 3rem; border: none; border-radius: 50%; cursor: pointer;}
.custom-play{display: block; font-size: 3rem; padding: 0.4em 0.5em 0.4em 0.7em;}
.custom-pause{display: none; padding: 0.4em 0.6em;}
.description{position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 50%,  rgba(0, 0, 0, 0) 100%); color: #fff; font-size: 0.9rem; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease;}
.description.hidden {opacity: 0; visibility: hidden;}


/*------------------------------------------------3/4-------------------------------------------------*/
@media only screen and (max-aspect-ratio: 3/4){
	#desc, #myVideos, video{width: 90vw;}
	#myVideos{grid-template-columns: 90vw;}
	video{height: auto;}
	.item {display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
	.item video {margin-top: auto;}
	.item .description{padding: 6vh 3vh 2vh 3vh;}
}


/*------------------------------------------------1/1-------------------------------------------------*/
@media only screen and (min-aspect-ratio: 3/4){
	#desc, #myVideos{width: 85vw;}
	#myVideos{grid-template-columns: repeat(2, 40vw); grid-column-gap: 5vw;}
	video{ width: 40vw;}
	.item {display: grid; grid-template-rows: auto 1fr auto; height: 100%; grid-column-gap: 5vw;}
	.item .description {grid-row: 1;}
	.item video {grid-row: 3;}
	.item .description{padding: 6vw 3vw 2vw 3vw;}
}
/*------------------------------------------------1/1-------------------------------------------------*/
@media only screen and (min-aspect-ratio: 1/1){
}


/*============================================LANDSCAPE================================================*/
@media only screen and (orientation : landscape){
}

/*------------------------------------------------16/9------------------------------------------------*/
@media only screen and (orientation : landscape) and (min-aspect-ratio: 16/9){
}

/*------------------------------------------------4/3-------------------------------------------------*/
@media only screen and (orientation : landscape) and (min-aspect-ratio: 4/3) and (max-aspect-ratio: 16/9){
}

/*------------------------------------------------4/3-------------------------------------------------*/
@media only screen and (orientation : landscape) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3){
}

/*============================================PORTRAIT=================================================*/
@media only screen and (orientation : portrait){
}

/*------------------------------------------------1/1-------------------------------------------------*/
@media only screen and (orientation : portrait) and (min-aspect-ratio: 3/4) and (max-aspect-ratio: 1/1){
}

/*------------------------------------------------3/4-------------------------------------------------*/
@media only screen and (orientation : portrait) and (max-aspect-ratio: 3/4){
}

/*============================================ANIMATION=================================================*/