@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Share:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
	line-height: 1.15;
	/* 1 */
	-ms-text-size-adjust: 100%;
	/* 2 */
	-webkit-text-size-adjust: 100%;
	/* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
	/* 1 */
	display: block;
}

/**
 * Add the correct margin in IE 8.
 */
figure {
	margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	-webkit-box-sizing: content-box;
			box-sizing: content-box;
	/* 1 */
	height: 0;
	/* 1 */
	overflow: visible;
	/* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/* Text-level semantics
	 ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
	background-color: transparent;
	/* 1 */
	-webkit-text-decoration-skip: objects;
	/* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	/* 1 */
	text-decoration: underline;
	/* 2 */
	text-decoration: underline dotted;
	/* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
	font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	/* 1 */
	font-size: 1em;
	/* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
	font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
	background-color: #ff0;
	color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
	display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
	display: none;
	height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
	border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
	overflow: hidden;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: sans-serif;
	/* 1 */
	font-size: 100%;
	/* 1 */
	line-height: 1.15;
	/* 1 */
	margin: 0;
	/* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	/* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	/* 1 */
	text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
	/* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	/* 1 */
	color: inherit;
	/* 2 */
	display: table;
	/* 1 */
	max-width: 100%;
	/* 1 */
	padding: 0;
	/* 3 */
	white-space: normal;
	/* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	display: inline-block;
	/* 1 */
	vertical-align: baseline;
	/* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
	-webkit-box-sizing: border-box;
			box-sizing: border-box;
	/* 1 */
	padding: 0;
	/* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	/* 1 */
	outline-offset: -2px;
	/* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	/* 1 */
	font: inherit;
	/* 2 */
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Scripting
	 ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
	display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
	display: none;
}

/* Hidden
	 ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
	display: none;
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */
.animated {
	-webkit-animation-duration: 1s;
			animation-duration: 1s;
	-webkit-animation-fill-mode: both;
			animation-fill-mode: both;
}

.animated.infinite {
	-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
}

.animated.hinge {
	-webkit-animation-duration: 2s;
			animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
	-webkit-animation-duration: .75s;
			animation-duration: .75s;
}

/*------------------- GENERAL ---------------------*/
:root {
	--dark	: #2e3033;
	--darker: #222426;
	--text	: #999690;
	--bright: #e5e0c3;
	--link	: #ffee99;
	--paper	: #d9d3ce;
	--accent: #6688aa;
}

body {
	font-family	: Share, sans-serif;
	background	: var(--dark);
	color		: var(--text);
	margin		: 0;
}

::-moz-selection {
	color		: var(--dark);
	background	: var(--accent);
}
::selection {
	color		: var(--dark);
	background	: var(--accent);
}

a {
	color	: var(--text);
}

a:hover {
	color	: var(--link);
}

p {
	margin	: 0 0 1.5rem;
}

blockquote {
	font-style	: italic;
	border-left	: 4px solid var(--accent);
	padding-left: 2rem;
	margin		: 1.5rem 0;
	color:var(--accent)
}

.wrapper {
	width		: 1440px;
	max-width	: 90%;
	margin		: 0 auto;
}

.flex-row {
	display		: flex;
	flex-wrap	: wrap;
}

.cf::before, .cf::after {
	content: "";
	display: table;
}

.cf::after {
	clear: both;
}

.main_header {
	padding	: 2rem;
	display	: -webkit-box;
	display	: -webkit-flex;
	display	: -ms-flexbox;
	display	: flex;

	-webkit-box-pack		: justify;
	-webkit-justify-content	: space-between;
	-ms-flex-pack			: justify;
	justify-content			: space-between;

	-webkit-box-align	: center;
	-webkit-align-items	: center;
	-ms-flex-align		: center;
	align-items			: center;

	background	: var(--darker);
	z-index		: 1;

	box-shadow	: 0px 0px 1rem var(--bright);
}

.main_header .logo {
	font	: bold 2rem "Merriweather", serif;
	text-decoration : none;
}

.main_header a {
	color		: var(--bright);
}

.main_header a:hover {
	color		: var(--link);
}

.main_header .logo span {
	color		: var(--text);
	font-family	: Share, sans-serif;
	font-weight	: normal;
	font-style	: italic;
}

.main_header nav a {
	font-size		: 1.5rem;
	text-decoration	: none;
	margin-left		: 1rem;
}

#intro {
	position	: relative;
	padding		: 3rem 0;
}

#intro .title {
	color		: var(--bright);
	text-align	: center;
	font-size	: 3rem;
	margin		: 0;
}

.spread {
	padding	: 0 0 2rem;
}

.spread .card {
	position	: relative;
	width		: 31.333%;
	margin		: 0 1% 2% 1%;

	background		: var(--paper);
	border-radius	: 1rem;
}

.spread .card a {
	text-decoration	: none;
}

.spread .card .card_image {
	margin			: 5%;
	overflow		: hidden;
	border			: 2px solid var(--dark);
	border-radius	: 0.5rem;
}

/* Card image transition */
.spread .card .card_image img {
/*	width			: 110%;*/
	width			: 100%;
	vertical-align	: middle;
	transition		: all 0.6s;
}
.spread .card .card_image img:hover {
	transform	: scale(1.2);
}

.card .card_name {
	color		: var(--dark);
	font		: bold 2rem Merriweather, serif;
	margin		: 0 0 1.2rem;
	text-align	: center;
	text-transform	: uppercase;
}

/* Card name transition */
.card .card_name i {
	opacity		: 0;
	transform	: scale(0);
	transition	: all 0.2s ease-in-out;
}
.card .card_name:hover i {
	opacity		: 1;
	transform	: scale(1);
}

.ghost {
	visibility	: hidden;
}

/*** Style libraries ***/
/*** =============== ***/

.style_thumb {
	position	: relative;
	width		: 31.333%;
}

.style_thumb a {
	text-decoration	: none;
}

.style_thumb .style_image {
	overflow	: hidden;
}

/* Style image transition */
.style_thumb .style_image img {
	width			: 101%;
	vertical-align	: middle;
	transition		: all 0.2s;
}
.style_thumb:hover .style_image img {
	transform	: scale(1.1);
}

.style_thumb .style_name {
	color		: var(--dark);
	background	: var(--paper);
	font		: italic 1.2rem Merriweather, serif;
	text-transform	: lowercase;

	position	: absolute;
	bottom		: 0;
	margin		: 0;
	padding		: 0.5rem;
}

/* Style name transition */
.style_thumb .style_name i {
	opacity		: 0;
	transform	: scale(0);
	transition	: all 0.2s ease-in-out;
}
.style_thumb:hover .style_name i {
	opacity		: 1;
	transform	: scale(1);
}

/*** Footer ***/
/*** ====== ***/

.main_footer {
	background	: var(--darker);
}

.social_footer {
	padding		: 2rem;
	margin		: 0;
	list-style	: none;
	text-align	: center;
	border-bottom	: 2px solid var(--dark);
}

.social_footer li {
	display	: inline-block;
	margin	: 0 0.5rem;
}

.social_footer a {
	background	: var(--dark);
	display		: inline-block;
	padding		: 0.5rem 1rem;
	font-size	: 1.5rem;
	-webkit-border-radius	: 0.5rem;
			border-radius	: 0.5rem;
}

.copyright {
	padding		: 1rem;
	margin		: 0;
	text-align	: center;
	text-transform	: uppercase;
}

.regular_page {
	width		: 960px;
	max-width	: 90%;
	margin		: 4rem auto 4rem;
}

.page_title {
	padding		: 1rem 0;
}

.page_title h1 {
	display		: inline;
	padding		: 1rem;
	color		: var(--dark);
	background	: var(--paper);
}

.page_title a {
	color	: var(--dark);
	text-decoration	: none;
}

.page_title a:hover {
	color		: var(--darker);
}

.regular_content {
	margin-top	: 1rem;
	padding		: 0 1rem;
	font-size	: 1.5rem;
	line-height	: 2.5rem;
}

.button {
	display		: inline-block;
	padding		: 0.5rem 1rem;
	background	: var(--accent);
	color		: var(--bright);
	text-decoration	: none;
	-webkit-border-radius	: 0.5rem;
			border-radius	: 0.5rem;
}

/* FAQ */
dt {
	color		: var(--bright);
	font-size	: 2rem;
}

dd {
	margin-bottom	: 1.5rem;
}

.regular_content .sub_title {
	color	: var(--bright);
}

/* News */
article .news_item {
	margin-top	: 2rem;
}

.news_date {
	color		: var(--accent);
	font-size	: smaller;
	text-transform	: uppercase;
	letter-spacing	: 0.2rem;
}

.news_header {
	color		: var(--bright);
	font-size	: 2rem;
	font-weight	: normal;
	margin		: 0;
}

.news_item a {
	text-decoration	: none;
}

a:hover .news_header {
	color	: var(--link);
}

a:hover .news_preview {
	color	: var(--text);
}

/* Arcanum page */
.desc_image {
	width	: 100%;
	border-radius	: 0.5rem;
}

.tag {
	display		: inline-block;
	padding		: 0 0.5rem;
	background	: var(--text);
	color		: var(--dark);
	-webkit-border-radius	: 0.5rem;
			border-radius	: 0.5rem;
}

#intro,
.main_header,
.main_page,
.regular_page {
	-webkit-animation-duration	: 0.5s;
			animation-duration	: 0.5s;
	-webkit-animation-fill-mode	: both;
			animation-fill-mode	: both;
	-webkit-animation-name		: fadeInDown;
			animation-name		: fadeInDown;
}

#intro,
.main_header {
	-webkit-animation-delay	: 0.1s;
			animation-delay	: 0.1s;
}

.main_page,
.regular_page {
	-webkit-animation-delay	: 0.4s;
			animation-delay	: 0.4s;
}

@-webkit-keyframes fadeInDown {
	from {
		opacity	: 0;
		-webkit-transform	: translateY(-10px);
				transform	: translateY(-10px);
	}
	to {
		opacity	: 1;
		-webkit-transform	: translateY(0);
				transform	: translateY(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity	: 0;
		-webkit-transform	: translateY(-10px);
				transform	: translateY(-10px);
	}
	to {
		opacity	: 1;
		-webkit-transform	: translateY(0);
				transform	: translateY(0);
	}
}

/* Medium devices (tablets, laptops) */
@media only screen and (max-width: 992px) {
	#intro {
		padding		: 2rem 0;
	}
	
	#intro .title {
		font-size	: 2.5rem;
	}

	.spread .card {
		width	: 48%;
	}

	.style_thumb {
		width	: 50%;
	}
}

/* Small devices (large phones) */
@media only screen and (max-width: 768px) {
	.main_header {
		padding	: 1.5rem;
	}

	.social_footer {
		padding	: 1.5rem;
	}

	#intro .title {
		font-size: 2rem;
	}

	.card .card_name {
		font-size	: 1.5rem;
		margin		: 0 0 0.5rem;
	}
}

/* Extra-small devices (phones) */
@media only screen and (max-width: 600px) {
	.main_header {
		padding		: 1rem;
		box-shadow	: none;
	}

	.main_header .logo {
		font-size	: 1.5rem;
	}

	#intro {
		display: none;
	}

	.spread .card {
		width	: 98%;
		margin	: 0 1% 2% 1%;
	}

	.social_footer {
		padding			: 1rem;
	}
	
	.social_footer li {
		margin	: 0 0.2rem;
	}
	
	.social_footer a {
		padding		: 0.4rem 0.8rem;
		font-size	: 1rem;
	}

	.copyright {
		padding	: 0.8rem;
	}

	.regular_page {
		max-width	: 100%;
		margin		: 1rem auto;
	}
	
	.regular_content {
		margin-top	: 1rem;
		padding		: 0 1rem;
		font-size	: 1.2rem;
		line-height	: 2rem;
	}
	
	dt {
		font-weight	: bold;
		font-size	: 1.5rem;
	}
	
	dd {
		margin-bottom	: 1.5rem;
	}

	blockquote {
		padding-left: 1rem;
	}

	article .news_item {
		margin-top	: 1.5rem;
	}

	.news_header {
		font-size	: 1.5rem;
	}

	/* No card, just images */
	.spread {
		padding	: 0;
	}
	
	.spread .card {	
		background		: none;
		border-radius	: 0;

		width	: 100%;
		height	: 100vw;
		margin	: 0;
		overflow:hidden;
	}
	
	.spread .card .card_image {
		margin			: 0;
		border			: none;
		border-radius	: 0;
	}
	
	.card .card_name {
		position	: absolute;
		top			: 0;
		margin		: 0;
		padding		: 0.5rem;
		background	: var(--paper);
	}

	.card .card_name i {
		opacity		: 1;
		transform	: none;
		transition	: none;
	}

	.ghost {
		display	: none;
	}

	.wrapper {
		max-width	: 100%;
	}

	.style_thumb {
		width	: 100%;
	}

	.style_thumb .style_image img {
		width		: 100%;
		transition	: none;
	}

	.style_thumb:hover .style_image img {
		transform	: none;
	}

	.style_thumb .style_name i {
		opacity		: 1;
		transform	: none;
		transition	: none;
	}
}

/* Do we really need this? */
@media only screen and (max-width: 320px) {

}