/* ########################################################################## */
/* MY RPG Page */
/* ########################################################################## */
:root {
	--white: #eee;
	--bg: #131412;
	--text: #131412;
	--secondary: #efa200;
	--link1: var(--secondary);
	--grey: var(--bg);
}
html {
	background: var(--bg);
}
article a:hover{ color: inherit; }
abbr{ border-bottom-color: var(--white); }

.logo{
	margin: 14px auto; display: block; width: calc(100% - 32px);
}

article{
	background-color: #193145; padding: 16px; margin-bottom: 16px;
	border-style: solid; border-radius: 8px;
	border-top-color: #1e3c54; border-left-color: #1e3c54;
	border-bottom-color: #141e26; border-right-color: #141e26;
	text-shadow: 2px 2px 0 #131412; box-shadow: none;
	color: var(--white);
}

b{ color: var(--secondary); }

.nobg{
	background: none; border: none;
	padding: 0; line-height: 0;
}
article video{
	display: block; margin: auto; background: #000;
}

.screen{
	margin: 4px; display: inline-block; width: calc(50% - 8px);
}

#rating_a, #rating_b{ display: inline-block; vertical-align: top; }
#rating_a{
	width: calc(40% - 32px);
}
#rating_a img{
	width: calc(100% - 32px); margin-top: 12px;
}
#rating_b{
	width: calc(64% - 16px);
}

#showcw{
	display: block; padding: 8px;
	background: #376079;
	border-radius: 8px;
}
#showcw summary{ font-weight: bold; }
#cwzone{
	display: block; padding-top: 8px;
}
#cwzone p{ margin: 0; }

.meta label{ background: #376079; }
.meta li{ border-bottom: 1px dotted #376079; }

/* ########################################################################## */
/* Mobile adaptation */
/* ########################################################################## */

@media (max-width: 1008px) {
video{ width: calc(100% - 32px); }
video{ height: auto; }
}
@media (max-width: 844px) {
section{ width: calc(100% - 32px); margin: 0 auto; }
.screen{ display: block; width: 100%; margin: 8px auto; }

#rating_a, #rating_b{ display: block; width: 100%; }
#rating_a img{ width: 90%; margin-top: 0; }