:root {
    --bg: #101014;
    --bg-image-old: #101014 url('../img/vc_bg.png') center repeat;
    --bg-image: #101014 url('../img/metalhead.png') center repeat;
    --bg-size: cover;
    --bg-fade-one: #101014 url('../img/vc_bg.png') center repeat;
    --bg-fade-two: rgb(11, 11, 14);
    --bg-fade-one-opacity: 15%; /*92%*/
    --bg-fade-two-opacity: 60%; /*92%*/
    --text: #f1f1f1;
    --base-font-size: 23px;
    --main-font: 'Luxeon Mono', 'Lucida Console', Monaco, monospace;
    --title-font: 'Sanfrisco', 'Luxeon Mono', 'Lucida Console', Monaco, monospace;
    --header-font: 'Parc Place', 'Luxeon Mono', 'Lucida Console', Monaco, monospace;
    --tooltip: #a2afd8;
    --tooltip-text: #14052f;
	--scrollbar-thumb: #444754;
	--scrollbar-track: #000;
	--selection-bg: #7a7d85;
	--selecton-text: #000;
	--gradient-text: linear-gradient(270deg, #54aeff, #84ffdf, #c298ff, #c298ff, #db72a3, #ffe3bf);
	--gradient-text-glow: 0px 0px 8px rgba(255, 255, 255, 0.2);
}

html, body {
    font-size: var(--base-font-size);
    overflow-x: hidden;
}
body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--main-font);
	margin: 0;
}
.no-select {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.pre {
    white-space: pre;
}
span.copy {
    position: relative;
}
.btn.copy {
  vertical-align: middle;
  background: none;
  border: none;
  position: absolute;
  top: -0.3em;
  right: -1.55em;
  font-size: 16px;
  opacity: 0;
  pointer-events: auto;
  padding: 1px 5px;
  margin: 0;
  transition: 0.3s opacity, 0.3s color;
}
.links li:hover .btn.copy,
.links li:focus-within .btn.copy {
    pointer-events: auto;
    opacity: 1;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 100px;
  font-size: 1.3em;
  background-color: var(--tooltip);
  color: var(--tooltip-text);
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  font-weight: bold;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -50px;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 0 5px #000;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--tooltip) transparent transparent transparent;
}

.tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.tooltip:hover button:disabled .tooltiptext {
  visibility: hidden;
}
.btn .tooltiptext {
  text-transform: none;
}
.sg {
    font-family: 'Space Grotesk', 'Lucida Console', Monaco, monospace;
}
.bs {
    font-family: 'Binchotan Sharp', 'Lucida Console', Monaco, monospace;
}
h1, h2, h3, h4, h5 {
    font-family: var(--header-font);
    font-weight: normal;
    line-height: 1.5em;
}
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.75em; }
h5 { font-size: 1em; }
.middle {
  vertical-align: middle;
}
.inline-block { display: inline-block; }
.info-header {
	font-family: 'Anonymous Pro', 'Lucida Console', Monaco, monospace;
	color: #f1c4b2;
	transition: 0.3s;
	display: block;
	line-height:1.2em;
	padding-top: 5px;
	opacity:0;
}
.fadein {
    -webkit-animation: fadein 0.8s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 0.8s; /* Firefox < 16 */
    -ms-animation: fadein 0.8s; /* Internet Explorer */
    -o-animation: fadein 0.8s; /* Opera < 12.1 */
    animation: fadein 0.8s;
    opacity: 1;
}
.fadeout {
    -webkit-animation: fadeout 0.8s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeout 0.8s; /* Firefox < 16 */
    -ms-animation: fadeout 0.8s; /* Internet Explorer */
    -o-animation: fadeout 0.8s; /* Opera < 12.1 */
    animation: fadeout 0.8s;
    opacity: 0;
}

.fadein1 {
    -webkit-animation: fadein1 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein1 1s; /* Firefox < 16 */
    -ms-animation: fadein1 1s; /* Internet Explorer */
    -o-animation: fadein1 1s; /* Opera < 12.1 */
    animation: fadein1 1s;
    opacity: 1;
}
.fadein2 {
    -webkit-animation: fadein2 1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein2 1s; /* Firefox < 16 */
    -ms-animation: fadein2 1s; /* Internet Explorer */
    -o-animation: fadein2 1s; /* Opera < 12.1 */
    animation: fadein2 1s;
    opacity: 1;
}
#mbg {
	background: var(--bg-image);
	background-size: var(--bg-size);
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: -1;
	opacity: 0.5;
	font-size: 1rem;
	line-height: 1.5em;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
    -webkit-animation: bgfade 0.8s; 
    -moz-animation: bgfade 0.8s; 
    -ms-animation: bgfade 0.8s; 
    -o-animation: bgfade 0.8s; 
    animation: bgfade 0.8s;
}
#mbg:before {
  content: '';
  position:fixed;
  top: 0px;
  left:0px;
  height:100%;
  width:100%;
  opacity: var(--bg-fade-one-opacity);
  background: var(--bg-fade-one);
}
#mbg:after {
  content: '';
  position:fixed;
  top: 0px;
  left:0px;
  height:100%;
  width:100%;
  opacity: var(--bg-fade-two-opacity);
  background: var(--bg-fade-two);
}

main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items:center;
}
main > * {
    -webkit-animation: mainfade 0.8s; 
    -moz-animation: mainfade 0.8s; 
    -ms-animation: mainfade 0.8s; 
    -o-animation: mainfade 0.8s; 
    animation: mainfade 0.8s;
}
main > footer {
    -webkit-animation: bgfade 0.8s; 
    -moz-animation: bgfade 0.8s; 
    -ms-animation: bgfade 0.8s; 
    -o-animation: bgfade 0.8s; 
    animation: bgfade 0.8s;
}

/*mainfade*/
@keyframes mainfade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes mainfade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes mainfade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes mainfade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes mainfade {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/*bgfade*/
@keyframes bgfade {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

/* Firefox < 16 */
@-moz-keyframes bgfade {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes bgfade {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

/* Internet Explorer */
@-ms-keyframes bgfade {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

/* Opera < 12.1 */
@-o-keyframes bgfade {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}


/*fadein #1*/
@keyframes fadein1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein1 {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/*fadein #2*/
@keyframes fadein2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein2 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*fadein*/
@keyframes fadein {
    from { opacity: 0; max-height: 0px; }
    to   { opacity: 1; max-height: 100px; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; max-height: 0px; }
    to   { opacity: 1; max-height: 100px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; max-height: 0px; }
    to   { opacity: 1; max-height: 100px; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; max-height: 0px; }
    to   { opacity: 1; max-height: 100px; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; max-height: 0px; }
    to   { opacity: 1; max-height: 100px; }
}

/*fadeout*/
@keyframes fadeout {
    from { opacity: 1; font-size: 100%; }
    to   { opacity: 0; font-size: 0%; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
    from { opacity: 1; font-size: 100%; }
    to   { opacity: 0; font-size: 0%; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
    from { opacity: 1; font-size: 100%; }
    to   { opacity: 0; font-size: 0%; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
    from { opacity: 1; font-size: 100%; }
    to   { opacity: 0; font-size: 0%; }
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
    from { opacity: 1; font-size: 100%; }
    to   { opacity: 0; font-size: 0%; }
}

main img {
	max-width: 100%;
	height: auto
}
html,
body {
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
	-ms-overflow-style: -ms-autohiding-scrollbar;  /* Internet Explorer 10+ */
    scrollbar-width: thin;  /* Firefox */
}
::selection {
	background: var(--selection-bg);
	color: var(--selection-text);
	-webkit-text-fill-color: var(--selection-text);
}
::-webkit-scrollbar {
	width: 7px;
	height: 5px;
	background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb);
}
* {
	box-sizing: border-box;
}
p,
li {
	line-height: 1.3em;
}
.center {
	text-align: center;
}
.middle { vertical-align: middle; }
.sr-only { /*for anything you only want screenreaders to see*/
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}
a,
a.visited,
.expander {
    /*display:inline-block;*/
	color: #82FEDB;
	padding-bottom: 3px;
	text-decoration: none;
	transition: color 0.3s, text-shadow 0.3s, border-color 0.3s;
	cursor: pointer;
	border-bottom: 1px solid transparent;
}
.expander { padding: 5px 5px 3px 5px; }
a,
a.visited {
	border-bottom: 1px dotted #cba2f4;
}
a:hover,
a:focus,
.expander:hover,
.expander:focus {
	color: #cba2f4;
	text-shadow: 0px 0px 5px rgba(203, 162, 244, 0.6);
	border-bottom: 1px solid #82FEDB;
}
*:focus {
	outline: 0;
	box-shadow: 0 0 0 2px;
	border-radius: 5px;
}
main > section {
	margin: 0px 10px 40px 10px;
	text-align: center;
	width: 410px;
	max-width: 100%;
}
section h3 {
	margin: 0px 0px 15px 0px;
	line-height: 1.3em;
}
.name {
	font-family: var(--header-font);
	font-size: 1.25em;
	font-weight: bold;
	vertical-align: text-bottom;
}
#title {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	width: 600px;
	max-width: 100%;
	justify-content: center;
	align-items: flex-end;
	text-align: center;
	font-size: 3em;
    line-height: 1.5em;
	font-family: var(--title-font);
	padding: 25px 0px 10px 0px;
	color: rgb(209, 182, 255);
}
#info {
    padding-top: 5px;
}
#title span,
#info p span {
	background: var(--gradient-text);
	background-size: 300% 300%;
	-webkit-animation: GradTitle 6s ease infinite;
	-moz-animation: GradTitle 6s ease infinite;
	animation: GradTitle 6s ease infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: var(--gradient-text-glow);
}
.pagetitle {
	padding: 0px 10px;
}
.links {
	display: flex;
	margin: auto;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style-type: none;
	width: 700px;
	max-width: 100%;
	padding: 0px 5px;
}
.links li {
	margin: 10px 15px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
}
.links .separator {
	width: 100%;
	height: 0px;
	margin: 0;
}
.svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}
.svg-dragoncave {
  width: 0.8671875em;
  --color1: #daf;
}
.isvg-sleepy-pig {
  width: 1.455078125em;
}
.ico,
h3 {
	transition: color 0.3s;
}
.ico, .btn.copy {
	color: #daf;
}
h3 {
	color: #ffc3ab;
}
b, strong {
	color: #ff90b9;
}
i, em {
    color: #b8b3f8;
}
.block {
    display: block;
}
.m-auto {
    margin: auto;
}
.links .ico {
	margin: 0 10px 0 0;
	font-size: 1.3em;
}
h3 .ico { font-size: 1.5em; }
.links li span:hover + .ico,
.links li:focus-within .ico,
.links li span:focus + .ico,
.links li .ico:hover,
section:hover h3 .ico,
section:focus-within h3 .ico,
.btn.copy:focus, .btn.copy:hover {
	color: #8cc8ff;
}
.gamecode {
	width: 100%;
}
.gamecode span { font-size: 97% }
main .hide,
li.hide,
main .noexpand {
	display: none;
}
footer {
	text-align: center;
	padding: 10px 0 40px 0;
	width: 100%;
	margin: 50px auto 0 auto;
	font-size: 0.6em;
    opacity: 0.5;
    transition: 0.3s opacity;
}
footer:hover, footer:focus-within {
    opacity: 1;
}
footer a {
    padding-bottom: 1px;
}
footer p {
	width: 700px;
	max-width: 95%;
	display: block;
	margin: 20px auto 5px auto;
	line-height: 1.5em;
}
.expand {
	width: 700px;
	max-width: 100%;
	overflow: hidden;
	display: block;
	margin: 0 auto 50px auto;
	transition: 0.3s;
	padding: 0 10px 10px 10px;
}
.info {
	font-size: 90%;
}
.expand .info {
	opacity: 0;
	padding: 0 0 0;
	margin: 40px 0 0 0;
	max-height: 0px;
	transition: 0.3s opacity, 0.3s max-height;
}
.expand.clicked .info {
	opacity: 1;
	max-height: 1200px;
	transition: 0.8s opacity, 0.8s max-height;
}
.expand.clicked {
	margin: 0px auto 50px auto;
}
main .divider {
    margin: 0;
    padding: 0;
    height: 0px;
    width: 100%;
}
/*.jackal {
     line-height: 1.3em;
     font-size: 150%;
}*/
@media (max-width: 610px) {
	.pagetitle {
		width: 100%;
	}
	.jackal {
		order: 2;
		margin: 0px 0 10px 0;
	}
	.btn.copy {
	    position: relative;
	    right: -0.1em;
        top: -0.4em;
        opacity: 1;
        pointer-events: auto;
	}
}
@media (max-width: 475px) {
	body {
		font-size: 18px;
	}
	.expander {
		font-size: 25px;
		margin-top: 5px;
	}
	.info {
	    font-size: 100%;
	}
}
@-webkit-keyframes GradTitle {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
@-moz-keyframes GradTitle {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}
@keyframes GradTitle {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}