RFCartography/rfcartography/static/css/search.css

main form {
	width:     100%;
	display:   flex;
	flex-wrap: wrap;
}

main form fieldset {
	padding: 0.5rem;
}

main form fieldset input[type=number] {
	border-width:       2px;
	border-style:       solid;
	border-color:       var(--accent-blue);
	height:             2rem;
	background-color:   var(--background-item);
	font-family:        'Courier Prime', monospace;
	-webkit-appearance: none;
	-moz-appearance:    textfield;
	vertical-align:     middle;
	padding-left:       0.5ch;
	padding-right:      0.5ch;
}

main form fieldset input[type=number]:focus {
	border-color: var(--accent-red);
	outline:      none;
}

main form fieldset input[type=number]:first-of-type {
	font-size: 1rem;
	width:     calc(100% - 18ch - 4rem);
}

main form fieldset select {
	border-width:     2px;
	border-style:     solid;
	border-color:     var(--accent-blue);
	font-size:        1rem;
	height:           2rem;
	background-color: var(--background-item);
	text-align:       right;
	font-family:      'Courier Prime', monospace;
	vertical-align:   middle;
}

main form fieldset:first-of-type {
	min-width: 100%;
	font-size: 0rem;
}

main form fieldset:first-of-type label{
	font-size: 1rem;
	padding:   1ch;
}

main form fieldset:first-of-type select {
	border-top-left-radius:    1ch;
	border-bottom-left-radius: 1ch;
	width:                     18ch;
}

main form fieldset:first-of-type input[type=submit] {
	border-width:               2px;
	border-style:               solid;
	border-color:               var(--accent-blue);
	border-top-right-radius:    1ch;
	border-bottom-right-radius: 1ch;
	height:                     2rem;
	width:                      4rem;
	background-color:           var(--accent-blue);
	color:                      var(--background-item);
	font-size:                  1rem;
	font-weight:                bold;
	vertical-align:             middle;
}

main form fieldset:first-of-type input[type=submit]:hover {
	background-color: var(--background-item);
	border-color:     var(--accent-blue);
	color:            var(--accent-blue);
}

main form fieldset:first-of-type input[type=submit]:focus {
	background-color: var(--background-item);
	border-color:     var(--accent-red);
	color:            var(--accent-red);
}

main form fieldset:not(:first-of-type) {
	min-width:          20rem;
	border-style:       solid;
	border-width:       2px;
	border-radius:      1rem;
	border-color:       var(--accent-blue);
	border-image:       var(--gradient);
	border-image-slice: 1;
	flex-grow:          1;
	margin:             0.5rem;
	text-align:         center;
}

main form fieldset:not(:first-of-type) legend {
	padding: 0.5rem;
}

main form fieldset:not(:first-of-type) div {
	display:        inline-block;
	vertical-align: middle;
}

main form fieldset:not(:first-of-type) div:nth-of-type(1) {
	padding-right: 1rem;
}

main form fieldset:not(:first-of-type) div:nth-of-type(2) {
	height: 100%;
}

main form fieldset #depth {
	text-align:    right;
	font-size:     1rem;
	border-radius: 1ch;
	width:         8rem;
}

main form fieldset:not(:first-of-type) input[type=color] {
	width:          2rem;
	vertical-align: middle;
	border-radius:  0.5rem;
}

main form fieldset:not(:first-of-type) select {
	border-radius: 1ch;
	width:         12ch;
}

main form fieldset:not(:first-of-type) label {
	display:        inline-block;
	vertical-align: middle;
	text-align:     left;
}

main form fieldset:nth-of-type(4) div label,
main form fieldset:nth-of-type(5) div label {
	width: 4ch;
}

main form fieldset:nth-of-type(6) div label,
main form fieldset:nth-of-type(7) div label {
	width: 13ch;
}