:root {
 	--main: 0, 238, 0;
    --alt: 0, 95, 0;
    --black: #12100d;
}

* {
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: rgb(var(--alt)) transparent
}

::-webkit-scrollbar {
	width: 12px
}

::-webkit-scrollbar-track {
	background: transparent
}

::-webkit-scrollbar-thumb {
	border-radius: 0;
	background-color: rgb(var(--alt));
	border: 2px solid transparent
}

::selection {
	background-color: rgba(var(--alt), .7);
	color: rgb(var(--main))
}

.bbody {
	background: #fff;
	color: rgb(var(--main));
	font-family: Roboto Mono, monospace;
	display: block;
	-ms-flex-line-pack: center;
	align-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 15px;
}

.bbody, h1, h2, h3, h4, h5, h6 {
	margin: 0
}

b, strong {
	font-weight: 400
}

.piece {
	display: block;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%
}

.frame {
    background-color: transparent;
    border-radius: 30px;
    border-color: currentcolor;
    border-color: rgba(22, 23, 24, .4) rgba(22, 23, 24, .8) rgba(22, 23, 24, .9) rgba(22, 23, 24, .6);
    border-style: solid;
    border-width: 20px;
    box-shadow: inset 0 0 24rem #000, inset 0 0 5rem #000, 0 0 16rem #000;
    pointer-events: none;
    height: 1268px;
    width: 96%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    max-height: 100%;
}

.output {
	background-color: var(--black);
	position: absolute;
	padding: 30px;
	pointer-events: auto;
	text-shadow: 0 .2rem 1rem currentColor;
	z-index: -1
}

.frame * {
	font-weight: 400
}

@keyframes crt-output {
	0% {
		opacity: .9
	}

	50% {
		opacity: 1
	}
}

.scanlines {
	background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 50%, rgba(0, 0, 0, .2) 70%, rgba(0, 0, 0, .6));
	background-size: 100% .5rem;
	border-radius: 30px;
	position: absolute;
	z-index: 0
}

.glow {
	animation: crt-glow 60s infinite;
	background: radial-gradient(circle at center, rgb(var(--main)) 0, rgba(var(--alt), .78) 58%, rgba(var(--alt), .55) 80%, rgba(var(--alt), .27) 93%, rgba(var(--alt), 0) 100%);
	opacity: .15;
	pointer-events: none;
	position: fixed;
	z-index: 2
}

@keyframes crt-glow {
	0% {
		opacity: .1
	}

	50% {
		opacity: .2
	}
}

.pipboy {
    border: 3px solid rgb(var(--main));
    border-width: 2px 0;
    position: relative;
    height: 100%;
    padding: 16px;
    z-index: 1;
}

.pipboy:after,
.pipboy:before {
	position: absolute;
	content: "";
	width: 2px;
	height: 100%;
	background: linear-gradient(180deg, rgb(var(--main)), transparent 35%, transparent 65%, rgb(var(--main)));
	top: 0
}

.pipboy:before {
	left: 0
}

.pipboy:after {
	right: 0
}

.pip-title {
	font-size: 22px;
	background: none;
	border: none;
	color: rgb(var(--main));
	position: absolute;
	padding: 0 5px;
	text-transform: uppercase;
	top: -15px;
	left: 40px;
	z-index: 2;
	letter-spacing: .1em
}

.pip-title:after {
	background: #111;
	content: "";
	height: 3px;
	width: 100%;
	left: 0;
	top: 13px;
	position: absolute;
	z-index: -1
}

.pip-head {
	position: absolute;
	top: 0;
	right: 0;
	width: max-content;
	max-width: 100%;
	text-align: right;
	background: linear-gradient(180deg, var(--black), transparent);
	z-index: 1
}

.pip-head li {
	float: left;
	margin-left: 10px;
	padding: 5px 10px;
	min-width: 120px;
	position: relative
}

.pip-head li:before {
	content: "";
	position: absolute;
	background: var(--black);
	width: 10px;
	height: 2px;
	top: -2px;
	left: -10px
}

.pip-head li:after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 2px;
	background: linear-gradient(180deg, rgb(var(--main)), transparent)
}

.pip-head li b {
	float: left;
	margin-right: 1em
}

.pipboy a {
	color: inherit;
	text-decoration: none
}

.pipboy ul {
	margin: 0;
	padding: 0;
	list-style: none
}

.pipboy>.tab-content {
	line-height: 1.2em;
	overflow-y: hidden;
	overflow-x: hidden;
	display: block;
	height: 98%;
	padding-right: 1px
}

.pipboy>.tab-content>.tab-pane {
	padding: 30px;
	height: 100%;
	overflow-y: auto
}

#items,
#stats {
	margin-top: 15px
}

#stats.tab-pane {
	padding-left: 2px
}

.pip-body {
	position: relative;
	z-index: 0
}

label {
	cursor: pointer
}

.options {
	display: block;
	width: 40%;
	position: fixed
}

.colors {
	display: grid;
	grid-template-columns: 33.33% 33.33% 33.33%
}

.colors label {
	outline: 1px solid rgb(var(--main));
	padding: 5px;
	text-align: center;
	transition: all .1s ease;
	margin: 5px
}

.colors input,
.options input {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
	left: 0;
	top: 0
}

.options a,
.options label {
	display: block;
	padding: 5px 5px 5px 25px;
	margin: 5px 0 0 -25px;
	position: relative;
	outline: .5px solid transparent;
	width: 100%
}

.prefix a,
.prefix label {
	display: block;
	padding: 5px 5px 5px 25px;
	margin: 5px 0 0 -25px;
	position: relative;
	outline: .5px solid transparent;
	width: 100%
}

.prefix .active a {
	outline: 0 solid transparent
}

.frame label:focus,
.frame label:hover,
.prefix a:hover {
	outline: 2px solid currentColor;
	background: rgba(var(--alt), .25)
}

.colors input:checked+label {
	color: var(--black);
	background: rgb(var(--main), .8)
}

.prefix a:before,
.prefix label:before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	left: 8px;
	top: 9px;
	outline: 1.5px solid transparent
}

.prefix a:hover:before,
.prefix label:hover:before {
	outline-color: currentColor
}

.prefix .active a:before,
.prefix input:checked+label:before {
	background: currentColor;
	outline-color: currentColor
}

.pip-foot {
	display: block;
	position: absolute;
	bottom: -14px;
	width: calc(100% - 60px);
	left: 30px;
	z-index: 0
}

.pip-foot li {
	display: contents
}

.pipboy-icon {
	filter: brightness(1) saturate(219%) invert(14%) sepia(191%) saturate(265%) hue-rotate(53deg);
	width: 90%;
	max-width: 500px;
}

.pipboy-section {
	height: auto;
	width: 100%;
    display: grid;
}

.pip-foot a {
	border-radius: 0;
    display: inline-grid;
	width: 10%;
	height: 28px;
	margin: 0 4%;
	text-align: center;
	position: relative;
	line-height: 25px
}

.pip-foot a:after {
	content: "";
	position: absolute;
	background: var(--black);
	width: 100%;
	height: 2px;
	left: 0;
	bottom: 12px;
	z-index: -1
}

a:focus {
	outline: 1px solid;
	outline-offset: -1px
}

a,
label,
label:before {
	transition: all .1s;
	outline: .5px solid transparent
}

.pip-foot a.active,
.pip-foot a:hover {
	outline: 2px solid currentColor
}

a:hover {
	background: rgba(var(--alt), .25)
}

.pipboy .side-menu {
	width: 80px;
	position: fixed
}

.side-menu a {
	display: block;
	width: 80px;
	line-height: 25px;
	padding: 0 10px 2px;
	margin: 6px 0;
	text-align: center
}

.stats-page {
	display: block;
	width: calc(100% - 100px);
	float: right;
	position: relative;
	padding-right: 10px
}

.underlined-title {
	margin: 10px 0 0;
	padding-bottom: 10px;
	text-transform: uppercase;
	width: 98%
}

.right-options {
	display: block;
	float: right;
	padding-right: 1px;
	max-width: 33%;
	white-space: nowrap;
	padding-top: 12px
}

#items .right-options {
	margin-bottom: 100px
}

.right-options a {
	display: block;
	text-align: right;
	padding: 5px;
	margin-bottom: 5px
}

.right-options a:after {
	content: "»";
	padding-left: 5px
}

.frame .disabled {
	color: rgb(var(--alt));
	pointer-events: none
}

.prebutton button {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	color: rgb(var(--main));
	border: 1px solid rgb(var(--main));
	padding: 3px 10px;
	transition: all .1s ease
}

.prebutton button:focus,
.prebutton button:hover {
	background: rgba(var(--alt), .25);
	outline: 1px solid
}

.info {
	width: 50%;
	padding-top: 10px;
	position: absolute;
	right: 0;
	z-index: -1
}

.info-table {
	margin-top: 100px
}

.info-table li {
	float: left;
	margin-left: 1.3%;
	margin-bottom: 3px;
	padding: 4px 6px;
	width: 32%;
	position: relative;
	border-top: 2px solid;
	text-align: right
}

.info-table li b {
	float: left;
	margin-right: 6px
}

.info-table li.clear {
	clear: left
}

.info-table .vboy-wrap,
.info-table li.span-2 {
	width: 65.4%;
	text-align: left
}

.condition {
	display: block;
	background: rgba(var(--alt), .25);
	float: right;
	height: 1em;
	width: 70px;
	max-width: calc(100% - 35px);
	margin: 2px 2px 0 -5px;
	position: relative
}

.condition .fill {
	display: block;
	left: 0;
	background: rgb(var(--main))
}

.condition .fill,
.condition:after {
	position: absolute;
	top: 0;
	height: 100%
}

.condition:after {
	content: "";
	right: 23%;
	width: 2px;
	background: linear-gradient(180deg, var(--black), transparent 40%, transparent 60%, var(--black))
}

.extra {
	border-top: 2px solid;
	float: left;
	clear: both;
	width: 98.7%;
	position: relative;
	margin: 0 0 0 1.3%;
	padding: 5px 6px 5px 34.6%
}

.extra b {
	position: absolute;
	left: 6px
}

.extra:after,
.info-table li:after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 2px;
	background: linear-gradient(180deg, rgb(var(--main)), transparent)
}

.info-table .vboy-wrap {
	border: none
}

.info-table .vboy-wrap:after {
	display: none
}

.vboy {
	height: 180px;
	pointer-events: none;
	background-position: 60%;
	background-repeat: no-repeat;
	filter: hue-rotate(-52deg) saturate(.9)
}

.item-icon {
	position: absolute;
	bottom: 4px;
	left: 0
}

.icon {
	float: left;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	margin-right: 7px;
	border: 2px solid;
	object-fit: contain
}

.icon img {
	max-width: 100%;
	max-height: 100%
}

.post {
	line-height: 1.5em;
	padding-right: 20px;
	font-size: 14px
}

.cursor {
	position: fixed;
	margin-top: -20px;
	z-index: 1;
	pointer-events: none
}

.cursor:before {
	content: "";
	display: block;
	width: 20px;
	height: 25px;
	background-size: contain;
	background-repeat: no-repeat
}

.cursor.cursor-hidden:before {
	background-image: unset
}

.cursor.cursor-default:before {
	background-image: url(https://res.cloudinary.com/kibibyte/image/upload/v1656953740/nv-cursor_ha9i6j.png);
	filter: brightness(.8)
}

.cursor.cursor-input:before {
	background-image: url(https://res.cloudinary.com/kibibyte/image/upload/v1656953792/nv-cur-text_jidfto.png);
	filter: brightness(.8)
}

.cursor.cursor-active:before {
	background-image: url(https://res.cloudinary.com/kibibyte/image/upload/v1656953740/nv-cursor_ha9i6j.png);
	filter: brightness(1.15) saturate(1.15)
}

.fade-a {
	animation: fade-swap 8s infinite;
	animation-delay: -4s;
	opacity: 1
}

.fade-b {
	position: absolute;
	left: 0;
	width: 100%;
	padding: 0 6px;
	opacity: 0;
	animation: fade-swap 8s infinite
}

.pip-head .fade-b {
	padding: 0 10px
}

.options li {
	width: 96%;
	margin-left: 27px;
}

@keyframes fade-swap {
	0% {
		opacity: 0;
		color: rgb(var(--alt))
	}

	20% {
		opacity: 0;
		color: rgb(var(--alt))
	}

	30% {
		opacity: 1;
		color: rgb(var(--main))
	}

	65% {
		opacity: 1;
		color: rgb(var(--main))
	}

	75% {
		opacity: 0;
		color: rgb(var(--alt))
	}

	to {
		opacity: 0;
		color: rgb(var(--alt))
	}
}

@media only screen and (max-width:800px) {
.pipboy>.tab-content>.tab-pane {
padding-left:0px !important;
padding-right:0px !important;
padding-top:5px !important;
height: calc(100% - 30px);
}

.tab-content2 {
height: calc(60% - 10px) !important;
        overflow-y: scroll;
        padding-left: 20px;
}
.options li {
	width: 96%;
margin-left: 0px;
}
	.pipboy>.tab-content {
    	margin-top: 20px;
    	height: calc(100% - 20px);
	}

	.screen-too-small {
    	display: none !important;
	}

	.frame {
		height: 100vh;
		width: 100%;
		max-height: unset;
		border: none;
        border-radius: 0px;
	}

	.output {
		padding: 60px 25px 60px 25px
	}

	.pipboy {
		padding-bottom: 20px
	}

	#items,
	#stats {
		margin-top: 55px;
		padding-top: 15px
	}

	.pip-head {
		width: 100%;
		background: transparent
	}

	.pip-head li {
		width: calc(50% - 10px);
		border-top: 2px solid;
		margin-bottom: 10px;
		margin-top: -2px;
		padding-top: 10px
	}

	.pip-head li:not(:nth-of-type(2)):before {
		display: none
	}

	.pip-body .options {
	width: 100%;
	        height: calc(40% - 15px) !important;
        max-width: unset;
        position: relative;
        overflow-y: scroll;
        padding-left: 27px;
        padding-top: 15px;
        margin-bottom: 20px;
	}

	.pip-body .options2 {
		width: 100%;
    	height: 100% !important;
    	padding-left: 0px !important;
    
	}
.options2 a, .options2 label {
width: calc(100% - 10px) !important;
        max-width: unset;
}
	.options2 label {
display: block;
    padding: 5px 5px 5px 5px !important;
    margin: 5px 0 0 5px !important;
    position: relative;
    outline: .5px solid transparent;
    width: 100%;
	}
	.options2 label:before {
		height: 0px;
    	width: 0px;
    	display: none;
	}

	.pip-body,
	.pip-body .info {
		position: relative
	}

	.pip-body .info {
		width: calc(100% + 30px);
		margin-left: -30px;
		margin-top: 10px;
		padding-bottom: 10px;
		float: none;
		height: 100%;
    	
	}

	.pip-body .info:after,
	.pip-head:after {
		display: none;
	}

	.options a,
	.options label {
		width: calc(100% + 24px);
		max-width: unset
	}

	.pip-head:after {
		top: unset;
		bottom: 5px
	}

	.stats-page {
		padding: 0
	}

	.post {
		padding: 10px
	}

	.pipboy .pip-foot {
		bottom: -18px;
		width: 98%;
		margin: 0 1%;
		left: 0
	}

	.pip-foot a {
		width: 16%;
		height: 35px;
		margin: 0 2%;
		line-height: 32px;
		overflow: hidden;
		font-size: .85em
	}

	.pip-foot a:after {
		bottom: 16px
	}

	.cursor.cursor-active:before {
		background-image: url(https://res.cloudinary.com/kibibyte/image/upload/v1656953740/nv-cursor_ha9i6j.png);
		filter: brightness(1)
	}
}

@media only screen and (max-width:400px) {
	.screen-too-small2 {
    	display: none !important;
	}    
	.pip-foot a {
        width: 30%;
    }
}

html.amber {
	--main: 255, 170, 60;
	--alt: 120, 75, 20
}

.white .cursor,
.white .filter {
	filter: saturate(0) brightness(1.15)
}

html.white {
	--main: 245, 245, 245;
	--alt: 130, 130, 130
}

.red .cursor,
.red .filter {
	filter: sepia(1) saturate(7) brightness(.65) hue-rotate(-35deg)
}

html.red {
	--main: 255, 40, 0;
	--alt: 160, 20, 0
}

.green .cursor,
.green .filter {
	filter: sepia(1) saturate(5) brightness(.85) hue-rotate(65deg)
}

html.green {
	--main: 0, 230, 50;
	--alt: 0, 160, 30
}

.blue .cursor,
.blue .filter {
	filter: sepia(1) saturate(5) hue-rotate(165deg)
}

html.blue {
	--main: 50, 150, 255;
	--alt: 20, 80, 160
}

.black .cursor,
.black .filter {
	filter: sepia(1) invert(1)
}

html.black {
	--main: 200, 220, 250;
	--alt: 90, 100, 150
}

.piece:after,
.piece:before {
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 0%;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	pointer-events: none;
	opacity: 0;
	transition: all .5s ease-in-out
}

.black .piece:before {
	content: "";
	background-image: url(https://res.cloudinary.com/kibibyte/image/upload/v1656953877/the-eye_vjucmz.gif);
	background-size: 110vmax auto;
	opacity: .8;
	height: 100%;
	top: 0;
	background-color: #2f3748;
	filter: sepia(1) hue-rotate(170deg)
}

.black .piece:after {
	content: "";
	background-image: url(https://res.cloudinary.com/kibibyte/image/upload/v1656953886/b-noise_miyuxy.gif);
	opacity: .05;
	height: 100%;
	top: 0
}

@media only screen and (min-width:1310px) {
	.black .piece:before {
		background-size: 1300px auto
	}
}

@media only screen and (max-width:767px) {

	.piece:after,
	.piece:before {
		top: 0;
		left: 50%;
		width: 0;
		height: 100%
	}

	.black .piece:after,
	.black .piece:before {
		background-size: cover;
		width: 100%;
		left: 0
	}
}

.github-fork-ribbon {
	width: 12.1em;
	height: 12.1em;
	position: absolute;
	overflow: hidden;
	top: 0;
	right: 0;
	z-index: 9999;
	pointer-events: none;
	font-size: 13px;
	text-decoration: none;
	text-indent: -999999px
}

.github-fork-ribbon.fixed {
	position: fixed
}

.github-fork-ribbon:active,
.github-fork-ribbon:hover {
	background-color: transparent
}

.github-fork-ribbon:after,
.github-fork-ribbon:before {
	position: absolute;
	display: block;
	width: 15.38em;
	height: 1.54em;
	top: 3.23em;
	right: -3.23em;
	box-sizing: content-box;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg)
}

.github-fork-ribbon:before {
	content: "";
	padding: .38em 0;
	background-color: #a00;
	background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .15));
	box-shadow: 0 .15em .23em 0 rgba(0, 0, 0, .5);
	pointer-events: auto
}

.github-fork-ribbon:after {
	content: attr(data-ribbon);
	color: #fff;
	font: 700 1em Helvetica Neue, Helvetica, Arial, sans-serif;
	line-height: 1.54em;
	text-decoration: none;
	text-shadow: 0 -.08em rgba(0, 0, 0, .5);
	text-align: center;
	text-indent: 0;
	padding: .15em 0;
	margin: .15em 0;
	border-color: #fff;
	border-color: hsla(0, 0%, 100%, .7);
	border-style: dotted;
	border-width: .08em 0
}

.github-fork-ribbon.left-bottom,
.github-fork-ribbon.left-top {
	right: auto;
	left: 0
}

.github-fork-ribbon.left-bottom,
.github-fork-ribbon.right-bottom {
	top: auto;
	bottom: 0
}

.github-fork-ribbon.left-bottom:after,
.github-fork-ribbon.left-bottom:before,
.github-fork-ribbon.left-top:after,
.github-fork-ribbon.left-top:before {
	right: auto;
	left: -3.23em
}

.github-fork-ribbon.left-bottom:after,
.github-fork-ribbon.left-bottom:before,
.github-fork-ribbon.right-bottom:after,
.github-fork-ribbon.right-bottom:before {
	top: auto;
	bottom: 3.23em
}

.github-fork-ribbon.left-top:after,
.github-fork-ribbon.left-top:before,
.github-fork-ribbon.right-bottom:after,
.github-fork-ribbon.right-bottom:before {
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg)
}