body {
	margin: 0;
	padding: 0;
	background-color: #eefaff; /* lightcyan coral */
}

#all {
	margin: 0 auto;
	max-width: 800px;
}

h1 {
	font-family: "Londrina Solid", cursive;
	font-size: 3em;
	letter-spacing: 3px;
	text-align: center;
}

section, #top {
	margin: 10px;
	padding: 0 1em 1em 1em;
	background-color: rgb(180, 230, 255); /* rgba(255, 85, 50, 0.8) */
	border-radius: 1.2em;
	font-family: "Quicksand", sans-serif;
	min-width: 250px;
	max-width: 750px;
	display: flex;
	flex-direction: column;
}

#top {
	padding: 1em;
	flex-direction: row;
	justify-content: space-around;
	align-items: stretch;
}

#top > img {
	object-fit: scale-down;
	margin: 0 1em 1em 1em;
	display: block;
	max-width: 256px;
	max-height: 256px;
	width: auto;
	height: auto;
	border-radius: 5px;*/
}

#top > div {
	text-align: left;
}

#social {
	font-size: 1.2em;
	display: flex;
}

#social > div {
	width: 75px;
	margin: 0.3em;
	padding: 0.3em;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media (max-width: 666px) {
	#top > img {
		margin: 1em;
		width: 10em;
		height: 13em;
		border-radius: 5px;
	}
	#top > div > h1 {
		font-size: 2em;
		margin: 10px 0;
	}
	#social {
		flex-wrap: wrap;
	}
	#social > div {
		width: 30px;
		flex: 1 0 35%;
		font-size: 0.8em;
	}
	#social > div > i {
		margin: 0;
		padding: 0;
	}
	#social > div > span {
		margin: 3px 3px 0 5px;
	}
}

#social > div > i {
	margin: 5px;
	font-size: 2em;
}

#social > div > span {
	margin: 5px 5px 5px 7px;
}

#social > div:hover {
	background: rgb(120, 210, 255);
	cursor: pointer;
}

.t {
	font-family: "Fredoka One", cursive;
	margin: 0.4em 0 0 1em;
	flex: 1;
}

.e {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

.entry {
	margin: 15px auto;
	padding: 0 10px;
	max-width: 220px;
	text-align: center;
}

img, i, .entry *:not(p), h2, h1, .links, #social {
  -webkit-user-select: none;
  -moz-user-select: none;
	user-select: none;
}

.entry span {
	display: inline-block;
	border-radius: 10px;
	padding: 5px 10px;
	background-color: rgb(120, 210, 255); /* rgb(72, 209, 204) rgba(200, 00, 100, 0.3) */
	margin-top: 8px;
}

.entry img {
	max-width: 210px;
	max-height: 140px;
	border-radius: 10px;
}

#summary, #end {
	padding: 0 15px 5px 15px;
}

.link {
	color: #08b; /* #00a5c5 */
	cursor: pointer;
}

.link:hover {
	color: #3cf;
}

.desc {
	display: none;
	padding: 10px 10px 12px 10px;
	margin-top: 12px;
	width: 250px;
	position: absolute;
	border-radius: 10px;
	background: #000;
	color: #adf;
}

.desc::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #000000;
	border-top: 0;
	border-radius: 2px;
	margin-left: -10px;
	margin-top: -8px;
}

.d0  {margin-left: -79px} /*  */
.d1  {margin-left: -89px} /*  */
.d2  {margin-left: -91px} /*  */
.d3  {margin-left: -100px} /*  */
.d4  {margin-left: -86px} /*  */
.d5  {margin-left: -134px} /*  */
.d6  {margin-left: -113px} /*  */
.d7  {margin-left: -135px} /*  */
.d8  {margin-left: -81px} /*  */
.d9  {margin-left: -135px} /*  */
.d10 {margin-left: -155px} /*  */
.d11 {margin-left: -158px} /*  */
.d12 {margin-left: -188px} /*  */
.d13 {margin-left: -109px} /*  */
.entry > *:hover ~ .desc {display: block}

.award {
	margin: 5px;
	padding: 5px;
	display: flex;
	flex-direction: column;
}

.award div {
	margin: 2px 6px
}

.award span {
	font-weight: bold;
}

td {
	vertical-align: top;
	padding: 10px 5px;
}

.flag {
	width: 72px;
	height: 48px;
}

.rating {
	color: steelblue; /* crimson */
	margin-top: 8px;
}

.code {
	font-size: 4.5em;
}

.note {
	margin: -5px 0 3px 0;
}

li {
	margin: 5px 0;
}

.links {
	text-align: center;
	max-width: 120px;
	padding: 5px 15px;
	margin: 5px 10px;
	border: 1px solid rgb(120, 210, 255); /* deepskyblue turquoise */
	border-radius: 10px;
	cursor: pointer
}

.links:hover {
	background-color: rgb(120, 210, 255); /* turquoise */
	color: #fff;
	border-color: rgb(120, 210, 255);
}