:root {
  --bg: #efefef;
  --text: #232323;
  --bg-alt: #fefefe;
  --accent: #30a2ff;
  --dark-black: #191b1c;
  --light-blue: #4798b6;
  --accent-alt: #ff6030;
  --error: #ff5166;
  --light-gray: #bebebe;
  --gray: #757575;
  --green: #4caf50;
  --reload-color: #000000;
  --placeholder: #a3a3a3;
  --border-radius: 16px;
  --black: #000000;
  --font: Cairo, sans-serif;
  --font-family: "Zilla Slab", serif;
}

html {
  overflow: hidden;
  height: 100%;
  position: fixed;
}

body {
  overflow: auto;
  height: 100%;
  position: relative;
}

.debug-switcher {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

.status {
  position: absolute;
  top: 1.5vh;
  left: 0;
  width: 100%;
  z-index: 9998;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  font-size: min(3.5vmin, 20px);
  background-color: var(
    --background-color
  ); /* Ensure background color is set */
  box-sizing: border-box; /* Include padding in the element's total width and height */
}

.connection-status {
  display: flex;
  align-items: center;
  gap: max(1vw, 10px);
  line-height: 1em; /* Ensure line-height is consistent */
  padding: 0 10px; /* Adjust padding to prevent overflow */
  max-width: calc(
    100% - 40px
  ); /* Ensure it doesn't exceed the parent's width minus padding */
  box-sizing: border-box; /* Include padding in the element's total width */
  overflow: hidden; /* Prevent content from overflowing */
  white-space: nowrap; /* Prevent text from wrapping */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
}

.socket-status {
  font-weight: 700;
}

.socket-status.connected {
  color: var(--green);
}

.socket-status.disconnected {
  color: var(--error);
}

.reload {
  cursor: pointer;
  font-size: min(8vmin, 25px);
  color: var(--reload-color);
}

.scouting-info {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

* {
  font-family: var(--font, sans-serif);
}