/* SolarCTF branding, without replacing the map or coordinate form. */
:root {
  --solar-background: #2b323a;
  --solar-foreground: #f1edeb;
  --solar-accent: #fe6e36;
  --solar-burgundy: #5f1224;
  --solar-ash: #171717;
  --solar-font: Arial, sans-serif;

}

html,
body {
  font-family: var(--solar-font) !important;
  background: var(--solar-background);
  color: var(--solar-foreground);
}

.Header {
  flex-shrink: 0;
  background-color: var(--solar-background);
  border-bottom-color: var(--solar-background) !important;
  color: var(--solar-foreground);
}

.Header_content {
  background-color: transparent;
  gap: 24px;
}

.Header_left {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  max-width: 100%;
}

.Header_logo {
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
}

.Header_right,
.Flagbox {
  min-width: 0;
}

.Input,
.Button,
.Result_title,
.Result_message,
.Result_button,
#resultButton,
#copyButton,
.maplibregl-map,
.toastify {
  font-family: var(--solar-font);
}

.Input {
  background-color: var(--solar-foreground);
  border-color: var(--solar-background);
  color: var(--solar-background);
}

.Input::placeholder {
  color: var(--solar-background);
  opacity: .45;
}

.Button {
  background-color: var(--solar-foreground);
  border-color: var(--solar-background);
  color: var(--solar-background);
  font-weight: 400;
  letter-spacing: normal;
  transition: .5s;
}

#submitButton,
#coordinatesInput {
  box-shadow: 4px 4px 0 var(--solar-accent);
}

button#submitButton:hover {
  background-color: var(--solar-background);
  border-color: var(--solar-background);
  color: var(--solar-foreground);
}

.Input:focus-visible,
.Button:focus-visible,
.Header_left:focus-visible,
.Result_button:focus-visible {
  outline: 2px solid var(--solar-accent);
  outline-offset: 5px;
}

#coordinatesInput::selection,
#resultInput::selection {
  background-color: var(--solar-accent);
  color: var(--solar-background);
}

.Result_overlay {
  background-color: rgba(43, 50, 58, .75);
  color: var(--solar-foreground);
}

.Result_content,
#resultInput {
  background-color: var(--solar-background);
  color: var(--solar-foreground);
}

.Result_title,
.Result_message {
  color: var(--solar-foreground);
}

.Result_title {
  font-weight: 700;
}

.Result_content.success .Result_title,
.Result_content.error .Result_title {
  color: var(--solar-accent);
}

.Result_content .Input::placeholder {
  color: var(--solar-foreground);
}

#resultInput,
#copyButton,
#resultButton {
  border-color: var(--solar-foreground);
}

#copyButton,
#resultButton,
.Result_button {
  background-color: var(--solar-foreground);
  color: var(--solar-background);
}

button#copyButton:hover,
#resultButton:hover {
  background-color: var(--solar-accent);
  border-color: var(--solar-accent);
  color: var(--solar-background);
}

.maplibregl-ctrl-group button,
.maplibregl-ctrl-group button:hover,
.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact,
.maplibregl-ctrl.maplibregl-ctrl-scale {
  background-color: var(--solar-foreground) !important;
  border-color: var(--solar-background);
  color: var(--solar-background);
}

.maplibregl-ctrl-group button+button {
  border-top-color: var(--solar-background) !important;
}

.toastify {
  background: var(--solar-background) !important;
  color: var(--solar-foreground);
  box-shadow: 4px 4px 0 var(--solar-accent);
}

#map {
  flex: 1;
  min-height: 0;
}

#map,
canvas.maplibregl-canvas {
  background-color: var(--solar-foreground) !important;
}

.marker {
  background-image: url("/static/svg/solar-cat.svg") !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 19px;
  height: 32px;
  filter: drop-shadow(0 0 1px var(--solar-foreground));
}

@media (max-width: 768px) {
  .Header_content {
    justify-content: center;
  }

  .Header_left {
    display: none;
  }
}

@media (max-width: 600px) {
  .Header_right {
    width: 100%;
    max-width: 330px;
  }

  #coordinatesInput {
    flex: 1;
    width: 0;
    min-width: 0;
  }

  #submitButton {
    flex-shrink: 0;
  }

  .Result_content {
    padding: 24px;
  }
}