/***
	The new CSS reset - version 1.5.1 (last updated 1.3.2022)
	GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
	Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
	- The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
	cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
	list-style: none;
}

/* For images to not be able to exceed their container */
img {
	max-width: 100%;
}

/* removes spacing between cells in tables */
table {
	border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
	white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
	-webkit-appearance: revert;
	appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
	color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
	display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
	line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
	-webkit-user-drag: element;
}

:root {
	--pd-yellow: #FEC832;
	--pd-brown: #312f29;
	--pd-gray: #fafafa;
	--pd-purple: #6D00ff;
	--fauna-dark: #282354;
}


body {
	margin: 0;
	padding: 4px;
	/* background: var(--pd-brown); */
	background:var(--pd-yellow);
	/* background: var(--fauna); */
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: var(--pd-brown);
	
	
	
}

#container {
	width:100%;
	margin: 0 auto;
	background: white;
	overflow: hidden;
	box-sizing: border-box;
	
	border-radius: 16px;

}

#header {
	width: 100%;
	position: relative;
	
	display: flex;
	gap: 28px;
	justify-content: flex-start;
	align-items: center;
	

	max-width: 600px;
	margin: 0 auto;
	padding: 32px 32px 24px 32px;
	
	
	border-bottom: 2px solid var(--pd-yellow);
}

#header #text {
	flex: 1;
}

#header a {
	color: var(--pd-brown);
	font-weight: 400;
}

#header img {
	width: 64px;
	margin-top: 4px; 
	display: block;
	rotate: -5deg;

	
	filter:  drop-shadow(0 0 1px rgba(0,0,0, 0.5)) drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.2));
}


#content {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 40px 32px 64px 32px;
	box-sizing: border-box;
}

div.game {
	margin-bottom: 48px;
}

div.game img {
	width: 100%;
	image-rendering: pixelated;
	border: 6px solid var(--pd-brown);
	border-radius: 6px;
	margin-bottom: 12px;
	transition: scale 0.25s;
	background:var(--pd-brown);
	/* filter: saturate(0) contrast(100); */
}

div.game img.transparent {
	background: transparent;
	border: none;
}

div.game img.color {
	border: none;
	image-rendering: inherit;
	border-radius: 12px;
}

div.game img:hover {
	scale: 1.02;
	
}



div.legal p{
	font-size:14px;
	margin-top: 24px;
	
}



p {
	margin-top: 12px;
	font-size: 18px;
	line-height: 24px;
}

strong {
	font-weight: 400;
}

a {
	color: var(--pd-purple);
}

a:hover {
	text-decoration: underline;
}

i {
	font-style: italic;
}

div.divider {
	border-bottom: 0.5px solid var(--pd-brown);
	/* opacity: 0.5; */
	margin-top: 32px;
}



h1 {
	font-weight: 900;
	font-size: 40px;
	/* color: var(--pd-yellow); */
	/* color: #ffffff; */
	color: var(--fauna-dark);
	/* width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 32px ; */
	/* text-shadow: 1px 1px 3px #c79200; */
}

h2 {
	font-weight: 300;
	font-size: 18px;
	color: var(--pd-brown);

	/* width: 100%;
	max-width: 600px;
	margin: 0 auto;
	padding: 0 32px ; */
	opacity: 0.7;
}

h3 {
	font-weight: 900;
	font-size: 20px;
}

h4 {
	margin-top: 32px;
	font-weight: 600;
}