@import "message-box.css";
@import "control-box.css";

html {
  position: fixed;
}

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
}

.stars {
  position: absolute;
  right: 0;
  top: 0;

  height: 10vmin;
  padding: 1vmin;
  gap: 1vmin;

  display: flex;
  flex-direction: row;

  &.blinking {
    animation: blink 400ms ease-in infinite alternate-reverse;
  }
}

.star {
  width: 10vmin;
  height: 10vmin;

  background-image: url("./images/star_2b50.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;

  filter: drop-shadow(0px 0px 1px black);

  &.black {
    filter: brightness(0);
  }
}

@keyframes blink {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(0);
  }
}