:root {
  --bg: #252730;
  --durple: #4d3f57;
  --pink: #c9526b;
  --beige: #beb39c;
}

body {
  font-family: monospace;
  background-color: var(--bg);
  color: var(--beige);
}

button {
  background-color: var(--durple);
  color: var(--beige);
  border: 1px solid var(--pink);
  font-family: monospace;
  cursor: pointer;
}

.popup {
  position: absolute;

  width: 400px;
  min-height: 200px;

  background-color: var(--durple);
  border: 2px solid var(--pink);

  box-shadow: 5px 5px 0px #0008;

  display: none;

  z-index: 10;
}

.popupheader {
  height: 30px;

  background-color: var(--pink);
  color: var(--bg);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 6px;

  cursor: grab;
  user-select: none;
}

.popupheader:active {
  cursor: grabbing;
}

.popupheader span {
  font-weight: bold;
}

.closebutton {
  background: none;
  border: none;

  color: var(--bg);

  font-size: 20px;
  line-height: 20px;

  cursor: pointer;
}

.closebutton:hover {
  color: var(--beige);
}

.popupcontent {
  padding: 12px;
}