/* MAIN */

html, body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
}

body {
	font-size: 14px;
	background-color: #0f0f0f;
	color: #f1f1f1;
}

.wrapper-main {
    display: grid;
    grid-template-columns: 12% auto;
    grid-template-rows: 1.3fr auto;
    grid-gap: 10px;
	width: 100vw;
	height: Calc(100vh - 10%);
}



/* HEADER */

header {
	background-color: #262626;
	display: grid;
    grid-template-columns: 30% auto;
    grid-template-rows: auto;
	align-items: center;
}


/* BEGIN - LOGO */
.logo a {
	margin-left: 4em;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.logo h1 {
	font-size: 2.5vh;
	font-family: Segoe UI Black;
}
#logo-img {
	padding-top: 2.2vh;
	max-height: 2.5vh;
    max-width: auto;
}
/* END - LOGO */
/* BEGIN - LOGO BUTTON */
.logo a:link { 
	text-decoration: none;
	color: #f0f0f0;
}
.logo a:visited {
	text-decoration: none;
	color: #f0f0f0;
}
.logo a:hover {
	text-decoration: none;
	color: #f0f0f0;
}
.logo a:active {
	text-decoration: none;
	color: #f0f0f0;
}
/* END - LOGO BUTTON */


/* BEGIN - SEARCH FIELD */
.search {
	display: grid;
    grid-template-columns: 40vw 1%;
    
	align-items: baseline;
}
.search input {
	padding: 0.5em;
	width: auto;
	height: 0.5vw;
}
.search a {
	padding: 0.5em;
	justify-items: center;
}
/* END - SEARCH FIELD */
/* BEGIN - SEARCH BUTTON */
.search a:link { 
	text-decoration: none;
	color: #f0f0f0;
}
.search a:visited {
	text-decoration: none;
	color: #f0f0f0;
}
.search a:hover {
	text-decoration: none;
	color: #f0f0f0;
}
.search a:active {
	text-decoration: none;
	color: #f0f0f0;
}
/* END - SEARCH BUTTON */

/* BEGIN - CONTENT */
.contents {
	margin-top: 3vh;
	display: grid;
    grid-template-columns: 15% 15% 15% 15% 15%;
    grid-gap: 2.5vw;
}
.content-block {
	
	width: 30vh;
	height: 35vh;
	background-color: #292929;
}
.content-block h3 {
	padding: 0 2vh;
	font-size: 1.5vh;
}
.content-block h4 {
	padding: 0 2vh;
	font-size: 1.5vh;
	text-color: white;
}
.content-block img {
	padding: 2vh 0 0 0;
	min-width: 30vh;
	max-height: auto;
    max-width: 30vh;
}
/* END - CONTENT */


/* BEGIN - AUTHOR LINK BUTTON */
/* normal link #e14d43*/
.video-author-link-btn a:link { 
	text-decoration: none;
	color: #8c8c8c;
}
/* visited link #50afe5*/
.video-author-link-btn a:visited {
	text-decoration: none;
	color: #8c8c8c;
}
/* mouse over link #fe0000*/
.video-author-link-btn a:hover {
	text-decoration: none;
	color: #b0b0b0;
}
/* selected link #fe0000*/
.video-author-link-btn a:active {
	text-decoration: none;
	color: #b0b0b0;
}
/* END - AUTHOR LINK BUTTON */


/* BEGIN - WHITE HYPERLINK BUTTON */
.white-hyperlink-btn a:link { 
	text-decoration: none;
	color: #f0f0f0;
}
.white-hyperlink-btn a:visited {
	text-decoration: none;
	color: #f0f0f0;
}
.white-hyperlink-btn a:hover {
	text-decoration: none;
	color: #f0f0f0;
}
.white-hyperlink-btn a:active {
	text-decoration: none;
	color: #f0f0f0;
}
/* END - VIDEO LINK BUTTON */

/* BEGIN - VIDEO PLAYER */
.video-player video{
	width: 88%;
	
}
/* END - VIDEO PLAYER */




/* BEGIN - ANOTHER */
img {
	border-style: none;
}
.menu {
	text-align: center;
}
.menu-btn {
	padding-top: 25px;
}
.menu-btn a, .menu-btn a:visited {
	color: white;
}
.copyright {
	color: #00B8A7;
	text-decoration-line: none;  
	margin: 20px;
	display: flex;
	justify-content: left;
	align-items: flex-end;
}
#iframe-show-html-file-with-updates {
	width: 100%; 
	height: 1000px; 
	border-width: 0px;
}
.demo {
	font-size: 0.9em;
}
/* END - ANOTHER */