/*--------------------------------------------------*/
/*	ROUNDED THEME
/*--------------------------------------------------*/

header nav {
	border-radius: 5px;
}

/*--------------------------------------------------*/
/*	OVERRIDE
/*--------------------------------------------------*/

/* prevent x scroll when menu is open */
html {
	overflow: hidden;
}

body:has(> header) {
	padding-top: 50px !important;

	width: calc(100% + var(--menu-width));
}

header > #webpage {
	min-height: calc(100vh - 5px) !important;
}

header > .action:nth-child(n+3) {
	float: right;
	font-weight: bold;
	padding: 5px 25px;
}

header > .action:nth-child(n+3):hover:before,
header > .action:nth-child(n+3):focus:before {
	z-index: -1;
	content: " ";
	position: absolute;
	top: 0;
	left: -60px;

	width: 60px;
	height: 50px;
}

/*--------------------------------------------------*/
/*	HEADER BAR
/*--------------------------------------------------*/

header {
	/* needed for account tooltip */
	overflow: visible;
	background: var(--background);

	display: -webkit-inline-block;
	display: -moz-inline-block;
	display: -ms-inline-block;
	display: -o-inline-block;
	display: inline-block;

	min-width: 100vw;
	width: 100vw;
	height: 50px;

	margin: 0;
	padding: 0;

	z-index: 333;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;

	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	    -ms-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

header > * {
	display: inline-block;
	max-height: 50px;
}

header .menu-anchor,
header .brand {
	/* https://codepen.io/sosuke/pen/Pjoqqp */
	filter:
		invert(88%)
		sepia(98%)
		saturate(7%)
		hue-rotate(136deg)
		brightness(103%)
		contrast(103%);

	position: absolute;
	top: 0;
	left: 0;

	padding: 8px !important;
}

/*--------------------------------------------------*/
/*	HAMBURGER
/*--------------------------------------------------*/

header .menu-anchor img {
	content: url("/content/svg/header/menu");
}

.menu-open header .menu-anchor img {
	content: url("/content/svg/header/cross");
}

/*--------------------------------------------------*/
/*	BRANDING
/*--------------------------------------------------*/

header .brand {
	/* 128x512 */
	content: url("/content/svg/genome36");
	left: 50px;

	width: auto;
}

/*--------------------------------------------------*/
/*	HEADER ACTIONS
/*--------------------------------------------------*/

header .action {
	cursor: pointer;
	display: inline-flex;

	height: 50px;
	line-height: 40px;

	padding: 5px 10px;
}

header .action:hover,
header .action:focus,
header .action:active {
	color: #FFFFFF;
	background-color: #00000080;
}

/* -------------------------------------------------- */
/* SIDE PANEL
/* -------------------------------------------------- */

header nav * {
	color: #FFFFFF;
	text-align: left;
	text-transform: capitalize;
}

header nav {
	position: absolute;
	top: 65px;
	left: calc(-1 * var(--menu-width));

	width: calc(var(--menu-width) - 15px);
	min-height: calc(100vh - 80px);

	background-color: #2F363E;
	overflow: hidden;

	list-style: none;
	text-align: left;

	-webkit-transition: left 0.3s ease;
	   -moz-transition: left 0.3s ease;
	    -ms-transition: left 0.3s ease;
	     -o-transition: left 0.3s ease;
	        transition: left 0.3s ease;

/*
	border: 1px solid #40404020;
*/
	-webkit-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
       -moz-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
        -ms-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
         -o-box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
            box-shadow: 9px 9px 10px #40404010, 0px 0px 5px 1px #40404020;
}

header ul.menu,
header ul.menu h4,
header ul.menu li.page,
header ul.menu li.page a {
	width: 100%;
	color: #FFFFFF;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

header ul.menu li.page,
header ul.menu li.page a {
	height: 48px;
	line-height: 48px;
}

header ul.menu li.page a {
	padding: 0 12px 0 48px;
}

header ul.menu.bottom li.page,
header ul.menu.bottom li.page a,
header ul.menu.top li.page.sub,
header ul.menu.top li.page.sub a {
	height: 24px;
	line-height: 24px;
}

header ul.menu.top {
	padding-top: 150px;
}

header ul.menu.top li.page.sub a {
	padding: 0 12px 0 64px;
}

/* dynamic menu */
header ul.menu.bottom {
	padding-top: 50px;
}

header ul.menu.empty {
	display: none;
}

header ul.menu.bottom h4 {
	padding: 0 12px;
}

header ul.menu.bottom li.page a {
	padding: 0 24px;
}

header ul.menu li.page:hover a,
header ul.menu li.page:focus a,
header ul.menu li.page.active a {
	-webkit-background: linear-gradient(60deg, #00000080 49px, #00000060 50px, #00000060 80px, #00000020 81px);
	   -moz-background: linear-gradient(60deg, #00000080 49px, #00000060 50px, #00000060 80px, #00000020 81px);
	    -ms-background: linear-gradient(60deg, #00000080 49px, #00000060 50px, #00000060 80px, #00000020 81px);
	     -o-background: linear-gradient(60deg, #00000080 49px, #00000060 50px, #00000060 80px, #00000020 81px);
	        background: linear-gradient(60deg, #00000080 49px, #00000060 50px, #00000060 80px, #00000020 81px);
}

/* -------------------------------------------------- */
/* RESPONSIVE
/* -------------------------------------------------- */

/* Mobile */
@media screen and (max-width: 920px) {
	body:has(> header) {
		left: calc(-1 * var(--menu-width));
	}

	body:has(> header) section,
	body:has(> header) footer {
		padding: 15px 15px 15px calc(var(--menu-width) + 15px) !important;
	}

	.menu-open body:has(> header) {
		left: 0;
	}

	.menu-open header nav {
		left: 15px;
	}

	/* sidepanel action */
	body,
	header nav {
		-webkit-transition: left .25s ease;
		   -moz-transition: left .25s ease;
		    -ms-transition: left .25s ease;
		     -o-transition: left .25s ease;
		        transition: left .25s ease;
	}
}

/* Desktop */
@media screen and (min-width: 920px) {
	body:has(> header) {
		left: calc(-1 * var(--menu-width) / 2);
	}

	body:has(> header) section,
	body:has(> header) footer {
		padding: 15px calc(50% - 445px) 15px calc(50% - 445px + var(--menu-width)) !important;
	}

	header nav {
		left: 15px;
	}

	header .menu-anchor {
		display: none;
	}
}

/* -------------------------------------------------- */
/*	ICONS
/* -------------------------------------------------- */

header ul.menu li.page[nav-cat]:after {
	font-family: Material-Design-Iconic-Font;

	position: absolute;
	top: 0;
	left: 0;

	width: 48px;
	height: 48px;

	padding: 12px;
	line-height: 24px;
	font-size: 24px;
	text-align: center;
}

/* home */
header ul.menu li.page[nav-cat="1"]:after {
	content: "\f175";
}

/* about */
header ul.menu li.page[nav-cat="2"]:after {
	content: "\f203";
}

/* blog */
header ul.menu li.page[nav-cat="3"]:after {
	content: "\f266";
}

/* -------------------------------------------------- */
/*	COLOURS
/* -------------------------------------------------- */

/*--- BLACK ---*/
body[theme="black"] header {
	background: -webkit-linear-gradient(60deg, var(--color-black) 230px, var(--color-black-light) 231px, var(--color-black-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-black) 230px, var(--color-black-light) 231px, var(--color-black-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-black) 230px, var(--color-black-light) 231px, var(--color-black-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-black) 230px, var(--color-black-light) 231px, var(--color-black-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-black) 230px, var(--color-black-light) 231px, var(--color-black-light) 249px, var(--background) 250px);
}

body[theme^="black"] header > .action:nth-child(n+3) {
	color: var(--color-black);
}

body[theme^="black"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-black);
}

body[theme^="black"] header > .action:nth-child(n+3):hover:before,
body[theme^="black"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-black) 30px, var(--color-black-light) 31px, var(--color-black-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-black) 30px, var(--color-black-light) 31px, var(--color-black-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-black) 30px, var(--color-black-light) 31px, var(--color-black-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-black) 30px, var(--color-black-light) 31px, var(--color-black-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-black) 30px, var(--color-black-light) 31px, var(--color-black-light) 49px, #00000000 50px);
}

body[theme="black invert"] header .menu-anchor,
body[theme="black invert"] header .brand {
	filter:
		invert(10%)
		sepia(5%)
		saturate(71%)
		hue-rotate(314deg)
		brightness(83%)
		contrast(83%);
}

/*--- GRAY ---*/
body[theme="gray"] header {
	background: -webkit-linear-gradient(60deg, var(--color-gray) 230px, var(--color-gray-light) 231px, var(--color-gray-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-gray) 230px, var(--color-gray-light) 231px, var(--color-gray-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-gray) 230px, var(--color-gray-light) 231px, var(--color-gray-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-gray) 230px, var(--color-gray-light) 231px, var(--color-gray-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-gray) 230px, var(--color-gray-light) 231px, var(--color-gray-light) 249px, var(--background) 250px);
}

body[theme^="gray"] header > .action:nth-child(n+3) {
	color: var(--color-gray);
}

body[theme^="gray"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-gray);
}

body[theme^="gray"] header > .action:nth-child(n+3):hover:before,
body[theme^="gray"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-gray) 30px, var(--color-gray-light) 31px, var(--color-gray-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-gray) 30px, var(--color-gray-light) 31px, var(--color-gray-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-gray) 30px, var(--color-gray-light) 31px, var(--color-gray-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-gray) 30px, var(--color-gray-light) 31px, var(--color-gray-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-gray) 30px, var(--color-gray-light) 31px, var(--color-gray-light) 49px, #00000000 50px);
}

body[theme="gray invert"] header .menu-anchor,
body[theme="gray invert"] header .brand {
	filter:
		invert(81%)
		sepia(0%)
		saturate(13%)
		hue-rotate(198deg)
		brightness(90%)
		contrast(86%);
}

/*--- ORANGE ---*/
body[theme="orange"] header {
	background: -webkit-linear-gradient(60deg, var(--color-orange) 230px, var(--color-orange-light) 231px, var(--color-orange-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-orange) 230px, var(--color-orange-light) 231px, var(--color-orange-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-orange) 230px, var(--color-orange-light) 231px, var(--color-orange-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-orange) 230px, var(--color-orange-light) 231px, var(--color-orange-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-orange) 230px, var(--color-orange-light) 231px, var(--color-orange-light) 249px, var(--background) 250px);
}

body[theme^="orange"] header > .action:nth-child(n+3) {
	color: var(--color-orange);
}

body[theme^="orange"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-orange);
}

body[theme^="orange"] header > .action:nth-child(n+3):hover:before,
body[theme^="orange"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-orange) 30px, var(--color-orange-light) 31px, var(--color-orange-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-orange) 30px, var(--color-orange-light) 31px, var(--color-orange-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-orange) 30px, var(--color-orange-light) 31px, var(--color-orange-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-orange) 30px, var(--color-orange-light) 31px, var(--color-orange-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-orange) 30px, var(--color-orange-light) 31px, var(--color-orange-light) 49px, #00000000 50px);
}

body[theme="orange invert"] header .menu-anchor,
body[theme="orange invert"] header .brand {
	filter:
		invert(86%)
		sepia(20%)
		saturate(6905%)
		hue-rotate(333deg)
		brightness(109%)
		contrast(103%);
}

/*--- BLUE ---*/
body[theme="blue"] header {
	background: -webkit-linear-gradient(60deg, var(--color-blue) 230px, var(--color-blue-light) 231px, var(--color-blue-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-blue) 230px, var(--color-blue-light) 231px, var(--color-blue-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-blue) 230px, var(--color-blue-light) 231px, var(--color-blue-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-blue) 230px, var(--color-blue-light) 231px, var(--color-blue-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-blue) 230px, var(--color-blue-light) 231px, var(--color-blue-light) 249px, var(--background) 250px);
}

body[theme^="blue"] header > .action:nth-child(n+3) {
	color: var(--color-blue);
}

body[theme^="blue"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-blue);
}

body[theme^="blue"] header > .action:nth-child(n+3):hover:before,
body[theme^="blue"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-blue) 30px, var(--color-blue-light) 31px, var(--color-blue-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-blue) 30px, var(--color-blue-light) 31px, var(--color-blue-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-blue) 30px, var(--color-blue-light) 31px, var(--color-blue-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-blue) 30px, var(--color-blue-light) 31px, var(--color-blue-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-blue) 30px, var(--color-blue-light) 31px, var(--color-blue-light) 49px, #00000000 50px);
}

body[theme="blue invert"] header .menu-anchor,
body[theme="blue invert"] header .brand {
	filter:
		invert(46%)
		sepia(33%)
		saturate(2122%)
		hue-rotate(180deg)
		brightness(91%)
		contrast(97%);
}

/*--- CYAN ---*/
body[theme="cyan"] header {
	background: -webkit-linear-gradient(60deg, var(--color-cyan) 230px, var(--color-cyan-light) 231px, var(--color-cyan-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-cyan) 230px, var(--color-cyan-light) 231px, var(--color-cyan-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-cyan) 230px, var(--color-cyan-light) 231px, var(--color-cyan-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-cyan) 230px, var(--color-cyan-light) 231px, var(--color-cyan-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-cyan) 230px, var(--color-cyan-light) 231px, var(--color-cyan-light) 249px, var(--background) 250px);
}

body[theme^="cyan"] header > .action:nth-child(n+3) {
	color: var(--color-cyan);
}

body[theme^="cyan"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-cyan);
}

body[theme^="cyan"] header > .action:nth-child(n+3):hover:before,
body[theme^="cyan"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-cyan) 30px, var(--color-cyan-light) 31px, var(--color-cyan-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-cyan) 30px, var(--color-cyan-light) 31px, var(--color-cyan-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-cyan) 30px, var(--color-cyan-light) 31px, var(--color-cyan-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-cyan) 30px, var(--color-cyan-light) 31px, var(--color-cyan-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-cyan) 30px, var(--color-cyan-light) 31px, var(--color-cyan-light) 49px, #00000000 50px);
}

body[theme="cyan invert"] header .menu-anchor,
body[theme="cyan invert"] header .brand {
	filter:
		invert(70%)
		sepia(12%)
		saturate(6526%)
		hue-rotate(141deg)
		brightness(103%)
		contrast(107%);
}

/*--- RED ---*/
body:not([theme]) header,
body[theme="red"] header {
	background: -webkit-linear-gradient(60deg, var(--color-accent) 230px, #FF6973 231px, #FF6973 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-accent) 230px, #FF6973 231px, #FF6973 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-accent) 230px, #FF6973 231px, #FF6973 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-accent) 230px, #FF6973 231px, #FF6973 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-accent) 230px, #FF6973 231px, #FF6973 249px, var(--background) 250px);
}

header > .action:nth-child(n+3),
body[theme^="red"] header > .action:nth-child(n+3) {
	color: var(--color-accent);
}

header > .action:nth-child(n+3):hover,
body[theme^="red"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-accent);
}

header > .action:nth-child(n+3):hover:before,
header > .action:nth-child(n+3):focus:before,
body[theme^="red"] header > .action:nth-child(n+3):hover:before,
body[theme^="red"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-accent) 30px, #FF6973 31px, #FF6973 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-accent) 30px, #FF6973 31px, #FF6973 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-accent) 30px, #FF6973 31px, #FF6973 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-accent) 30px, #FF6973 31px, #FF6973 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-accent) 30px, #FF6973 31px, #FF6973 49px, #00000000 50px);
}

body[theme="red invert"] header .menu-anchor,
body[theme="red invert"] header .brand {
	filter:
		invert(50%)
		sepia(82%)
		saturate(3401%)
		hue-rotate(326deg)
		brightness(106%)
		contrast(103%);
}

/*--- GREEN ---*/
body[theme="green"] header {
	background: -webkit-linear-gradient(60deg, var(--color-green) 230px, var(--color-green-light) 231px, var(--color-green-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-green) 230px, var(--color-green-light) 231px, var(--color-green-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-green) 230px, var(--color-green-light) 231px, var(--color-green-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-green) 230px, var(--color-green-light) 231px, var(--color-green-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-green) 230px, var(--color-green-light) 231px, var(--color-green-light) 249px, var(--background) 250px);
}

body[theme^="green"] header > .action:nth-child(n+3) {
	color: var(--color-green);
}

body[theme=^"green"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-green);
}

body[theme^="green"] header > .action:nth-child(n+3):hover:before,
body[theme^="green"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-green) 30px, var(--color-green-light) 31px, var(--color-green-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-green) 30px, var(--color-green-light) 31px, var(--color-green-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-green) 30px, var(--color-green-light) 31px, var(--color-green-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-green) 30px, var(--color-green-light) 31px, var(--color-green-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-green) 30px, var(--color-green-light) 31px, var(--color-green-light) 49px, #00000000 50px);
}

body[theme="green invert"] header .menu-anchor,
body[theme="green invert"] header .brand {
	filter:
		invert(91%)
		sepia(22%)
		saturate(4603%)
		hue-rotate(102deg)
		brightness(101%)
		contrast(70%);
}

/*--- PURPLE ---*/
body[theme="purple"] header {
	background: -webkit-linear-gradient(60deg, var(--color-purple) 230px, var(--color-purple-light) 231px, var(--color-purple-light) 249px, var(--background) 250px);
	background:    -moz-linear-gradient(60deg, var(--color-purple) 230px, var(--color-purple-light) 231px, var(--color-purple-light) 249px, var(--background) 250px);
	background:     -ms-linear-gradient(60deg, var(--color-purple) 230px, var(--color-purple-light) 231px, var(--color-purple-light) 249px, var(--background) 250px);
	background:      -o-linear-gradient(60deg, var(--color-purple) 230px, var(--color-purple-light) 231px, var(--color-purple-light) 249px, var(--background) 250px);
	background:         linear-gradient(60deg, var(--color-purple) 230px, var(--color-purple-light) 231px, var(--color-purple-light) 249px, var(--background) 250px);
}

body[theme^="purple"] header > .action:nth-child(n+3) {
	color: var(--color-purple);
}

body[theme^="purple"] header > .action:nth-child(n+3):hover {
	color: var(--background);
	background: var(--color-purple);
}

body[theme^="purple"] header > .action:nth-child(n+3):hover:before,
body[theme^="purple"] header > .action:nth-child(n+3):focus:before {
	background: -webkit-linear-gradient(240deg, var(--color-purple) 30px, var(--color-purple-light) 31px, var(--color-purple-light) 49px, #00000000 50px);
	background:    -moz-linear-gradient(240deg, var(--color-purple) 30px, var(--color-purple-light) 31px, var(--color-purple-light) 49px, #00000000 50px);
	background:     -ms-linear-gradient(240deg, var(--color-purple) 30px, var(--color-purple-light) 31px, var(--color-purple-light) 49px, #00000000 50px);
	background:      -o-linear-gradient(240deg, var(--color-purple) 30px, var(--color-purple-light) 31px, var(--color-purple-light) 49px, #00000000 50px);
	background:         linear-gradient(240deg, var(--color-purple) 30px, var(--color-purple-light) 31px, var(--color-purple-light) 49px, #00000000 50px);
}

body[theme="purple invert"] header .menu-anchor,
body[theme="purple invert"] header .brand {
	filter:
		invert(44%)
		sepia(11%)
		saturate(2757%)
		hue-rotate(238deg)
		brightness(93%)
		contrast(90%);
}