:root[data-debug] *::after {
    content: "";
      position: absolute;
  inset: 0;

    border: calc(0.5 * var(--ui-scale)) dashed rgba(0,255,0,0.4);
    pointer-events: none;
    box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  position: fixed; 
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 25px;
}

body {
    background-image: url("../svg/background.svg");
    font-family: "Roboto Mono", ui-monospace, monospace;
    color: #ffffff;
}

ui-zone{
  position: fixed;
  box-sizing: border-box;

  inset: var(--ui-inset);
}
ui-zone [data-ui] {
  position: absolute;
  box-sizing: border-box;

  left: var(--ui-left, var(--ui-anchor-x, 50%));
  top:  var(--ui-top,  var(--ui-anchor-y, 50%));

  translate:
    var(--ui-translate-x,
      calc(-1 * var(--ui-pivot-x, 50%) + var(--ui-offset-x, 0px))
    )
    var(--ui-translate-y,
      calc(-1 * var(--ui-pivot-y, 50%) + var(--ui-offset-y, 0px))
    );

  width:  var(--ui-width, auto);
  height: var(--ui-height, auto);
}

ui-text{
  display: flex;
  box-sizing: border-box;

  width:  var(--ui-width, auto);
  height: var(--ui-height, auto);

  justify-content: var(--ui-text-x, center);
  align-items: var(--ui-text-y, center);

  text-align: var(--ui-text-align, center);

  white-space: pre;
  font-family: inherit;
  font-size: calc(var(--ui-scale) * 8);
  line-height: 1;
  font-weight: 400;
  color: #fff;
  transition: 300ms;
}
ui-button {
  display: inline-flex;
  justify-content: var(--ui-text-x, center);
  align-items: var(--ui-text-y, center);

  background-color: #7F7F7F;

  outline: calc(1 * var(--ui-scale)) solid #0000003f;
  outline-offset: calc(-1 * var(--ui-scale));
  border-radius: calc(3 * var(--ui-scale));

  font-family: inherit;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  font-size: calc(var(--ui-scale) * 8);
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  transition: 300ms;
}
ui-button:hover {

  background-color: #7F7F7F;
  outline: calc(1 * var(--ui-scale)) solid #ffffff3f;
  color: #ffffff;

  transition: 300ms;
}
ui-button:active {

  background-color: #7F7F7F;
  outline: calc(1 * var(--ui-scale)) solid #ffffffaf;
  color: #ffffff;

  transition: 300ms;
}
a {
  text-decoration: none;
  font-weight: 600;
  font-size: 35px;
  color: #000000;
  background-color: #ffaf00;
  padding: 25px;
  padding-left: 35px;
  padding-right: 35px;
  border-radius: 100px;
  outline: solid 5px #7f3f00;
  transition: 300ms;

}
a:hover {
  background-color: #afff00;
  outline: solid 5px #3f7f00;
  padding: 25px;
  padding-left: 45px;
  padding-right: 45px;
  border-radius: 100px;
  transition: 300ms;
}