:root {
	--spacing--section: calc(1.5em + 0.5vh);
	--spacing--vertical: calc(0.5em + 0.5vh);
	--textcolor: #fff;
	--textcolor--secondary: #dbceb9
}
html {
	min-height: 100vh;
	font-size: 15px;
	line-height: 1.4;
	font-family: 'Libre Baskerville', serif;
	text-align: center;
	color: var(--textcolor);
	scroll-behavior: smooth;
	background:
		url('https://uploads.riseonline.wiki/bg.webp') no-repeat center center,
		radial-gradient(#303646, #0c0c12)
}
body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 0;
	min-height: 100vh;
	padding: 2em
}
/* Dikey bosluklar baslangic */
* {
	margin: 0;
	box-sizing: border-box
}
	* + * {
		margin-top: var(--spacing--vertical);
	}
		.content li + li {
			margin-top: calc(var(--spacing--vertical) / 3);
		}
		.content > * + section,
		.content > * + aside,
		.content > * + article {
			margin-top: var(--spacing--section);
		}
body > * + * {
	margin-top: var(--spacing--section)
}
.content h2 + *,
.content h3 + *,
.content h4 + *,
.content h5 + *,
.content h6 + * {
	margin-top: 0.75em
}
/* Dikey bosluklar bitis */
a {
	color: var(--textcolor--secondary);
	transition: color 0.3s
}
	a:hover {
		color: var(--textcolor);
	}
/* Logo baslangici */
.logo {
	--logo-width: 3.5rem;
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.6em;
	word-spacing: -0.65em;
	text-transform: uppercase;
	text-align: center;
	color: #dbceb9;
	text-decoration: none
}
.logo::before {
	content: '';
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
	width: var(--logo-width);
	height: var(--logo-width);
	background: url('https://uploads.riseonline.wiki/logo.svg') center/contain no-repeat
}
/* Logo sonu */

/* Wiki listesi baslangici */
.wikilist {
	--wikilist-spacing: 0.35em;
	--wikilist-item-width: 80vw;
	--wikilist-item-basewidth: 100%;
	--wikilist-item-height: 25vh;
	--wikilist-item-padding: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	max-width: 98vw;
	padding: 0;
	list-style: none
}
.wikilist > * {
	margin: var(--wikilist-spacing);
	width: calc(var(--wikilist-item-basewidth) - var(--wikilist-spacing) * 2);
	max-width: var(--wikilist-item-width);
	transition: opacity 0.3s ease-in-out
}
	/* 2 oyun / 4 oyun / 6 oyun */
	.wikilist > :nth-last-child(2):first-child,
	.wikilist > :nth-last-child(2):first-child ~ *,
	.wikilist > :nth-last-child(n + 3),
	.wikilist > :nth-last-child(n + 3) ~ * {
		--wikilist-item-basewidth: 50%;
	}
	.wikilist:hover > * {
		opacity: 0.6;
	}
	.wikilist > *:hover {
		opacity: 1;
	}
.wikilist a {
	text-decoration: none
}
.wiki {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: var(--wikilist-item-height);
	max-width: 100%;
	max-height: 70vh;
	padding: var(--wikilist-item-padding);
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	will-change: contents
}
	.wiki:hover {
		padding-bottom: 2.5em;
	}
	.wiki--comingsoon {
		opacity: 0.3;
	}
	/* Gorsel uzerindeki kenarlik */
	.wiki::before,
	.wiki::after {
		--wiki-border-width: 1px;
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: calc(100% - calc(var(--wiki-border-width) * 2));
		height: calc(100% - calc(var(--wiki-border-width) * 2));
		border: var(--wiki-border-width) solid #fff;
		mix-blend-mode: overlay;
		transition: inherit;
	}
		.wiki::after {
			--wiki-border-width: 3px;
			opacity: 0;
			transform: scale(0.5);
		}
			.wiki:hover::after {
				opacity: 1;
				transform: scale(1);
			}
.wiki-image {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -2;
	margin: 0;
	object-fit: cover;
	object-position: left top;
	min-width: 100%;
	min-height: 100%;
	max-width: none
}
.wiki-image * {
	margin: 0
}
.wiki-title,
.wiki-description {
	transition: all 0.3s ease-in-out
}
.wiki-title {
	position: relative;
	overflow: hidden;
	line-height: 1.1;
	text-indent: -100vw;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%
}
	.wiki-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		filter: blur(2em);
	}

	.wiki-title--turkish {
		width: 136px;
		height: 90.52px;
		background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Flag_of_Turkey.svg/320px-Flag_of_Turkey.svg.png');
	}
	.wiki-title--english {
		width: 136px;
		height: 90.52px;
		background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg/320px-Flag_of_the_United_Kingdom_%283-5%29.svg.png');
	}
	.wiki-title--espanol {
		width: 136px;
		height: 90.52px;
		background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/320px-Flag_of_Spain.svg.png');
	}
	.wiki-title--portugues {
		width: 136px;
		height: 90.52px;
		background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/320px-Flag_of_Portugal.svg.png');
	}

	@media  (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		.wiki-title--turkish {
			background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/Flag_of_Turkey.svg/640px-Flag_of_Turkey.svg.png');
		}
		.wiki-title--english {
			background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_the_United_Kingdom_%283-5%29.svg/800px-Flag_of_the_United_Kingdom_%283-5%29.svg.png');
		}
		.wiki-title--espanol {
			background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/640px-Flag_of_Spain.svg.png');
		}
		.wiki-title--portugues {
			background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/640px-Flag_of_Portugal.svg.png');
		}
	}
.wiki-description {
	display: none;
	max-height: 0;
	visibility: hidden;
	opacity: 0;
	color: var(--textcolor--secondary)
}
	* + .wiki-description {
		margin-top: 1em;
	}
	.wiki-description::before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
		width: 100%;
		height: 60%;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	}
	:hover > .wiki-description {
		max-height: 15em;
		visibility: visible;
		opacity: 1;
	}

@media screen and (min-width: 500px) {
	.wikilist {
		--wikilist-item-width: 15em;
		--wikilist-item-height: 40em;
		--wikilist-item-padding: 2em;
	}
	.wiki {
		justify-content: flex-end;
		padding-bottom: calc(var(--wikilist-item-padding) * 1.25);
	}
	/* 3 oyun / 6 oyun */
	.wikilist > :nth-last-child(3):first-child,
	.wikilist > :nth-last-child(3):first-child ~ *,
	.wikilist > :nth-last-child(n + 3),
	.wikilist > :nth-last-child(n + 3) ~ * {
		--wikilist-item-basewidth: 33.3%;
	}
	.wiki-description {
		display: block;
	}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
	.wikilist > :nth-last-child(n + 4),
	.wikilist > :nth-last-child(n + 4) ~ * {
		--wikilist-item-height: 25em;
	}
}
@media screen and (min-width: 1000px) {
	:root {
		--spacing--section: calc(3em + 0.5vh);
		--spacing--vertical: calc(1em + 0.5vh);
	}
	.wiki {
		--wikilist-item-padding: 2.5em;
	}

	/* 4 oyun */
	.wikilist > :nth-last-child(4):first-child,
	.wikilist > :nth-last-child(4):first-child ~ * {
		--wikilist-item-basewidth: 25%;
	}
	/* 5 oyun */
	.wikilist > :nth-last-child(5):first-child,
	.wikilist > :nth-last-child(5):first-child ~ * {
		--wikilist-item-basewidth: 20%;
	}
	/* 6 oyun */
	.wikilist > :nth-last-child(6):first-child,
	.wikilist > :nth-last-child(6):first-child ~ * {
		--wikilist-item-basewidth: 16.6%;
	}
	/* en az 7 oyun */
	.wikilist > :nth-last-child(n + 7),
	.wikilist > :nth-last-child(n + 7) ~ * {
		--wikilist-item-height: 20em;
	}
}
/* Wiki listesi sonu */
.footer {
	width: 100%
}
.footer ul {
	margin: 0;
	padding: 0;
	list-style: none
}
.footer ul > * {
	margin: 0.5em
}
@media screen and (min-width: 500px) {
	.footer ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
}
/* Genel icerik baslangici */
.content {
	margin-left: auto;
	margin-right: auto;
	max-width: 40em;
	text-align: left
}
.content h1 {
	text-align: center
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	line-height: 1.1;
	color: var(--textcolor--secondary)
}
.content h3,
.content h4,
.content h5,
.content h6 {
	font-weight: normal
}
/* Genel icerik sonu */