:root {
  --main-color: #598048;
  --main-color-light: #68aa4c;
  --main-color-dark: #4e6b41;
  --main-gray: #d8d8d8;
  --main-light-gray: #efefef;
  --main-dark-gray: #cacaca;
  --sub-color: #685730;
}

body {
  font: 18px "Saira", sans-serif;
}

main {
  margin: 15px;
}

h1 {
  color: var(--main-color);
  margin: 0.3em 0;
}

.main-canvas,
.main-canvas-fallback {
  border: 0.5px solid var(--main-gray);
  background-color: #fff;
  box-sizing: content-box;
}

.canvas-detail {
  margin: 10px;
  color: var(--sub-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 500px;
}

.canvas-detail svg {
  stroke: var(--sub-color);
}

.canvas-detail input[type="checkbox"] {
  accent-color: var(--main-color);
}

.canvas-detail :where(input[type="text"], select) {
  text-align: center;
  border: none;
  border-bottom: 1px solid var(--main-gray);
  transition: border-bottom-color 0.2s;
}

.canvas-detail select {
  line-height: 1.3em;
}

.canvas-detail input[type="text"]:focus {
  outline: none;
}

.canvas-detail
  :where(:where(input[type="text"], select):hover, input[type="text"]:focus) {
  border-bottom-color: var(--main-color);
}

.canvas-detail :where(button, .styled-file-input-label) {
  width: max-content;
  border: none;
  padding: 0.25em;
  border-bottom: 1px solid var(--main-color);
  border-right: 1px solid var(--main-color);
  border-top: 1px solid var(--main-gray);
  border-left: 1px solid var(--main-gray);
  transition: border-color, background-color 0.2s;
  display: inline-flex;
  align-items: center;
}

.canvas-detail :where(button, .styled-file-input-label):hover {
  background-color: var(--main-color);
  color: #fff;
  border: 1px solid var(--main-color);
}

.canvas-detail :where(button, .styled-file-input-label) svg {
  height: 1em;
}

.canvas-detail :where(button, .styled-file-input-label):hover svg {
  stroke: #fff;
}

.canvas-detail .styled-file-input-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  padding: 0;
  border: none;
}

.canvas-detail .styled-file-input-label {
  position: relative;
}

.canvas-detail .styled-file-input-label:has(:focus-visible) {
  outline: 2px solid var(--sub-color);
  border-radius: 2px;
}

.canvas-detail :where(.rc-slider-rail, .rc-slider-track, .rc-slider-handle) {
  transition: background-color 0.05s;
}

.canvas-detail :where(.rc-slider-rail, .rc-slider-track) {
  height: 6px;
}

.canvas-detail .rc-slider-rail {
  background-color: var(--main-gray);
}

.canvas-detail .rc-slider:hover .rc-slider-rail {
  background-color: var(--main-dark-gray);
}

.canvas-detail .rc-slider:hover .rc-slider-track {
  background-color: var(--main-color-dark);
}

.canvas-detail .rc-slider:active .rc-slider-rail {
  background-color: var(--main-light-gray);
}

.canvas-detail .rc-slider:active :is(.rc-slider-track, .rc-slider-handle) {
  background-color: var(--main-color-light);
}

.canvas-detail .rc-slider-track {
  background-color: var(--main-color);
}

.canvas-detail .range-input .rc-slider-horizontal .rc-slider-track {
  cursor: ew-resize;
}

.canvas-detail .range-input .rc-slider-vertical .rc-slider-track {
  cursor: ns-resize;
}

.canvas-detail .rc-slider-handle {
  background-color: var(--main-color);
  border: none;
  opacity: 1;
  height: 14px;
  width: 14px;
  translate: 0 1px;
}

.canvas-detail .rc-slider-handle:hover {
  background-color: var(--main-color-dark);
}

.canvas-detail .rc-slider-handle-dragging.rc-slider-handle-dragging {
  box-shadow: none;
}

.canvas-detail .rc-slider-handle:focus-visible {
  box-shadow: none;
  outline: 3px solid var(--main-color-light);
}

.canvas-detail :where(.slide-input-text-box) {
  font-size: 0.8em;
  width: 50px;
}

.controls,
.controls-section {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.filename-input {
  width: 120px;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.options-group-title {
  width: max-content;
  padding: 2px 8px;
}

.options-group-content {
  padding: 10px;
  border: 1.5px solid var(--main-gray);
}

.drawing-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shapes-input {
  display: flex;
  gap: 15px;
  align-items: center;
}

.shapes-input label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.number-options-grid {
  display: grid;
  grid-template-columns: max-content max-content 1fr max-content;
  gap: 10px 16px;
  align-items: center;
}

.images-input {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr));
  grid-auto-rows: 50px;
  align-items: center;
  gap: 10px;
}

.images-container {
  display: contents;
}

.image-checkbox-container {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.image-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
}

.images-input-image {
  max-height: 100%;
  max-width: 100%;

  --color1: #888;
  --color2: #999;

  background: linear-gradient(
      45deg,
      var(--color1) 25%,
      transparent 25% 75%,
      var(--color1) 75%
    ),
    linear-gradient(
      45deg,
      var(--color1) 25%,
      transparent 25% 75%,
      var(--color1) 75%
    ),
    var(--color2);

  background-size: 15px 15px;
  background-position: 0 0, 7.5px 7.5px;
}

.number-options-grid :where(.number-input, .range-input) {
  display: contents;
}

.number-options-grid .rc-slider {
  margin: 0 7px;
  width: calc(100% - 14px);
}

.number-options-grid .number-input .rc-slider {
  grid-column: 2 / 4;
}

.background-input {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.background-input-modes {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.background-input .radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.background-input-modes .radio-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.background-input-modes .radio-input {
  accent-color: var(--main-color);
}

.background-input input[type="color"] {
  width: 50px;
}

.background-input-image {
  max-width: 50px;
  max-height: 50px;
}

footer {
  background-color: var(--main-color);
  color: #fff;
  font-size: 0.8em;
  display: flex;
  justify-content: center;
}

.github-link {
  display: flex;
  align-items: center;
  padding: 10px;
  gap: 15px;
  color: inherit;
  text-decoration: none;
}

.github-logo {
  width: 30px;
}