/*** page ***/
	html {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body {
		background-color: #222222;
		margin: 0px;
		padding: 0px;
		overflow: hidden;
	}

	/* scrollbars */
		::-webkit-scrollbar {
			height: 0px !important;
			width: 0px !important;
		}

		::-moz-scrollbar {
			height: 0px !important;
			width: 0px !important;
		}

		::-o-scrollbar {
			height: 0px !important;
			width: 0px !important;
		}

/*** j-logo ***/
	#j-logo {
		position: absolute;
		top: 14px;
		right: 7px;
		color: #04b1ff;
		height: 32px;
		width: 32px;
		cursor: pointer;
		z-index: 1000;
		outline: none;
	}

	#j-logo svg {
		fill: currentColor;
		height: 100%;
		width: auto;
	}

	#j-logo:hover, #j-logo:focus {
		filter: drop-shadow(0px 0px 8px #dddddd);
	}

/*** form ***/
	#form {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		max-height: 90vh;
		max-width: 90vw;
		overflow: hidden;
		border-radius: 10px;
		background-color: #333333;
		padding: 20px;
		text-align: center;
	}

	/* input */
		input#n {
			height: 60px;
			width: calc(100% - 40px);
			margin: 10px;
			border-radius: 10px;
			background-color: #dddddd;
			color: #222222;
			font-family: monospace;
			font-size: 50px;
			text-align: center;
			outline: none;
			border: 0px;
			cursor: pointer;
			padding: 10px;
		}

	/* message / loading */
		#message:not([shown]) {
			display: none;
		}

		#message[shown] {
			color: #dddddd;
			text-align: center;
			font-weight: bold;
			font-size: 25px;
			font-family: monospace;
		}

		#loading:not([rotate]) {
			display: none;
		}

		#loading[rotate] {
			color: #dddddd;
			text-align: center;
			font-weight: bold;
			font-size: 50px;
			animation: rotate 1s infinite linear;
			font-family: monospace;
		}

	/* output */
		#info {
			height: calc(100% - 100px);
			max-height: calc(90vh - 150px);
			overflow-x: hidden;
			overflow-y: scroll;
		}

		#factors, #qualities {
			margin: 20px;
			text-align: left;
			color: #dddddd;
			font-family: monospace;
			font-size: 20px;
			overflow: hidden;
		}
	
	/* animation */
		@keyframes rotate {
			0%   { transform: rotate(0deg);   }
			50%  { transform: rotate(180deg); }
			100% { transform: rotate(360deg); }
		}