/*
Theme Name: Death and Dialog
Theme URI: https://deathanddialog.com
Author: deathanddialog.com
Author URI: https://deathanddialog.com/
Description: For deathanddialog.com
Requires at least: 5.9
Tested up to: 6.0
Requires PHP: 5.6
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deathanddialog

*/

@font-face {
	font-family:"Cardo";
	src: url('assets/fonts/cardo/cardo_normal_400.woff2') format("woff2");
	font-style: normal;
	font-weight: 400;
}
@font-face {
	font-family:"Cardo";
	src: url('assets/fonts/cardo/cardo_normal_700.woff2') format("woff2");
	font-style: normal;
	font-weight: 700;
}
@font-face {
	font-family:"Cardo";
	src: url('assets/fonts/cardo/cardo_italic_400.woff2') format("woff2");
	font-style: italic;
	font-weight: 700;
}
@font-face {
	font-family:"Inter";
	src: url('assets/fonts/inter/Inter.woff2') format("woff2");
	font-style: normal;
	font-weight: 400;
}

html {
	--f-re: #AF3029;
	--f-or: #BC5215;
	--f-ye: #AD8301;
	--f-gr: #66800B;
	--f-cy: #24837B;
	--f-bl: #205EA6;
	--f-pu: #5E409D;
	--f-ma: #A02F6F;

	--f-re2: #D14D41;
	--f-or2: #DA702C;
	--f-ye2: #D0A215;
	--f-gr2: #879A39;
	--f-cy2: #3AA99F;
	--f-bl2: #4385BE;
	--f-pu2: #8B7EC8;
	--f-ma2: #CE5D97;

	--black: #100F0F;
	--base-950: #1C1B1A;
	--base-900: #282726;
	--base-850: #343331;
	--base-800: #403E3C;
	--base-700: #575653;
	--base-600: #6F6E69;
	--base-500: #878580;
	--base-300: #B7B5AC;
	--base-200: #CECDC3;
	--base-150: #DAD8CE;
	--base-100: #E6E4D9;
	--base-50: #F2F0E5;
	--paper: #FFFCF0;
}

@media (prefers-color-scheme: dark) {
	body {
		--red: var(--f-re2);
		--orange: var(--f-or2);
		--yellow: var(--f-ye2);
		--green: var(--f-gr2);
		--cyan: var(--f-cy2);
		--blue: var(--f-bl2);
		--purple: var(--f-pu2);
		--magenta: var(--f-ma2);

		--red-alt: var(--f-re);
		--orange-alt: var(--f-or);
		--yellow-alt: var(--f-ye);
		--green-alt: var(--f-gr);
		--cyan-alt: var(--f-cy);
		--blue-alt: var(--f-bl);
		--purple-alt: var(--f-pu);
		--magenta-alt: var(--f-ma);

		--bg: var(--black);
		--bg2: var(--base-950);
		--ui: var(--base-900);
		--ui2: var(--base-850);
		--ui3: var(--base-800);
		--tx: var(--base-200);
		--tx2: var(--base-500);
		--tx3: var(--base-700);
	}
}

@media (prefers-color-scheme: light) {
	body {
		--red: var(--f-re);
		--orange: var(--f-or);
		--yellow: var(--f-ye);
		--green: var(--f-gr);
		--cyan: var(--f-cy);
		--blue: var(--f-bl);
		--purple: var(--f-pu);
		--magenta: var(--f-ma);

		--red-alt: var(--f-re2);
		--orange-alt: var(--f-or2);
		--yellow-alt: var(--f-ye2);
		--green-alt: var(--f-gr2);
		--cyan-alt: var(--f-cy2);
		--blue-alt: var(--f-bl2);
		--purple-alt: var(--f-pu2);
		--magenta-alt: var(--f-ma2);

		--bg: var(--paper);
		--bg2: var(--base-50);
		--ui: var(--base-100);
		--ui2: var(--base-150);
		--ui3: var(--base-200);
		--tx: var(--black);
		--tx2: var(--base-600);
		--tx3: var(--base-300);
	}
}

body[data-theme=light] {
	--red: var(--f-re);
	--orange: var(--f-or);
	--yellow: var(--f-ye);
	--green: var(--f-gr);
	--cyan: var(--f-cy);
	--blue: var(--f-bl);
	--purple: var(--f-pu);
	--magenta: var(--f-ma);

	--red-alt: var(--f-re2);
	--orange-alt: var(--f-or2);
	--yellow-alt: var(--f-ye2);
	--green-alt: var(--f-gr2);
	--cyan-alt: var(--f-cy2);
	--blue-alt: var(--f-bl2);
	--purple-alt: var(--f-pu2);
	--magenta-alt: var(--f-ma2);

	--bg: var(--paper);
	--bg2: var(--base-50);
	--ui: var(--base-100);
	--ui2: var(--base-150);
	--ui3: var(--base-200);
	--tx: var(--black);
	--tx2: var(--base-600);
	--tx3: var(--base-300);	
}

body[data-theme=dark] {
	--red: var(--f-re2);
	--orange: var(--f-or2);
	--yellow: var(--f-ye2);
	--green: var(--f-gr2);
	--cyan: var(--f-cy2);
	--blue: var(--f-bl2);
	--purple: var(--f-pu2);
	--magenta: var(--f-ma2);

	--red-alt: var(--f-re);
	--orange-alt: var(--f-or);
	--yellow-alt: var(--f-ye);
	--green-alt: var(--f-gr);
	--cyan-alt: var(--f-cy);
	--blue-alt: var(--f-bl);
	--purple-alt: var(--f-pu);
	--magenta-alt: var(--f-ma);

	--bg: var(--black);
	--bg2: var(--base-950);
	--ui: var(--base-900);
	--ui2: var(--base-850);
	--ui3: var(--base-800);
	--tx: var(--base-200);
	--tx2: var(--base-500);
	--tx3: var(--base-700);
}

body {
	background: var(--bg);
	color: var(--tx);

	font-family: Inter;
	margin: 0;

	min-height: 100svh;
	display: flex;
	flex-direction: column;
}


* {
	box-sizing: border-box;
}

h2 {
	text-align: center;
}

h1, h2, h3 {
	font-family: Cardo;
}

main.wrap {
	max-width: 1024px;
	margin: 0 auto;
}

article.article-loop {
	text-align: center;
}

article img {
	box-shadow: var(--tx2) 1px 1px 3px;
	border-radius: 6px;
}

article h3 a {
	text-decoration: none;
}

section.content-area {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
}
section.content-area.content-full-width {
	flex-direction: column;
}

section.content-area article {
	flex: 1 0 0%;
}

@media screen and (min-width: 920px) {
	section.content-area article:nth-of-type(n+10) {
		display: none;
	}
}

@media screen and (max-width: 620px) {
	section.content-area article:nth-of-type(n+6) {
		display: none;
	}
}

a:link, a:visited {
	color: var(--tx2);
}

article.article-loop a {
	position: relative;
	height: auto;
	display: inline-block;
	overflow: hidden;
}
article.article-loop .type {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-45deg) translateX(-27px) translateY(-10px);
	padding: 3px 30px;
	color: var(--paper);
}
.type.type-outro {
	background: var(--green);
	border: 1px solid var(--green-alt);
}
.type.type-intro {
	background: var(--yellow);
	border: 1px solid var(--yellow-alt);
}
.type.type-dialog {
	background: var(--blue);
	border: 1px solid var(--blue-alt);
}
.type.type-death {
	background: var(--red);
	border: 1px solid var(--red-alt);
}
.type.type-other {
	background: var(--purple);
	border: 1px solid var(--purple-alt);
}
.article-full .type {
	color: var(--paper);
	font-family: Inter;
	font-size: 0.75rem;
	text-transform: uppercase;
	display: inline-block;
	padding: 3px 12px;
	border-radius: 12px;
	vertical-align: middle;
	margin-bottom: 3px;
	margin-left: 15px;
}

.save-container {
	padding: 10px 20px;
}
.save-container a {
	background: var(--purple);
	color: var(--paper);
	text-decoration: none;
	padding: 6px 12px;
	border-radius: 4px;
	display: block;
	width: min-content;
	text-align: center;
	float: right;
	margin-top: 30px;
}
.save-container img {
	margin-top: 10px;
	margin-bottom: 10px;
}

section.content-area .article-full {
	max-width: 800px;
	padding: 20px;
	margin: 0 auto;
	flex: 0;
}

.article-full label {
	display: block;
	margin: 20px 0 8px 0;
	font-size: 0.875rem;
}
.article-full form input, .article-full form select, .article-full form textarea {
	border: 1px solid var(--ui3);
	background: var(--bg2);
	color: var(--tx);
	padding: 10px;
	min-width: 300px;
}
.article-full form textarea {
	min-height: 100px;
}
.article-full form input:focus, .article-full form select:focus, .article-full form textarea:focus {
	border-color: var(--tx2);
	outline: none;
}

section.content-area .article-game {
	max-width: 800px;
	margin: 40px auto;
	padding: 20px;
	border: 1px solid var(--ui2);
	background: var(--bg2);
}

.article-game .game-information {
	display: flex;
	flex-wrap: nowrap;
}
.article-game .game-blurb {
	margin-left: 30px;
}
.article-game .other-games section {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

header {
	background: var(--bg2);
	border-bottom: 1px solid var(--ui3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	margin-bottom: 30px;
}
header a {
	text-decoration: none;
}
header ul {
	list-style: none;
}
header .menu {
  display: flex;
  column-gap: 24px;
}

footer {
	margin-top: auto;
	border-top: 1px solid var(--ui3);
	background: var(--bg2);
}

footer p {
	margin: 0;
	padding: 20px;
}