@font-face {
	font-family: "inter";
	src: url(../Inter-Regular.ttf);
	font-display: swap;
}

p {
	font-size: 20px;
}

body::after {
	content: "";
	position: fixed;
	z-index: -1;
	left: 0;
	background: rgb(34,34,34);
	background: linear-gradient(90deg, rgba(34,34,34,1) 0%, rgba(48,48,48,1) 47%, rgba(48,48,48,1) 53%, rgba(34,34,34,1) 100%);
	top: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-repeat: no-repeat;
}


.headergrad {
	background: rgb(107,65,255);
	background: linear-gradient(225deg, rgba(107,65,255,1) 0%, rgba(255,179,102,1) 50%, rgba(107,65,255,1) 100%);
}


a {
	color: #ffaa40;
	text-decoration:none;
	transition: .2s;
}

a:hover {
	color: #ff6640;
	transition: .2s;
}

a.anchor {
    display: block;
    position: relative;
    top: -75px;
    visibility: hidden;
}

.red-blue-shadow {
	text-shadow: 1px 0px .3em #8040FF, -1px -0px .3em #FF0000, 0 0 0.9em #0000FF;
}

.purple-shadow {
	text-shadow: 1px 0px .3em #8040FF, -1px -0px .3em #8040FF, 0 0 0.9em #8040FF;
}

.nav-item {
	cursor: pointer;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

span {
	font-size: 20px;
	position: relative;
	offset-position: center;
}
.span-middle {
	line-height: 44px;
	padding: 10px 10px;
}
.span-header {
	text-shadow: 1px 0px .3em red, -1px -0px .3em blue, 0 0 0.9em #8040FF;
	line-height: 44px;
	padding: 10px 18px;
}
.span-padding {
	padding: 10px 18px;
}

button {
	background-color: rgba(255, 255, 255, 0);
	border: 2px solid white;
	border-radius: 12px;
	box-sizing: border-box;
	color: white;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	padding: 10px 18px;
	position: relative;
	text-align: center;
	transition: box-shadow .2s,-ms-transform .1s,-webkit-transform .1s,transform .1s;
	width: auto;
	transition: .2s;
}
button:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: white;
	transition: .2s;
}
button:active {
	background-color: rgba(255, 255, 255, 0.35);
	border-color: white;
	transform: scale(.96);
}
button:disabled {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: white;
	transform: scale(.96);
}

.button-header {
	text-shadow: 1px 0px .3em red, -1px -0px .3em blue, 0 0 0.9em #8040FF;
}

.button-warning {
	text-shadow: 1px 0px .3em red, -1px -0px .3em red, 0 0 0.9em red;
}

.button-success {
	text-shadow: 1px 0px .3em green, -1px -0px .3em green, 0 0 0.9em green;
}

code {
	color: yellow
}


input[type=text], input[type=password] {
	background-color: rgba(255, 255, 255, 0);
	border: 2px solid white;
	border-radius: 12px;
	color: white;
	font-size: 16px;
	font-weight: 600;
	padding: 10px 18px;
	position: relative;
	text-align: center;
	transition: box-shadow .2s,-ms-transform .1s,-webkit-transform .1s,transform .1s;
	transition: .2s;
}
::-ms-reveal {
	filter: invert(100%);
}

input[type=text]:focus, input[type=password]:focus {
	background-color: rgba(255, 255, 255, 0.2);
}

input[type=text]:disabled, input[type=password]:disabled {
	color: gray;
	background-color: rgba(255, 255, 255, 0.1);
}


.coolCheckbox *,
.coolCheckbox *:after,
.coolCheckbox *:before {
	box-sizing: border-box;
}


.coolCheckbox input {
	opacity: 0;
	position:absolute;
}

.coolCheckbox input:checked + label svg path {
	stroke-dashoffset: 0;
}

.coolCheckbox input:focus + label {
	transform: scale(1.05);
}

.coolCheckbox input + label {
	border: 2px solid white;
	width: var(--size);
	height: var(--size);
	border-radius: 6px;
	cursor: pointer;
	transition: all .2s ease;
}

.coolCheckbox input + label:active {
	transform: scale(1.08);
	/* border-radius: 12px; */
}

.coolCheckbox input + label svg {
	pointer-events: none;
	padding: 5%;
}

.coolCheckbox input + label svg path {
	fill: none;
	stroke: white;
	stroke-width: 4px;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 101;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.checkbox-disabled label {
	color: gray;
	background-color: rgba(255, 255, 255, 0.1);
}

.text-gray {
	color: #c0c0c0;
}

.customCollapse {
	height: 0;
	overflow: hidden;
	transition: .5s;
}

.text-disabled {
	color: #a0a0a0;
	transition: all .2s ease;
}
.text-light {
	transition: all .2s ease;
}