#hooty {
    margin-left: -1rem;
    color: #bd752b;

    &:hover #hoot-hoot {
        visibility: visible;
    }

    .hooty-eye-container {
        position: relative;

        .hooty-eye-ball {
            position: absolute;
            display: inline-block;
            width: 2ch;
            height: 2ch;
            left: -0.5ch;
            border-radius: 50%;
            border: 2px solid rgba(189, 117, 43, 0.68);
            box-sizing: border-box;

            &::after {
                content: "";
                display: inline;
                position: absolute;
                width: 0.6ch;
                height: 0.6ch;
                background: white;
                border-radius: 50%;
                top: calc(50% - 0.25ch);
                font-size: 110%;
                transition-duration: 1s;
            }

            &.rotating::after {
                right: 5%;
            }

            &.staring::after {
                right: calc(50% - 0.5ch);
                top: calc(50% - 0.5ch);
                width: 1ch;
                height: 1ch;
            }
        }
    }
}

#hoot-hoot {
    visibility: hidden;
    color: #dee0d5
}

.scroller-container {
    width: 100%;
    height: 300px;
    overflow: visible;
}

.scroller {
    max-height: 300px;
    white-space: nowrap;
    animation-name: move-right;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
}

.hooty-column {
    float: left;
    font-family: monospace;
    font-size: 20px;
    line-height: 100%;
    vertical-align: top;
    animation-name: bounce;
    animation-duration: 3s;
    animation-direction: normal;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}