.bg-container{
    position: absolute;
    bottom: 3%;
    left: 0%;

    width: 40%;
    height: 30%;
    z-index: 1000000;
    padding: 10px;
    transform: scale(0.7);
    transform-origin: left bottom;
    background-color: rgba(0, 162, 255, 0.527);
    border-radius: 10px;
    display: none;
}
.bg-container::-webkit-scrollbar{
    height: 1px;
}
.bg-container::-webkit-scrollbar-thumb{
    background-color: transparent;
}
.bg-thumbnail{
    position: absolute;
    bottom: 3%;
    left: 2%;
    width: 10%;
    height: 20%;
    border: solid 1px lightskyblue;
    border-radius: 20% 10% 20% 10%;
    z-index: 10000; 
    font-family: 'Saira Stencil One', cursive;
    font-size: 3vh;
    color: rgb(0, 255, 200);
    text-align: center;
    box-shadow: inset 0px 0px 10px rgb(0, 157, 255);
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.555))
}
.bg-thumbnail:hover{
    background-color: white;
    color: black;
    animation: uiPop 0.1s linear forwards;
    cursor: url(imgs/cursorButton.png) 20 20, auto;
}
.bg-title{
    position: absolute;
    left: 0;
    bottom: 100%;

    width: 100%;
    text-align: center;
    font-size: 4vh;
    color: white;
    font-family: 'Passero One', cursive;
    border-radius: 10px;
    user-select: none;
    background-color: blue;
}
.inner-bg{
    position: absolute;
    width: 30%;
    height: 100%;
    left: 10%;
    top: 0;
    overflow: hidden;
    overflow-y: auto;
    background-color: rgba(0, 255, 85, 0.356);
    border-radius: 10px;
}
.bg-select{
    width: 100%;
    height: 20%;
    color: black;
    font-family: 'Saira Stencil One', cursive;
    font-size: 3vh;
    filter: saturate(2) contrast(1.1);
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    border-left: solid 1px white;
    border-right: solid 1px white;
    border-radius: 10px;
}
.bg-select-hover{
    cursor: url(imgs/cursorButton.png) 20 20, auto;
    border: solid 2px rgb(123, 255, 0);
    background-color: black;
    color: white;
}
@keyframes bgPop{
    100%{transform: scale(1.1)}
}

.bg-custom{
    position: absolute;
    right: 0;
    top: 0;

    width: 50%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.781);

    overflow: hidden;
    overflow-y: auto;
    border-radius: 10px;
}
.bg-bar{
    width: 95%;
    height: 8%;
    border: solid 2px lightskyblue;
    border-left: none;
    margin-top: 10%;
    border-radius: 5px;
    background-image: linear-gradient(to right, white 50%, transparent 50%);
    transform: scale(0.8);
    user-select: none;
}
.bg-bar:hover{
    animation: barPop 0.1s linear forwards;
    cursor: url(imgs/cursorButton.png) 20 20, auto;
}
.bg-text{
    color: white;
    font-family: 'Passero One', cursive;
    font-size: 3vh;
    margin-top: 10%;
}
.color-pick-container{
    position: absolute;
    height: 100%;
    left: 102%;
    z-index: 10000;
    overflow: hidden;
    overflow-y: auto;
    border-right: solid 2px lightskyblue;
    background-color: rgba(135, 206, 250, 0.233);
    border-radius: 10px;
    padding-right: 15px;
}





@keyframes barPop{
    100%{transform: scale(0.9);}
}