body{
    overflow: hidden;
}

.featured-streamers{
    background: #fc4040;
    pointer-events: none;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.overlay{
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #00AED8 100%, #00B265 0%), repeating-linear-gradient(90deg,  red 0px, red 1px,  green 1px, green 2px,  blue 2px, blue 3px);
    opacity: 0.25;
    pointer-events: none;
    position: fixed;
    top: 0;
}

.retro-effect{
    width: 100%;
    height: 100%;
    position: absolute;
}

.effect{
    z-index: 2;
}


.onboard{
    width: fit-content;
    height: fit-content;

    position: absolute;
    left: 75px;
    top: 120px;

    z-index: 3;

    color: var(--text-secondary);
}

.onboard h1{
    font-weight: 800;
}

.onboard h3{
    opacity: .9;
    text-shadow: 0 0 10px #000;
}



.live-channels{
    width: 24vw;
    height: 20vh;
    background: var(--primary);
    position: absolute;
    bottom: 20px;
    right: 20px;

    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 1.5rem;
    overflow: hidden;
}

.live-channels .channel{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.live-channels .channel .channel-banner{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    object-fit: cover;
}

.live-channels .channel .channel-profile-image{
    position: relative;
    border-radius: 30%;
}

.live-channels .channel .channel-name{
    position: relative;
    color: var(--secondary);
    display: flex;
    gap: 10px;
}