:root, body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    font-family: 'Courier New', Courier, monospace;
}

.container {
    width: 100%;
    height: 33%;
    position: absolute;
    left: 0;
    top: 0;
}

@keyframes scrollBy {
    /* FIXME: this wont work for RTL text */
    from {
        left: 100%;
    }
    to {
        left: -100%;
    }
}

.container > .hawktuah, .container > .arbitraryText {
    opacity: 35%;
    font-size: 6em;
    position: absolute;
    white-space: nowrap;
}

.container > .hawktuah, .container > .arbitraryText, .streakCounter {
    font-weight: 1000;
    color: white;
    text-shadow:
1px 3px 0px #000, 2px 2px 0px #000, 3px 1px 0px #000, 3px 0px 0px #000, 3px -1px 0px #000, 2px -2px 0px #000, 1px -3px 0px #000,
-1px 3px 0px #000, -2px 2px 0px #000, -3px 1px 0px #000, -3px 0px 0px #000, -3px -1px 0px #000, -2px -2px 0px #000, -1px -3px 0px #000,
3px 1px 0px #000, 2px 2px 0px #000, 1px 3px 0px #000, 0px 3px 0px #000, -1px 3px 0px #000, -2px 2px 0px #000, -3px 1px 0px #000,
3px -1px 0px #000, 2px -2px 0px #000, 1px -3px 0px #000, 0px -3px 0px #000, -1px -3px 0px #000, -2px -2px 0px #000, -3px -1px 0px #000;
}

.container > .hawktuah > * {
    vertical-align: middle;
}

.container > .hawktuah > img {
    height: 1em;
}

.container > .hawktuah > span {
    display: none;
}

.container > .hawktuah.perfect > span {
    display: unset;
    position: absolute;
    right: -1ch;
    top: 0px;
    font-size: 50%;
}

.pos-bottom-left {
    position: fixed;
    left: 0;
    bottom: 0;
}

.pos-right-of-chat {
    position: fixed;
    top: 250px;
    right: 0;
}

.streakCounter {
    position: fixed;
    top: 1ch;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
    width: max-content;
}

#stream-container {
    width: 100%;
    height: 100vh;
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
#twitch-embed {
    width: 100%;
    height: 100%;
}