/*
Theme Name: Animation+
Theme URI: http://news.animationplus.com
Description: Custom Theme for Animation+
Version: 1.0.0
Author: Pangea
Author URI: https://pangea.one
License: UNLICENSED
License URI:
Requires at least: 6.9
Requires PHP: 8.2
Tested up to: 6.9
*/

@import "./styles/main-site.css";
@import "./styles/animation-plus-brand-assets.css";
@import "./styles/header.css";
@import "./styles/mobile-nav.css";
@import "./styles/nav-filter.css";
@import "./styles/index.css";
@import "./styles/singular.css";
@import "./styles/share-bar.css";
@import "./styles/post-nav.css";
@import "./styles/site-footer.css";

:root {
	--bg-body: #000201;
	--bg-body-muted: #060c08;
	--bg-card: #111;
	--border-color: #222;
	--accent-cyan: #73fef6;
	--accent-green: #00e676;
	--accent-yellow: #fbf169;
	--text-main: #fff;
	--text-muted: #888;
	--font-headings: "Cabin Sketch", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-main: Helvetica, "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-script: "Nothing You Could Do", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--max-width: 1200px;
	--header-height: 80px;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg-body);
	background-attachment: scroll;
	background-image: url('./assets/bgrepeat.png');
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 100vw 66.45454vw;
	color: var(--text-main);
	font-family: var(--font-main);
	font-weight: 400;
	line-height: 1.6;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.bg-lights-wrapper {
	position: relative;
}

@keyframes bg-lights-anim {
	0% { opacity: 0; }
	30% { opacity: 0.125; }
	60% { opacity: 0.675; }
	90% { opacity: 0.125; }
	100% { opacity: 0; }
}
.bg-lights {
	animation: bg-lights-anim 8s infinite;
	background: transparent;
	background-attachment: scroll;
	background-image: url('./assets/bgrepeat-lights.png');
	background-position: top center;
	background-repeat: repeat-y;
	background-size: 100vw 66.45454vw;
	opacity: 0.2;
	pointer-events: none;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.junk-wrapper {
	position: relative;
}

.junk-gradient {
	background: linear-gradient(to top, rgba(2, 252, 255, 0.2) 0%, transparent 100%);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
}

.junk {
	aspect-ratio: 480 / 179;
	background: transparent;
	background-attachment: scroll;
	background-image: url('./assets/junk-home.webp');
	background-position: center center;
	background-repeat: repeat-y;
	background-size: contain;
	position: relative;
	z-index: 100;
}

main {
	padding: 0 0 120px 0;
	position: relative;
}

main .main-gradient-top {
	/*background: linear-gradient(to bottom, #02fcff33, transparent);*/
	position: absolute;
	height: 372px;
	pointer-events: none;
	top: 0;
	width: 100%;
	z-index: -1;
}

main .main-gradient-bottom {
	/*background: linear-gradient(to top, #fbf16933, transparent);*/
	bottom: 0;
	position: absolute;
	height: 372px;
	pointer-events: none;
	width: 100%;
	z-index: -1;
}

svg.icon {
	display: inline-block;
	height: calc(1em + 4px);
	vertical-align: text-top;
	width: calc(1em + 4px);
}

.nowrap {
	white-space: nowrap;
}

main.site-main {
	padding-top: 60px;
}

/*--- Headings ---*/

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings);
}

/*--- Default Link Styles ---*/

a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms ease;
}

a:hover {
	color: var(--accent-green);
}

/*--- Layout Utilities ---*/

.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 32px;
}