@keyframes binbot-peek {
    0% {
        right: -10vw;
    }
    70% {
        right: -10vw;
    }
    73% {
        right: -9vw;
    }
    76% {
        right: -8vw;
    }
    79% {
        right: -7vw;
    }
    89% {
        right: -7vw;
    }
    94% {
        right: -8vw;
    }
    97% {
        right: -9vw;
    }
    100% {
        right: -10vw;
    }
}

body    {
    background-color: #fff;
    background-image: url(img/bg.png);
    background-size: cover;         
}

#banner {
    --mid: .001;
    --end: 0;
    background-color: #fa5093;
    background: linear-gradient(111deg,rgba(250, 80, 147, 1) 0%, 
    rgba(250, 80, 147, var(--mid)) 10%,
    rgba(250, 80, 147, var(--end)) 100%);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 10%;
    transition: width 1s ease;
}
#banner:hover   {
    width: 10000%;
    
}

#logo   {
    background-image: url(img/logo.png);
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 10vh;
    background-size: contain;
    background-repeat: no-repeat;
}

.menuitem {
    text-align: center;
    color: #fff;
    height: 10%;
    position: absolute;
    width: 20vw;
    padding-top: 1vh;
    font-size: 5vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    user-select: none;
    font-family: Arial;
}

#banner:hover ~ .menuitem,
#banner:hover + .menuitem {
    opacity: 1;
    pointer-events: auto;
}

#b95 {
    left: 80vw;
}

#solitaire {
    left: 60vw;
}

#tetris {
    left: 40vw;
}

#lil    {
    left: 20vw;
}



#banner:hover ~ #b95,
#banner:hover + #b95 {
    transition-delay: 0.4s; /* Adjust the delay as needed */
}

#banner:hover ~ #solitaire,
#banner:hover + #solitaire {
    transition-delay: 0.3s; /* Adjust the delay as needed */
}

#banner:hover ~ #tetris,
#banner:hover + #tetris {
    transition-delay: 0.2s; /* Adjust the delay as needed */
}

#banner:hover ~ #lil,
#banner:hover + #lil {
    transition-delay: 0.1s; /* Adjust the delay as needed */
}

.binbot {
    position: fixed;
    bottom: 16%;
    right: -10vw;
    width: 10vw;
    height: 20vh;
    background-image: url(img/binbotBlink.gif);
    background-size: contain;
    background-repeat: no-repeat;
    transform: rotate(-70deg);
    
    animation: binbot-peek 8s linear infinite;
}

.binbot:hover {
    transform: rotate(-30deg);
    right: -7vw;
    
    animation: none;
}

#binbot-toggle:checked + .binbot {
    transform: rotate(0);
    right: 0;
    opacity: 1;
    animation: none;
}