/* ~~~~~~~~ Canvas ~~~~~~~~ */
#canvas{
	top: 0;
	left: 0;
	position: fixed;

	width: 100%;
	height: 100%;
	display: block;

	object-fit: cover;

	/*filter: blur(0.4vw);*/
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~ Menu Container ~~~~~~~~ */
	.menuContainer{
		position: fixed;

		display: flex;
		overflow-y: auto;

		margin: 0;
		padding: 0;

		color: white;
		background: rgb(35, 35, 35);

		border: none;
		border-radius: 0;

		align-items: center;
		flex-direction: column;

		z-index: 1000;
	}

	/* ~~~~~~~ Menu Left ~~~~~~ */
	#menuContainerLeft{
		top: 0;
		left: -30vw;
		
		width: 30vw;
		height: 100%;

		border-right: 0.1vw solid rgb(130, 130, 130);

		transition: left 200ms ease;
	}

	#menuContainerLeft.active{
		left: 0;
	}

	/* ~~~~~~~ Menu Right ~~~~~ */
	#menuContainerRight{
		top: 0;
		right: -30vw;

		width: 30vw;
		height: 100%;

		border-left: 0.1vw solid rgb(130, 130, 130);

		transition: right 200ms ease;
	}

	#menuContainerRight.active{
		right: 0;
	}


	/* ~~~~~ Header Button ~~~~ */
	.menuButton{
		top: 0.3vw;
		position: fixed;

		width: 1.5vw;
		height: 1.5vw;
		display: block;

		margin: 0;
		padding: 0;

		color: white;
		background-color: rgb(35, 35, 35);

		font-family: JetBrains Mono;
		font-size: 0.8vw;

		overflow: hidden;
		text-overflow: ellipsis;

		border: none;
		border-radius: 0;

		cursor: pointer;

		z-index: 1100;

		transition: background-color 200ms ease, left 200ms ease, right 200ms ease;
	}

	.menuButton:hover{
		background-color: rgb(100, 100, 100);
	}


	/* ~~~~~~ Button Left ~~~~~ */
	#menuButtonLeft{
		left: 0;

		border: 0.1vw solid rgb(130, 130, 130);
		border-left: none;
		border-radius: 0 0.2vw 0.2vw 0;
	}

	#menuButtonLeft.active{
		left: 30vw;
	}

	/* ~~~~~ Button Right ~~~~~ */
	#menuButtonRight{
		right: 0;

		border: 0.1vw solid rgb(130, 130, 130);
		border-right: none;
		border-radius: 0 0.2vw 0.2vw 0;
	}

	#menuButtonRight.active{
		right: 30vw;
	}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~ Article ~~~~~~~~~~~ */
	.article{
		display: block;
		overflow: hidden;

		text-align: left;

		border: 0.1vw solid rgb(50, 50, 50);
		border-radius: 0.2vw;

		padding: 0.5vw;
		margin: 0.3vw;

		background-color: rgb(15, 15, 15);
	}

	/* ~~~~~~~~~ Title ~~~~~~~~ */
	.articleTitle{
		margin: 0 0 1vw 0;
		padding: 0;
		text-align: left;
	}

	/* ~~~~~~~~ Header ~~~~~~~~ */
	.articleHeader{
		border: 0.1vw solid rgb(50, 50, 50);
		border-radius: 0.2vw;

		margin: 0.5vw;
		padding: 0.5vw;

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


	/* ~~~~~~~~ Button ~~~~~~~~ */
	.articleButton{
		padding: 0.15vw;
		margin: 0;

		color: white;
		background-color: rgb(35, 35, 35);

		font-family: JetBrains Mono;
		font-size: 0.8vw;

		overflow: hidden;
		text-overflow: ellipsis;

		border: 0.1vw solid rgb(30, 30, 30);
		border-radius: 0.2vw;

		cursor: pointer;

		transition: background-color 200ms ease;
	}

	.articleButton:hover{
		background-color: rgb(35, 35, 50);
	}


	/* ~~~~~~~~~ Input ~~~~~~~~ */
	.articleInput{
		display: block;

		font-family: JetBrains Mono;
		font-size: 0.7vw;

		color: white;
		background-color: transparent;
		
		border: none;
		border-bottom: .1vw solid rgb(200, 200, 200);
		transition: border-color 150ms;

		text-align: left;

		padding: 0.1vw 0;
		margin: 0.3vw;
	}

	.articleInput:hover{
		border-color: white;
	}

	.articleInput:focus{
		outline: none;
		border-color: white;
	}

	.articleInput:autofill{
		-webkit-background-clip: text;
		-webkit-text-fill-color: white;
	}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~ Refresh Button ~~~~~~~~ */
	.refreshButton{
		width: 1vw;
		height: 1vw;

		padding: 0.3vw;
		border-radius: 0.3vw;

		background-color: transparent;

		cursor: pointer;
	}

	.refreshButton:hover{
	}

	@keyframes refreshButtonAnim{
	    from {
	        transform: rotate(0deg);
	    }
	    to {
	        transform: rotate(360deg);
	    }
	}

	.refreshButton.spin{
		animation: refreshButtonAnim 0.6s linear infinite;
	}


	.refreshText{
		font-family: JetBrains Mono;
		font-size: 0.5vw;

		user-select: text;

		text-align: left;
		white-space: pre-wrap;
		overflow: hidden;

		margin: 0;
		padding: 0;

		transform-origin: 50% 50%;
	}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */