.color-picker-container {
	--generic-font-size: 1rem;
    --frame-border: #bf96ff;
    --textbox-border: #7a58b0;
    --textbox-background: #1b001f;
    --textbox-color: #bfd0ce;

    --button-border: #bf96ff;
    --button-border-2: #7f64aa;
    --button-fade-top: #6c5590;
    --button-fade-bottom: #282036;
    --button-text: #d9c7d9;

	position: relative;
	width: 100%;
	min-height: calc(var(--generic-font-size) * 25);
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 50% 50%;
	border: 0.15rem solid var(--frame-border);

	canvas {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		pointer-events: none;
	}

	.color-picker {
		display: grid;
		grid-template-columns: 1fr calc(var(--generic-font-size) * 2);
		align-items: center;
		justify-items: center;
		max-height: 100%;
		padding: calc(var(--generic-font-size) * 1);

		.actual-color-picker-container {
			position: relative;
			width: 100%;
			height: 100%;
	
			.actual-color-picker-container-but-legit-this-time {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;

				.pls-forgive-for-so-many-div {
					position: relative;
					width: 100%;
					height: 100%;
					border: 0.15rem solid var(--textbox-border);

				    .canvas-container-legit {
				    	position: absolute;
				    	top: calc(var(--generic-font-size) * 0.25);
				    	left: calc(var(--generic-font-size) * 0.25);
				    	width: calc(100% - var(--generic-font-size) * 0.5);
				    	height: calc(100% - var(--generic-font-size) * 0.5);
				    	touch-action: none;
				    }
				}
			}
		}

		.hue-selector {
			position: relative;
			height: 100%;
			width: 100%;
			border: 0.15rem solid var(--textbox-border);
			border-left: none;

		    .canvas-container-legit {
		    	position: absolute;
		    	top: calc(var(--generic-font-size) * 0.25);
		    	left: calc(var(--generic-font-size) * 0.25);
		    	width: calc(100% - var(--generic-font-size) * 0.5);
		    	height: calc(100% - var(--generic-font-size) * 0.5);
		    }

			.slider {
			    position: absolute;
		    	top: calc(var(--generic-font-size) * 0.25);
		    	left: 0;
				width: 100%;
		    	height: calc(100% - var(--generic-font-size) * 0.5);
				z-index: 10;
			}
		}
	}

	.sliders {
		width: 100%;
		display: grid;
		grid-template-rows: repeat(8, auto) 1fr;
		grid-row-gap: calc(var(--generic-font-size) * 0.5);
		align-items: center;
		justify-items: center;
		align-self: center;
		justify-self: center;
		padding: calc(var(--generic-font-size) * 1);

		.slider-row {
			height: calc(var(--generic-font-size) * 2);
			display: grid;
			grid-template-columns: calc(var(--generic-font-size) * 1.5) 1fr calc(var(--generic-font-size) * 4) calc(var(--generic-font-size) * 2) calc(var(--generic-font-size) * 2);
			grid-column-gap: calc(var(--generic-font-size) * 0.5);
			align-items: center;
			width: 100%;

			.label {
				display: grid;
				grid-template-rows: 1fr;
				align-items: center;
				justify-items: end;
				font-size: calc(var(--generic-font-size) * 1.5);
				font-weight: bold;
			}

			.canvas-container {
				display: grid;
				grid-template-rows: 1fr;
				align-items: center;
				justify-items: center;
				position: relative;
				width: 100%;
				height: calc(var(--generic-font-size) * 2);
			    border: 0.15rem solid var(--textbox-border);

			    .canvas-container-legit {
			    	position: absolute;
			    	top: calc(var(--generic-font-size) * 0.25);
			    	left: calc(var(--generic-font-size) * 0.25);
			    	width: calc(100% - var(--generic-font-size) * 0.5);
			    	height: calc(100% - var(--generic-font-size) * 0.5);
			    }

				.slider {
			    	position: absolute;
			    	top: 0;
			    	left: calc(var(--generic-font-size) * 0.25);
					width: calc(100% - var(--generic-font-size) * 0.5);
			    	height: 100%;
					z-index: 10;
				}
			}

			.slider-button {
				position: relative;
				height: calc(var(--generic-font-size) * 2);
				width: calc(var(--generic-font-size) * 2);
			    background: linear-gradient(var(--button-fade-top), var(--button-fade-bottom));
			    border: 0.15rem solid var(--button-border);
			    border-bottom-color: var(--button-border-2);
			    border-right-color: var(--button-border-2);
			    color: var(--button-text);
			    font-weight: bold;
			    font-size: calc(var(--generic-font-size) * 1.1);
			    z-index: 9;
			}

			.slider-button:active {
			    filter: brightness(0.75) !important;
			    border-top-color: var(--button-border);
			    border-left-color: var(--button-border);
			    border-bottom-color: var(--button-border-2);
			    border-right-color: var(--button-border-2);
			}

			.slider-button:hover {
			    filter: brightness(1.3);
			}

			.slider-button .button-content {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 10;
				background-size: contain;
				pointer-events: none;
			}

			.slider-button.plus .button-content {
				background-image: url("images/misc/plus.svg");
			}
			.slider-button.minus .button-content {
				background-image: url("images/misc/minus.svg");
			}
		}

		.padding-lmao {
			height: calc(var(--generic-font-size) * 1.25);
		}

		.results {
			width: 100%;
			display: grid;
			grid-template-columns: 1fr auto;
			grid-column-gap: calc(var(--generic-font-size) * 0.5);
			align-items: center;
			justify-items: center;

			.color-field {
				position: relative;
				border: 0.15rem solid var(--textbox-border);
				width: 100%;
				height: 100%;
				min-width: calc(var(--generic-font-size) * 6);
				min-height: calc(var(--generic-font-size) * 6);

				.color-container {
			    	position: absolute;
			    	top: calc(var(--generic-font-size) * 0.25);
			    	left: calc(var(--generic-font-size) * 0.25);
			    	width: calc(100% - var(--generic-font-size) * 0.5);
			    	height: calc(100% - var(--generic-font-size) * 0.5);
				}
			}

			.rows {
				display: grid;
				grid-template-rows: repeat(3, auto);
				grid-row-gap: calc(var(--generic-font-size) * 0.5);
				align-items: center;
				justify-items: center;

				.result-row {
					height: calc(var(--generic-font-size) * 2);
					display: grid;
					grid-template-columns: calc(var(--generic-font-size) * 5) 1fr auto;
					grid-column-gap: calc(var(--generic-font-size) * 0.5);
					align-items: center;

					.textbox {
						height: calc(var(--generic-font-size) * 2);
						width: 100%;
					}

					.copy-button {
						position: relative;
						height: calc(var(--generic-font-size) * 2);
						width: calc(var(--generic-font-size) * 6);
					    background: linear-gradient(var(--button-fade-top), var(--button-fade-bottom));
					    border: 0.15rem solid var(--button-border);
					    border-bottom-color: var(--button-border-2);
					    border-right-color: var(--button-border-2);
					    color: var(--button-text);
					    font-weight: bold;
					    font-size: calc(var(--generic-font-size) * 1.1);
					    z-index: 9;
		    			text-shadow: 0.05rem 0.05rem 0.125rem #000;
					}

					.copy-button:active {
					    filter: brightness(0.75) !important;
					    border-top-color: var(--button-border);
					    border-left-color: var(--button-border);
					    border-bottom-color: var(--button-border-2);
					    border-right-color: var(--button-border-2);
					}

					.copy-button:hover {
					    filter: brightness(1.3);
					}
				}
			}
		}
	}


	input[type="number"] {
		height: calc(var(--generic-font-size) * 1.5);
		width: 100%;
		appearance: textfield;
		background-color: var(--textbox-background);
	    border: 0.15rem solid var(--textbox-border);
	    color: var(--textbox-color);
	    font-size: calc(var(--generic-font-size) * 1.1);
	    padding: calc(var(--generic-font-size) * 0.25);
	    min-width: calc(var(--generic-font-size) * 3.5);
	    height: calc(var(--generic-font-size) * 2);
	}

	input[type="number"]::-webkit-inner-spin-button,
	input[type="number"]::-webkit-outer-spin-button {
	    -webkit-appearance: none;
	}

	/*input[type="range"] {
		opacity: 0;
	}*/

	/*input[type="range"]:hover, input[type="number"]:hover {
	    filter: brightness(1.3);
	}

	input[type="range"]:focus, input[type="number"]:focus {
	    filter: brightness(1.2);
	}

	input[type="range"]:disabled, input[type="number"]:disabled {
	    filter: brightness(0.6) grayscale(1);
	}*/

	.textbox {
		width: calc(var(--generic-font-size) * 7);
	}

	#slider-2d-point, #slider-big-hue-point, #slider-red-point, #slider-green-point, #slider-blue-point, #slider-hue-point, #slider-sat-point, #slider-val-point {
		box-sizing: content-box;
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
		z-index: 11;
		border: 2px solid #000000;
		outline: 2px solid #ffffff;
	}

	#slider-2d-point {
		width: 3px;
		height: 3px;
	}

	#slider-big-hue-point {
		width: 100%;
		height: 3px;
	}

	#slider-red-point, #slider-green-point, #slider-blue-point, #slider-hue-point, #slider-sat-point, #slider-val-point {
		width: 3px;
		height: 100%;
	}

	input[type="range"] {
		box-sizing: content-box;
		-webkit-appearance: none;
		width: 100%;
		background: transparent;
		cursor: pointer;
		margin: 0;
	}

	input[type="range"]::-webkit-slider-thumb {
		cursor: pointer;
		-webkit-appearance: none;
		background-color: transparent;
		border-radius: 0;
		height: calc(100% + (var(--generic-font-size) * 0.5));
		width: 1px;
	}

	input[type="range"][orient="vertical"]::-webkit-slider-thumb {
		width: calc(100% + (var(--generic-font-size) * 0.5));
		height: 1px;
	}

	input[type="range"]::-moz-range-thumb {
		border-radius: 0;
		cursor: pointer;
		border-color: transparent;
		color: transparent;
		background: transparent;
		height: calc(100% + (var(--generic-font-size) * 0.5));
		width: 0px;
	}

	input[type="range"][orient="vertical"]::-moz-range-thumb {
		width: calc(100% + (var(--generic-font-size) * 0.5));
		height: 0px;
	}

	input[type="range"][orient="vertical"] {
		writing-mode: vertical-lr;
	    direction: rtl;
	    appearance: none;
	    width: 100%;
	    vertical-align: bottom;
	}

	input[type="range"]::-ms-track {
		width: 100%;
		cursor: pointer;
		background: transparent; 
		border-color: transparent;
		color: transparent;
	}

	input[type="range"]:focus {
		outline: 0.2rem solid #ffffff;
	}

	input[type="text"], textarea {
	    background-color: var(--textbox-background);
	    border: 0.15rem solid var(--textbox-border);
	    color: var(--textbox-text);
	    padding: 0.2rem;
	    font-size: var(--generic-font-size);
	}

	input[type="text"]:hover, textarea:hover {
	    filter: brightness(1.3);
	}

	input[type="text"]:focus, textarea:focus {
	    filter: brightness(1.2);
	}

	input[type="text"]:disabled, textarea:disabled {
	    filter: brightness(0.6) grayscale(1);
	}
}

@media screen and (max-width:800px) {
	.color-picker-container {
		grid-template-rows: 1fr auto;
		grid-template-columns: 1fr;
		height: 90vh;
	}
}