body {
    font-family: "Raleway Dots", sans-serif;
    background: #f9f9f9;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

a {
    text-decoration: none;
    ;
}

.container {
    position: absolute;
    width: 600px;
    height: 150px;
    overflow-y: scroll;
    bottom: 16px;

    -ms-overflow-style: none;
    scrollbar-width: none;

    padding: 32px 32px 8px 32px;
}

.container::-webkit-scrollbar {
    display: none;
}

.list {
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}

.list-item {
    user-select: none;
    text-align: left;
    font-size: 3em;
    word-spacing: 25px;
    padding-left: 8px;
}

.fill-button-bg {
    background: linear-gradient(to right, #000000 0%, #000000 50%, #ffffff00 50%, #ffffff00 100%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.3s ease;
}

.fill-button-bg:hover {
    background-position: left bottom;
    color: white;
}

#board {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -1;
}

.backgroundFill {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 96, 5, 0.2) 25%,
            rgba(255, 0, 0, 0.3) 50%,
            rgba(255, 29, 25, 0.2) 75%,
            transparent 100%);
    background-size: 400% 400%;
    animation: hazyFlow 4s ease-in-out infinite;
}

@keyframes hazyFlow {
    0% {
        background-position: 0% 50%;
        filter: blur(0px);
    }

    50% {
        background-position: 100% 50%;
        filter: blur(2px);
    }

    100% {
        background-position: 0% 50%;
        filter: blur(0px);

    }
}

.sticker {
    position: absolute;
    animation: fishAppear 0.6s ease-out forwards;
    opacity: 0;
    image-rendering: pixelated;
}

@keyframes fishAppear {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fishy {
    width: 150px;
}