colorGenerator.css

@import url("colorPalette.css");

:root {
	--ContentWidth: 80vw;
    --Table1Width: var(--ContentWidth);
    --Table1Ratio: 20%;
    --Table2Size: calc(var(--ContentWidth) / 27);
}
td, input[type="submit"], input[type="number"] {
	background-color: var(--light_orange);
}
th {
	background-color: var(--dark_orange);
}
#table2 td {
	background-color: white;
}
.table1CellL {
    width: var(--Table1Ratio);
}
.table1CellR {
    width: calc(100% - --Table1Ratio);
}
#table1 {
    width: var(--Table1Width);
	margin: auto;
}
#table1 Select {
    border: none;
    background-color: inherit;
	min-width: calc(100% - 1.75rem);
    height: 1.25rem;
}
table td, table th, input[type="submit"], input[type="number"] {
    border: black 1.5px solid;
}
#table2 td, #table2 th {
    /* Just set them all, some of them affect overflow. Didn't bother to check which */
    min-height: var(--Table2Size);
    min-width:  var(--Table2Size);
    height: var(--Table2Size);
    width:  var(--Table2Size);
    max-height: var(--Table2Size);
    max-width:  var(--Table2Size);
}
table {
	border-collapse: collapse;
}
#table2 {
    text-align: center;
	margin: auto;
}
.tableSpacer {
	height: 1rem;
}
form {
	text-align: center;
}
select:disabled, input[type="radio"]:disabled {
	/* for Firefox */
	-moz-appearance: none;
	/* for Chrome */
	-webkit-appearance: none;
	color: black;
}
label, input[type="number"] {
    margin: 0.25em 0;
}

#table1 td > input[type="text"] {
	padding: 0;
	border: none;
	background-color: inherit;
	color: inherit;
	width: 100%;
	text-align: center;
   pointer-events: none;
}