@font-face
{
	font-family: "Montserrat";
	font-style: normal;
	font-weight: normal;
	src: url('fonts/Montserrat-Light.ttf');
}



@keyframes moveGradient
{
	from { background-position: 0% 0%; }
	to { background-position: 200% 0%; }
}



@keyframes rainbowGradient
{ 
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}



@keyframes rightAnimation
{
	from
	{
		right: -100px;
        opacity: 0;
		animation-timing-function: ease-in;
	}

	to
	{
		right: 0px;
        opacity: 0;
		animation-timing-function: ease-out;
	}
}



@keyframes blue-glow
{
	from { text-shadow: 0 0 10px rgb(0, 100, 255); }
	to { text-shadow: 0 0 10px rgb(53, 124, 255); }
}

@keyframes purple-glow
{
	from { text-shadow: 0 0 10px rgb(100, 0, 255); }
	to { text-shadow: 0 0 10px rgb(255, 0, 255); }
}

@keyframes red-glow
{
	from { text-shadow: 0 0 10px rgb(100, 0, 0); }
    to { text-shadow: 0 0 10px rgb(255, 0, 0); }
}



.inline { display: inline-block; }
.left { float: left; }
.right { float: right; }
.right { float: center; }
.left { float: center; }

.blur
{
    -webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);

    box-shadow: 0px 0px 20px 0px rgb(20, 20, 20);
}



.filled
{
    background: rgb(20, 20, 20);
}



.filled-transparent
{
    background: rgba(20, 20, 20, 0.5);
}



.blue-glow
{
	animation: blue-glow 1s ease-in-out infinite alternate;
	
	font-weight: bold;
}



.purple-glow
{
	animation: purple-glow 1s ease-in-out infinite alternate;

	font-weight: bold;
}



.red-glow
{
	animation: red-glow 1s ease-in-out infinite alternate;
	
	font-weight: bold;
}



.bottom
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}



.blue-rainbow
{
	background: linear-gradient(90deg,
		rgb(0, 255, 255) 0%,
		rgb(0, 230, 255) 10%,
		rgb(0, 204, 255) 20%,
		rgb(0, 179, 255) 30%,
		rgb(220, 79, 255) 40%,
		rgb(0, 129, 255) 50%,
		rgb(5, 218, 76) 60%,
		rgb(253, 0, 198) 70%,
		rgb(233, 236, 5) 80%,
		rgb(255, 0, 0) 90%,
		rgb(63, 250, 110) 100%
	);

	background-size: 200%;
	
	animation: moveGradient 1s linear infinite;
}



.rainbow
{
	background: linear-gradient(90deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);

	background-size: 1000%;
	
	animation: rainbowGradient 20s linear infinite;
}



html
{
	font-family: "Montserrat", sans-serif, Arial, Helvetica;

	height: 100vh;

	background: linear-gradient(90deg,
		rgb(0, 255, 255) 0%,
		rgb(0, 230, 255) 10%,
		rgb(0, 204, 255) 20%,
		rgb(0, 179, 255) 30%,
		rgb(0, 154, 255) 40%,
		rgb(0, 129, 255) 50%,
		rgb(0, 154, 255) 60%,
		rgb(0, 179, 255) 70%,
		rgb(0, 204, 255) 80%,
		rgb(0, 230, 255) 90%,
		rgb(0, 255, 255) 100%
	);

	background-size: 200%;
	
	animation: rainbowGradient 20s linear infinite;

    /*
	-webkit-touch-callout: none;
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
	user-select: none;
	*/

	scroll-behavior: smooth;

	box-sizing: border-box;
}



*, *:before, *:after
{
	box-sizing: inherit;
}



::-webkit-scrollbar
{
	width: 5px;
}



::-webkit-scrollbar-track
{
	background: rgb(20,20,20);
}



::-webkit-scrollbar-thumb
{
	background: rgb(0,200,255);
}



::-webkit-scrollbar-thumb:hover
{
	background: rgb(0,255,255);
}



body
{
    color: white;

	margin: 0;
}



header
{
    background: rgb(20, 20, 20);
	
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
	
    z-index: 1;
}



canvas
{
	display: block;
}



#particles-js
{
	padding: 0;
	
    position: fixed;
    width: 100%;
	height: 100%;
	
    z-index: -1;
}



nav ul
{
	margin: 0;

	padding: 0;

	list-style-type: none;
}


nav ul li
{
	float: left;

	padding: 6px;
}



nav ul li a
{
    color: rgb(0, 200, 255);

    border: 2px solid rgb(0, 200, 255);
    border-radius: 2em;

	text-decoration: none;

	padding: 15px;

    transition: 0.5s;
}



nav ul li a:hover
{
    color: white;

    background: rgb(0, 200, 255);
}



nav ul li button
{
    color: rgb(0, 200, 255);
    
    font-size: 2em;
    
    border: 0;

    margin: -15px;
	padding: 0;

	min-width: auto;

    transition: 0.5s;
}



nav ul li button:hover
{
    color: white;

    background: none;
}



h1
{
    font-size: 5em;
    
    margin: auto;
}



h2
{
	font-size: 2em;

    margin: auto;
}



h3
{
    font-size: 1em;
    
    margin: auto;
}



h4
{
    font-size: 0.8em;

    margin: auto;
}



a
{
    color: rgb(0, 200, 255);

    text-decoration: none;

    overflow: hidden;

    transition: 0.5s;
}



a:hover
{
	color: rgb(0, 255, 255);
}



.outer-block
{
	padding: 30px;

	overflow: hidden;
}



.inner-block
{
    max-width: 120em;

    margin-left: auto;
    margin-right: auto;

	border-radius: 2em;
}



.news-title-block
{
    background: rgba(40, 40, 40, 0.4);

    vertical-align: middle;
    line-height: 32px;

    padding: 10px;

	overflow: hidden;
}



.news-block
{
    background: rgba(0, 0, 0, 0.2);

    padding: 20px;

	overflow: hidden;
}



.box-outer-block
{
    background: rgb(20, 20, 20);

    width: 380px;

	text-align: center;

    margin: 0 auto;

    overflow: auto;
}



.box-inner-block
{
	margin-top: 30px;

    overflow: auto;
}



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



.img3d
{
	transform: rotate3d(0.2, 1, -0.4, 0.10turn);

    transition: all 1s;
}



.img3d:hover
{
	transform: rotate3d(0, 0, 0, 0);

	transition: all 1s;
}



.features-block
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    overflow: auto;
    padding: 40px;
    padding-left: 100px;
    padding-right: 100px;
}



.features-sub-block
{
	box-shadow: -3px 3px 10px 0px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 15px;
}



.changelogs-block
{
    display: grid;
    grid-gap: 15px;
    padding: 40px;
}



.changelogs-block a
{
	max-width: 500px;
}



input
{
	font-family: "Montserrat", sans-serif, Arial, Helvetica;

	color: white;

	background: rgb(40, 40, 40, 0.4);

	border: 0;
	border-radius: 2em;
	
	display: block;

	margin: 30px auto;

	padding: 15px;

	width: 250px;
	
    outline: none;

    transition: 0.5s;
}



input:focus
{
	width: 280px;

	transition: 0.5s;
}



select
{
	font-family: "Montserrat", sans-serif, Arial, Helvetica;

	color: white;

	background: rgb(40, 40, 40, 0.4);

	border: 0;
	border-radius: 2em;
	
	display: block;

	margin: 30px auto;

	padding: 15px;

	width: 250px;
	
    outline: none;

    transition: 0.5s;
}



.hidden
{
	display: unset;
	background: none;

	color: rgb(0, 200, 255);

	margin: 0;
	padding: 0;

	font-family: "Montserrat", sans-serif, Arial, Helvetica;
	font-size: 1em;
	
	width: 500px;
}



button
{
	font-family: "Montserrat", sans-serif, Arial, Helvetica;
	font-size: 1em;

	color: rgb(0, 200, 255);

	background: none;

	border: 1px solid rgb(0, 200, 255);
	border-radius: 2em;

	display: block;

	margin: 30px auto;
	padding: 10px;

	min-width: 100px;
	
    outline: none;

    transition: 0.5s;
}



button:hover
{
	color: white;
	
	background: rgb(0, 200, 255);

	cursor: pointer;
}



button:disabled
{
	color: rgb(150, 150, 150);

	border: 1px solid rgb(150, 150, 150);
}



button:disabled:hover
{
	background: none;

	cursor: default;
}



.notification
{
	position: fixed;
	top: 120px;
	right: 0;

	width: 300px;

	padding: 20px;

    animation: rightAnimation 0.5s, rightAnimation 0.5s forwards;
    animation-direction: normal, reverse;
	animation-delay: 0s, 5s;
}



.success
{
    background: rgba(0, 255, 0, 0.9);
}



.warning
{
    background: rgba(255, 150, 0, 0.9);
}



.error
{
    background: rgba(255, 0, 0, 0.9);
}



table
{
	font-size: 0.8em;
	table-layout: fixed;
    border-collapse: collapse;
    background: rgba(28, 28, 28);

    width: 100%;
    
	margin: 0 auto;
}



td
{
	border: 1px solid rgb(40, 40, 40);

	word-wrap: break-word;
    padding: 15px;
}



td a
{
	color: rgb(0, 200, 255);

	background: none;

	border: 1px solid rgb(0, 200, 255);
	border-radius: 2em;
	
	float: left;

	margin: 0 auto;
	padding: 10px;

    width: max-content;

    outline: none;

    transition: 0.5s;
}



td a:hover
{
	color: white;
	
	background: rgb(0, 200, 255);
}



p a
{
	color: rgb(0, 200, 255);

	background: none;

	border: 1px solid rgb(0, 200, 255);
	border-radius: 2em;

	margin: 10px;
	padding: 10px;

    width: max-content;

    outline: none;

    transition: 0.5s;
}



p a:hover
{
	color: white;
	
	background: rgb(0, 200, 255);
}



.red
{
	color: rgb(255, 0, 0);

	border: 1px solid rgb(255, 0, 0);
}



.red:hover
{
	color: white;
	
	background: rgb(255, 0, 0);
}



.table-outer-block
{
    overflow-x: hidden;
    overflow-y: auto;
}



.table-inner-block
{
	background: rgba(40, 40, 40, 0.4);
	border-radius: 2em;
	
    margin: 30px auto;
    padding: 0;
    
    overflow: auto;
}



.table-inner-block input
{
	margin: 0;

	padding: 15px;

	float: left;

	width: 80%;

	background: none;
}



.table-inner-block button
{
	margin: 0;

	height: 45px;

	float: right;

	width: auto;
}



textarea
{
	font-family: "Montserrat", sans-serif, Arial, Helvetica;
	font-size: 0.8em;

    background: rgba(40, 40, 40, 0.4);
	color: white;

	border: 0;

	display: block;

	padding: 10px;

	margin: 30px auto;

	resize: none;

    overflow: auto;
    
    outline: none;
}



footer
{
    color: rgb(0, 200, 255);

    background: rgb(20, 20, 20);

    text-align: center;
}



.panel-visible
{
	height: auto;
	padding: 30px;
	opacity: 1;
    
	overflow: auto;

	transition: 0.25s;
}



.panel-hidden
{
	height: 0;
	padding: 0;
	opacity: 0;
    
	overflow: hidden;

	transition: 0.25s;
}



.panel-button
{
	text-align: left;

	color: white;

	background: rgb(40, 40, 40);

	border: 0;

	display: block;

	margin: 0;
	margin-top: 30px;
	padding: 15px;

	min-width: 100%;
	
    outline: none;

    transition: 0.5s;
}



.panel-button:hover
{
	color: white;
	
	background: rgb(0, 220, 255);
}



.panel-outer-block
{
	margin-bottom: 10px;

	padding: 30px;

	border-radius: 2em;

	overflow: hidden;
}



.panel-inner-block
{
    max-width: 120em;

    margin: 30px;
}



.sidepanel
{
	width: 0;

	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;

	background-color: rgb(20, 20, 20);

	overflow-x: hidden;

	padding-top: 90px;

	transition: 0.25s;
}



.sidepanel a
{
	padding: 15px 30px 0 30px;

	text-decoration: none;
	font-size: 1.2em;
	
	display: block;

	color: white;
	
	transition: 0.5s;
}



.sidepanel a:hover
{
	color: rgb(0, 200, 255);
}



.sidepanel .closebtn
{
	position: absolute;
	top: 0;
	right: 0;
	
	font-size: 3em;
}