/* Main */

:root {
	--color-text: #EEEFF3;
	--color-text-dark: #A9AEB5;
	--color-text-muted: #8D8D9D;
	--color-background: #191922;
	--color-muted: #3A3A46;
	--color-primary: #F52F44;
	--color-primary-dark: #CD2335;
}

/* Yellow */

:root {
	--color-primary: #FFBD2E;
	--color-primary-dark: #CD8529;
}


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

html, body{
	
	height: 100%;
	
}

body{
	
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-weight: 500;
    font-size: 15px;
	
	color:var(--color-text);
	background-color:var(--color-background);
	
	display: flex;
	flex-direction: column;
	
    line-height: 1.75;
	
	overflow-y: -moz-scrollbars-vertical !important;
	overflow-y: scroll !important;
	
}

.content{ flex: 1 0 auto; }

.highlight{ color: var(--color-primary); }

a{
	
	color: var(--color-text);
    border-bottom: 1px solid var(--color-text);
	
}

a:hover{
	
	color: var(--color-primary);
    border-color: var(--color-primary);
	
	text-decoration:none;
	
}

p{ margin:3em 0em; }

h1{
	
	font-family: 'Poppins', sans-serif;
	font-size: 48px;
	
}

h2, h3{
	
	font-size: 12px;
    text-transform: uppercase;
    color: var(--color-text-muted);
	letter-spacing: .05em;
	
	overflow: hidden;
	text-align:center;
	
}

h2:before, h2:after, h3:before, h3:after {
	
	background-color: var(--color-muted);
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
	
}

h2:before, h3:before {
	
	right: 1em;
	margin-left: -50%;
	
}

h2:after, h3:after {
	
	left: 1em;
	margin-right: -50%;
	
}

hr{
	
	background-color: var(--color-muted);
    height: 1px;
    margin: 3em 0em;
	
}

.logo-container img{
	
	float:left;
	
}

.logo-text{
	
	font-family: 'Poppins', sans-serif;
	color: var(--color-text);
    float: left;
    font-size: 20px;
    line-height: 18px;
    margin-left: 15px;
    margin-top: 8px;
	
}

.header{
	
	height:70px;
	padding:4em 0em;
	margin-bottom:5em;
	
	font-size:95%;
	font-weight: 700;
	
}

.sub-source{
	
	margin-bottom: 3em;
    color: var(--color-text-muted);
    font-size: 11px;
    background-color: var(--color-muted);
    border-radius: 0.3em;
    padding: 0.4em 1em;
	
}

/* Info */

table.info a{ color:var(--color-text); border-bottom:1px solid var(--color-text-muted); }
table.info a:hover{ color:var(--color-primary); border-color:var(--color-primary); }

.info-list{
	
	list-style-type: none;
	padding: 0; margin: 0;
	line-height:2em;
  
}

.info-list li a{
	
	color:var(--color-text);
	border:none;
	
}

.info-list li a:hover{
	
	text-decoration:none;
	color:var(--color-primary);
	
}

.info-list li a:hover .link{ border-color:var(--color-primary) !important; }

.info-list li .link{
	
	border: 2px solid var(--color-muted);
    border-radius: 4px;
    padding: 3px 5px;
    font-size: 75%;
    margin-left: 2px;
    font-weight: 600;
	
}

ul{
	
	margin:40px 0px;
	
}

/* Pagination */

.navigation-pagination{
	
	list-style:none;
	margin:0; padding:0;
	
}

.navigation-pagination li{ display:inline; }

.navigation-pagination li a{
	
	padding: 0em 0.5em;

	color:var(--color-text);
	display:inline-block;
	border-radius:0.25em;
	
	height:32px;
	padding-top:3px;
	
	border:none;
	
}

.navigation-pagination li a.selected{

	color:var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
    border-radius: 0;
	
}

.navigation-pagination li a:hover{
	
	color:var(--color-primary);
	text-decoration:none;
	
}

.navigation-pagination li a.icon{ filter:invert(1); opacity:0.25; }
.navigation-pagination li a.icon:hover{ opacity:1; }

.pagination-seperator{
	
	margin-left: 0.5em;
    margin-right: 0.5em;
    color:var(--color-muted);
	
}

/* List */

.horizontal-list{
	
	list-style:none;
	
	margin:0; padding:0;
	margin-top: 0.75em;
	
}

.horizontal-list li{

	display:inline;
	margin-left:2.25em;
	
}

.horizontal-list a{
	
	display:inline-block;
	
	height:1.7em;
	padding-top:0px;
	
	border:none;
	
}

.horizontal-list a:hover, a.active{
	
	color:var(--color-primary);
	border-bottom:2px solid var(--color-primary);
	
	text-decoration:none;
	
}

.evenly li{
	
	margin-left:1em;
	margin-right:1em;
	
}

/* Games */

.game{
	
	font-size:14px;
	
	position:relative;
	
	border:2px solid var(--color-muted);
	border-radius:0.5em;
	
	display:block;
	margin-bottom:2em;
	
	text-decoration:none;
	text-align:center;
	
}

.game figure{
	
	transition: transform 0.2s;
	
}

.game:hover{
	
	color:var(--color-background);
	text-decoration:none;
	
	background-color:var(--color-primary);
	border-color:var(--color-primary);
	
}

.game:hover figure{
	
	transform:scale(1.1) !important;
	
}

.game:hover small{
	
	color:var(--color-background);
	
}

.game:hover .tag{
	
	color:var(--color-background);
	background-color:var(--color-primary);
	
}

.game .title{
	
	line-height: 20px;
	height:40px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	
}

.game small{
	
	font-size:12px !important;
	color:var(--color-text-muted);
	
}

.game .row{
	
	padding:0em 1em;
	padding-bottom:1.1em;
	
	line-height: 20px;
	
}

.game figure{
	
	height:160px;
	
}

.game figure.cover.new img{
	
	border-radius:0.25em;
	filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.5));
	
	max-height: 110px;
    margin-top: 40px;
	
}

.game figure.cover img{
	
	max-height:170px;
	
}

.cover-frame .tag, .game .tag{
	
	color: var(--color-text-muted);
    background-color: var(--color-muted);
    right: -10px;
    top: -6px;
    position: absolute;
    padding: 0.1em 0.6em;
    font-size: 11px;
    border-bottom-left-radius: 0.4em;
	
}

.cover-frame .cover{
	
	transition: transform 0.2s;
	
}

.cover-frame:hover .cover{
	
	transform:scale(1.1) !important;
	
}

.cover-frame .tag{ top: 0px; right: 0px; }

.game .info{
	
	position:absolute;
	top:6px; left:9px;
	
    line-height: 20px;
	
}

.game .info.corner{
	
	top:6px; right:9px; left:auto;
	
}

.cover-frame .cover.new{
	
	max-width:60%;
	margin:6em 0em;
	
	border-radius:0.35em;
	filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
	
}

.cover-frame{
	
	position: relative;
	
	border-radius:0.5em;
	
	text-align:center;
	
	border:2px solid var(--color-muted);
	border-radius:0.3em;
	
}

.cover-background{
	
	position: absolute;
	
	border-radius:0.5em;
	padding:1em 1em;
	
	background-position:center;
	background-size:200%;
	
	width: 100%; height: 100%;
	
	filter: grayscale(100%);
    opacity: 0.1;
	
}

.screenshot{ opacity:0.5; filter: grayscale(100%); }
.screenshot:hover{ opacity:1; filter: grayscale(0%); }

.screenshot-small{ border:none; }

.collection{
	
	line-height: 1.3em;
	
	padding: 2em 0em;
	border-radius:0.3em;
	
}

.collection:hover{
	
	color:var(--color-background);
	background-color:var(--color-primary);
	
}

.collection:hover small{
	
	color:var(--color-background);
	
}

.collection small{
	
	font-size:12px !important;

}

/* Buttons */

.btn{
	
	transition: none !important;
	
	border:none;
	
	color:var(--color-background);
	background-color:var(--color-text);
	filter: drop-shadow(0px 2px 0px var(--color-text-dark));
	
	font-size:0.9em;
	font-weight:bold;
	
	padding:0.6em 1.2em;
	padding-bottom: 0.6em;
	
	margin-right:0.5em;
	
	box-sizing: border-box;
	
	border-radius:0.35em;
	
}

.btn:hover, .btn:focus{
	
	text-decoration:none;
	
	color:var(--color-background);
	background:none;
	background-color:var(--color-primary) !important;
	
	outline:0 !important;
	box-shadow: none;
	
	filter: drop-shadow(0px 2px 0px var(--color-primary-dark));
	
}

.btn.large{
	
	font-size:1em;
	text-align:center;
	
	display:block;
	
	padding:0.6em 0em;
	margin-bottom:0.5em;
	
	border:none;
	
}

/* Footer */

.footer{
	
	text-align:center;
	width: 100%;
	
	flex-shrink: 0;
	
	padding:3em 2em;
	margin-top:2em;
	
}

/* Form */

.form-zoeken{
	
	border-radius: 6px;
    height: 3em;
    padding: 0em 1em;
	
	border: 2px solid var(--color-muted);
    background: none;
	
	color:var(--color-text-muted);
	
}

.form-zoeken:focus{
	
	color:var(--color-text);
	
	background:none;
	
	border-color:var(--color-primary) !important;
	box-shadow:none !important;
	
}

select{
	
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-weight: 500;
    font-size: 13px;
	
	color:var(--color-text-muted);
	background-color:var(--color-muted);
	
	border:none;
	
	padding: 0.4em 0.4em;
    border-radius: 0.3em;
	
}

option:checked, option:hover{
	
	color:var(--color-text) !important;
	
}

label{
	
	vertical-align: text-top;
    margin-left: 0.1em;
	
}

/* Special */

::-moz-selection { /* Code for Firefox */

	background: var(--color-primary);
	color:var(--color-background);
	
}

::selection {
	
	background: var(--color-primary);
	color:var(--color-background);
	
}

.sub-source, .info-list li, .no-select {
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
			
}

/* Meta list */

table{
	
	width:100%;
	font-weight: bold;
	line-height: 2em;
	
	font-size:14px;
	
}

table > *:first-child:not(thead) td:first-child{ width:35%; }

table .light{
	
	font-weight: normal;
	color: var(--color-text-muted);
	
}

table .link{
	
	font-size: 75%;
    padding: 0.35em 0.6em;
    border-radius: 0.3em;
	
	filter: brightness(100%);
	
}

table .link:hover{ filter: brightness(120%); }

table a:hover{ text-decoration:none !important; }

.floating-button{
	
	position:fixed;
	bottom:10px; right:10px;
	
}

.floating-button a{ border:none; }

/* Additional */

.no-select {
	
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
			
}

/* Warning */

.warning{
	
	background-color: var(--color-primary);
    color: white;
    text-align: center;
    padding: 0.5em 2em;
	
}

.warning a{
	
	color:var(--color-background);
	text-decoration:none;
	border-bottom:none;
	
}

.warning a:hover{
	
	color:var(--color-background);
	text-decoration:none;
	border-bottom:2px solid var(--color-background);
	
}

.lity-content img{ border-radius: 0.4em; }

/* Mobile */

.opacity-mobile{ transition: opacity 0.3s; opacity:1.0; }
.show-mobile{ display:none; }

@media screen and (max-width:1000px) {
	
	.center-mobile{ text-align:center !important; }
	.hide-mobile{ display:none !important; }
	.show-mobile{ display:inherit; }
	.full-mobile{ width:100%; }
	.half-mobile{ width:50%; }
	
	.no-float{ float:none !important; }
	
	.cover-frame{ margin-bottom:2em; }
	.horizontal-list li { margin-left:1.1em; margin-right:1.1em; }
	.header{ padding-top:1em; }
	
}