/* Layout */
.holder {
    position: relative;
}

.beans-container {
    position: relative;
    display: inline-block;
}

.beansbtn {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Game Frames */
.game-frame {
    border: 0px #ffffff none;
    name: myiFrame;
    scrolling: no;
    frameborder: 1;
    marginheight: 0px;
    marginwidth: 0px;
    allowfullscreen: true;
}

.unclickable {
    pointer-events: none;
}

/* Button Styles */
.frames-btn {
    background-color: #3c4858 !important;
    border-color: #3c4858 !important;
    transition: all 0.3s ease-out !important;
    text-align: center;
    width: 330px;
    height: 100px;
    color: aliceblue;
}

/* Text Styles */
.rainbowtxt {
    transition: all 0.3s ease-out !important;
    text-shadow: 2px 2px 4px #000000;
    -webkit-animation: rainbow 5s infinite;
}

.trivia-text {
    position: relative;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-family: Palatino, cursive;
}

/* Animations */
@-webkit-keyframes rainbow {
    0% {
        color: orange;
    }

    10% {
        color: purple;
    }

    20% {
        color: red;
    }

    30% {
        color: CadetBlue;
    }

    40% {
        color: yellow;
    }

    50% {
        color: coral;
    }

    60% {
        color: green;
    }

    70% {
        color: cyan;
    }

    80% {
        color: DeepPink;
    }

    90% {
        color: DodgerBlue;
    }

    100% {
        color: orange;
    }
}

/* Mobile Hide */
@media screen and (max-width: 1182px) {
    .mobile-hide {
        display: none;
    }
}