body {
    margin: 0;
    font-family: var(--font-family-override, "Open Sans", "Segoe UI", sans-serif);
    font-size: 2vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.buttoncontainer,
.container {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.45);
}

.buttoncontainer {
  padding: 2%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}

.buttonelement {
  display: flex;
  padding: 1%;
  border-radius: 10px;
  width: 8%;
  aspect-ratio: 1 / 1;
  background-color: #1c1c1c;
  justify-content: center;
  align-items: center;
  font-size: 100%;
  color: #cfcfcf;
  text-align: center;
  user-select: none;
}

.buttonelement:active {
  background-color: #101010;
  outline-width: 0.5vw;
}

.redoutline {
    outline: 1vw solid #e7625c;
    outline-offset: -1vw;
}
.greenoutline {
    outline: 1vw solid #4fbe4c;
    outline-offset: -1vw;
}

.image,
.timer {
    position: absolute;
    object-fit: contain;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.blink {
  animation: blink 1s ease-in-out 3;
}
@keyframes blink {
  0% {
    outline-color: transparent;
  }
  50% {
    outline-color: #4fbe4c
  }
  to {
    outline-color: transparent
  }
}

.hidden {
    display: none;
}