@font-face {
    font-family: "Rodondo";
    src: url(..\\bingovista\\Rodondo.otf) format("OpenType");
}

body {
    font-family: "Rodondo";
    color: white;
    background-color: #080808;
    text-align: center;
    overflow-y: scroll;
}

#status-message {
    font-size: 50pt;
}

.ellipsed:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  animation: ellipsis steps(4,end) 3s infinite;
  content: "\2026"; /* ascii code for the ellipsis character */
  width: 0px;
}

#copy-confirm {
    font-size: 30pt;
    color: #20b020;
    visibility: hidden;
    position: absolute;
    z-index: 100;
    pointer-events: none;
    animation-duration: 3s;
    animation-name: fade-out;
}

.played {
    display: none;
    color: #b0b0b0;
}

.text-button,
.icon-button {
    border: 2px solid #ffffff;
    border-radius: 6px;
    cursor:pointer;
    user-select: none;
}

.icon-button {
    height: calc(1em - 4px);
    width: calc(1em - 4px);
    padding: 0;
    margin-left: 2px;
    text-align: left;
}

.text-button {
    font-size: 20px;
}

.text-button:hover,
.icon-button:hover {
    filter: brightness(130%);
}

[aria-selected="true"] {
    background-image: url("..\\graphics\\glow.svg");
    background-size: cover;
    background-position: 50%;
}

.icon-button * {
    position: absolute;
    height: calc(1em - 4px);
    width: calc(1em - 4px);
    border-radius: 6px;
}

.icon-button input[type=checkbox] {
    display: none;
}

.icon-button > input[type=checkbox] + * {
    background-image: url("..\\graphics\\cross.svg");
}

.icon-button > input[type=checkbox]:checked + * {
    background-image: url("..\\graphics\\check.svg");
}

@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@keyframes fade-out {
    0% {
        translate: 0 0;
        opacity: 1;
    }

    100% {
        translate: 0 -20px;
        opacity: 0;
    }
}