* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
}

body > p {
  margin: 0;
  text-align: center;
}

body > h1 {
  text-align: center;
}

main {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#editor {
  position: relative;
  width: min(700px, calc(100vw - 32px));
  height: 60vh;
}

#text,
#cursors {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 2px;
  border: 1px solid #767676;
  border-radius: 2px;
  font: 13.3333px monospace;
  line-height: normal;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

#text {
  resize: none;
  background: white;
  color: black;
}

#cursors {
  overflow: hidden;
  color: transparent;
  pointer-events: none;
}

.remote-cursor {
  display: inline;
  position: relative;
  margin-left: -1px;
}

.color-0 {
  border-left: 2px solid #e11d48;
}

.color-1 {
  border-left: 2px solid #2563eb;
}

.color-2 {
  border-left: 2px solid #16a34a;
}

.color-3 {
  border-left: 2px solid #9333ea;
}

.color-4 {
  border-left: 2px solid #ea580c;
}

.color-5 {
  border-left: 2px solid #0891b2;
}

.color-6 {
  border-left: 2px solid #c026d3;
}

.color-7 {
  border-left: 2px solid #4f46e5;
}