@charset "utf-8";

/*! Fonts */
@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix-Light.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix-Light.woff') format('woff'),
		url('/fonts/Hellix-Light.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 300;
}

@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix-Regular.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix-Regular.woff') format('woff'),
		url('/fonts/Hellix-Regular.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 400;
}

@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix-Medium.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix-Medium.woff') format('woff'),
		url('/fonts/Hellix-Medium.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 500;
}

@font-face
{
	font-family: 'Hellix';
	src:
		url('/fonts/Hellix-Bold.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Hellix-Bold.woff') format('woff'),
		url('/fonts/Hellix-Bold.woff2') format('woff2');
	font-display: fallback;
	font-style: normal;
	font-weight: 700;
}

@font-face
{
	font-family: "NotoSans";
	src:
		url('/fonts/NotoSans/NotoSansCJKjp-Light-subset.eot?#iefix') format('embedded-opentype'),
		url('/fonts/NotoSans/NotoSansCJKjp-Light-subset.woff') format('woff');
	font-display: fallback;
	font-style: normal;
	font-weight: 200;
}

@font-face
{
	font-family: "NotoSans";
	src:
		url('/fonts/NotoSans/NotoSansCJKjp-Bold-subset.eot?#iefix') format('embedded-opentype'),
		url('/fonts/NotoSans/NotoSansCJKjp-Bold-subset.woff') format('woff');
	font-display: fallback;
	font-style: normal;
	font-weight: 600;
}

@font-face
{
	font-family: "NotoSans";
	src:
		url('/fonts/NotoSans/NotoSansCJKjp-Black-subset.eot?#iefix') format('embedded-opentype'),
		url('/fonts/NotoSans/NotoSansCJKjp-Black-subset.woff') format('woff');
	font-display: fallback;
	font-style: normal;
	font-weight: 800;
}

/*! Colors */
:root
{
	--foreground: #ffffff;
	--midforeground: #b2b2b2;
	--midground: #888888;
	--background: #080f24;
	--deepbackground: #060b1b;
	--red: #ea3329;
	--orange: #eb6a2c;
	--yellow: #f29c38;
	--lightyellow: #ffd321;
	--green: #75fb4c;
	--cyan: #00f0ff;
	--blue: #0C8CFE;
	--darkblue: #003b6e;
	--purple: #e532ad;
	--deeppurple: #970056;
	--darkpurple: #2b0c5c;
	--lightpurple: #3d147f;
	--brightpurple: #8400ff;
	--pink: #ff034a;
}

@supports (color: color(display-p3 1 1 1 / 1)) {
	:root
	{
		--foreground: color(display-p3 1.00 1.00 1.00 / 1.00);
		--midforeground: color(display-p3 0.70 0.70 0.70 / 1.00);
		--midground: color(display-p3 0.53 0.53 0.53 / 1.00);
		--background: color(display-p3 0.04 0.08 0.19 / 1.00);
		--deepbackground: color(display-p3 0.04 0.06 0.14 / 1.00);
		--red: color(display-p3 0.92 0.20 0.16 / 1.00);
		--orange: color(display-p3 0.93 0.42 0.17 / 1.00);
		--yellow: color(display-p3 0.94 0.60 0.22 / 1.00);
		--lightyellow: color(display-p3 1.00 0.83 0.13 / 1.00);
		--green: color(display-p3 0.46 0.98 0.30 / 1.00);
		--cyan: color(display-p3 0 0.95 1 / 1.00);
		--blue: color(display-p3 0.05 0.55 1.00 / 1.00);
		--darkblue:color(display-p3 0 0.24 0.43 / 1.00);
		--purple: color(display-p3 0.85 0.18 0.65 / 1.00);
		--highlight: color(display-p3 0.93 0.15 0.57 / 1.00);
		--deeppurple: color(display-p3 0.59 0.00 0.34 / 1.00);
		--darkpurple: color(display-p3 0.17 0.05 0.36 / 1.00);
		--lightpurple: color(display-p3 0.24 0.08 0.50 / 1.00);
		--brightpurple: color(display-p3 0.47 0 1 / 1);
		--pink: color(display-p3 1 .012 .29 / 1);
	}
}

*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

header,footer,nav,main,section,figure,article,aside
{
	display: block;
}

html
{
	font-size: 3.2px;
	margin: 0;
	padding: 0;
}

body
{
	font-size: 2.6rem;
	line-height: 1.2;
	margin: 0;
	padding: 0 0 12rem 0;
	font-family: "Hellix", Helvetica, sans-serif;
	font-weight: 400;
	background-color: var(--background);
	color: var(--foreground);
	background-image: linear-gradient(90deg, var(--background) 18rem, var(--deepbackground) 18rem, var(--deepbackground) 100%);
}

a
{
	color: inherit;
}

header,
.release-header,
.notes,
.notes h2
{
	display: grid;
	grid-gap: 4rem;
	grid-template-columns: 18rem 1fr;
	margin: 0;
}

header
{
	margin: 2rem auto;
	position: relative;
}

header.all-releases::before
{
	background-image: url(images/nova-app-icon.png);

}

header::before
{
	display: block;
	width: 12rem;
	height: 12rem;
	content: "";
	background-image: url(images/notes-present.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
	grid-row: 1;
	place-self: center;
}

header h1
{
	letter-spacing: -0.0275em;
	font-size: 3em;
	margin: 0;
	line-height: 1;
	position: relative;
	display: inline-block;
	font-weight: 700;
	white-space: nowrap;
	grid-row: 1;
	align-self: center;
}

hr
{
	grid-column: 1 / span 2;
	width: 100%;
	border: 0;
	border-bottom: 0.1rem solid rgba(125,125,255,0.35);
	margin: 0;
}

header hr
{
	grid-row: 2;
}

h2.version
{
	grid-column: 1 / span 1;
	margin: 0;
	font-size: 1em;
	line-height: 1;
	font-weight: 200;
	letter-spacing: 0.125em;
	text-transform: lowercase;
	text-align: center;
}

h2.version span.version-number
{
	display: block;
	margin: 0;
	color: var(--highlight);
	font-weight: 900;
	font-size: 3.2em;
	line-height: 0.75em;
}

header h2.version,
header h3.version-date,
header .version-summary
{
	grid-row: 3;
}

.hidden {
	display: none;
}

.version-summary
{
	grid-column: 2 / span 1;
	font-weight: 700;
	line-height: 0.9;
	margin: 0;
	letter-spacing: -0.015em;
	align-self: center;
}

.version-summary h3.version-date
{
	font-size: inherit;
	line-height: inherit;
	font-weight: 700;
}

.version-summary h3.version-date:after
{
	content: ".";
	position: relative;
	left: -0.15em;
	padding-right: 0.15em;
}

.version-summary h3.version-date,
.version-summary h3.version-date+div.version-description
{
	display: inline;
	line-height: 1.3em;
}

.version-summary .version-description
{
	color: var(--midforeground);
	font-weight: 400;
}

.feature,
.notes h2
{
	grid-column: 1 / span 2;
	display: grid;
	grid-template-columns: 20rem 22.5rem 1fr;
	grid-gap: 2rem;
}

.feature
{
	margin: 4rem auto;
}

.feature::before,
.notes h2::before
{
	grid-column: 1 / span 1;
	display: block;
	content: "";
	margin-right: 2rem;
	width: 8rem;
	height: 8rem;
	place-self: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.feature-image
{
	grid-column: 2 / span 1;
	background: var(--background);
	height: 15rem;
	width: 22.5rem;
	margin: 0;
	position: relative;
	border-radius: 1em;
	place-self: center;
}

.feature-image:before
{
	width: 100%;
	height: 100%;
	display: block;
	content: "";
	box-shadow: 0 0 2rem var(--highlight);
	border-radius: 1em;
	opacity: 0.275;
}


.feature-image img,
.feature-image video
{
	border-radius: 1em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.feature-summary
{
	grid-column: 3 / span 1;
	align-self: center;
}

.feature-name
{
	font-size: inherit;
	text-align: left;
	margin: 0;
	color: var(--highlight);
	font-weight: 700;
	line-height: 1.5em;
}

.notes h2
{
	grid-template-columns: 20rem 1fr;
	line-height: 8rem;
	color: var(--highlight);
}

code
{
	background: rgba(0,255,255,0.05);
	border: 1px solid rgba(225,255,255,0.15);
	border-radius: 0.0875em;
	padding: 0 0.125em
}

h2.new::before
{
	background-image: url(images/notes-new-feature.png);
}

h2.improved::before
{
	background-image: url(images/notes-improved.png);
}

h2.fixed::before
{
	background-image: url(images/notes-bug-fix.png);
}

.notes
{
	margin: 4rem auto;
}

.notes ul,
.notes .footnote
{
	grid-column: 2 / span 1;
}

.notes li
{
	margin-bottom: 0.5em;
}

.notes h2+ul,
.notes ul+h2
{
	margin-top: -3rem;
}

.notes .footnote {
	border-top: 0.1rem solid rgba(125,125,255,0.35);
	padding-top: 3rem;
}

.release
{
	margin: 4rem auto;
	padding-right: 4rem;
	max-width: 110rem;
	margin-left: 0;
}

.related-releases > * {
	padding-top: 6rem;
	border-top: 0.1rem solid rgba(125,125,255,0.35);
}

header.all-releases
{
	margin-top: 4em;
}

nav.top
{
	position: fixed;
	width: 100vw;
	max-width: 100vw;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	transition-property: background-color;
	transition-timing-function: ease-in-out;
	transition-duration: 450ms;
}

nav.top a
{
	text-decoration: none;
}

/* Rainbow divider after navbar */
nav.top:after
{
	position: relative;
	content: "";
	width: 100%;
	height: 0.1em;
	display: block;
	background-image: -webkit-linear-gradient(0deg, var(--yellow), var(--red), var(--pink), var(--purple), var(--blue));
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 450ms;
}

nav.top.scrolled
{
	background-color: #080f24;
}

nav.top.scrolled:after
{
	opacity: 1;
}

body.reduce-motion nav.top,
body.reduce-motion nav.top:after
 {
	 transition-property: none;
 }

@media screen and (prefers-reduced-motion)
{
	nav.top,
	nav.top:after
	{
		transition-property: none;
	}
}

nav.top ul
{
	display: flex;
	justify-content: space-between;
	align-content: center;
	list-style: none;
	padding: 0.5em 0em;
	margin: 0;
}

nav.top li
{
	margin: 0 0.15em;
	padding: 0;
	align-self: center;
	cursor: pointer;
}

nav.top li a
{
	display: block;
	position: relative;
	z-index: 10;
	color: var(--midground);
	font-size: 0.6em;
	letter-spacing: -0.035em;
	padding: 0.375em 0.5em 0.5em 1.75em;
	line-height: 1;
	background-repeat: no-repeat;
	background-size: 1em;
	background-position: 0.5em 50%;
	border-radius: 1em;
}

nav.top li#help a { background-image: url("./images/top-nav-help.svg"); }
nav.top li#extensions a { background-image: url("./images/top-nav-extensions.svg"); }
nav.top li#future a { background-image: url("./images/top-nav-future.svg"); }
nav.top li#about a { background-image: url("./images/top-nav-future.svg"); }
nav.top li#api a { background-image: url("./images/top-nav-api.svg"); }

nav.top li#api {margin-left: -0.25em;}

nav.top li#buy a
{
	color: var(--background);
	background-color: var(--green);
	background-image: url("./images/top-nav-buy.svg");
}

nav.top li#download
{
	position: absolute;
	left: 0.15em;
}

#home nav.top li#download
{
	opacity: 0;
	pointer-events: none;
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 450ms;
	z-index: -1;
	visibility: hidden;
}

#home nav.top.scrolled li#download
{
	opacity: 1;
	pointer-events: all;
	z-index: unset;
	visibility: visible;
}

nav.top li#download a,
body#notfound main a
{
	color: var(--foreground);
	background-color: var(--blue);
	font-weight: 700;
	padding: 0.325em 0.75em 0.5em 0.75em;
}

nav.top li#download a:hover
{
	text-decoration: none;
}


nav.top li a:hover
{
	text-decoration: underline;
}

/* Start auto-resizing */
html { font-size: 1vw; }
body { font-size: 2.4rem; }
nav.top, nav.top.scrolled { font-size: 1.78em; }
nav.top ul { justify-content: center; }
nav.top li#download,
nav.top.scrolled li#download { position: static; opacity: 1;}

@media screen and (min-width: 620px)
{
	nav.top ul { justify-content: flex-end; }
	nav.top li#download { position: absolute; }
	nav.top, nav.top.scrolled { font-size: 1.45em; }
	nav.top.scrolled li#download { position: absolute; }
}

/* Stop auto-resizing */
@media screen and (min-width: 1000px)
{
	html { font-size: 10px; }
}