/*Interface Layer Setup*/
#interface-layer{
    width: 96.267vw;
    height: 100vh;
    margin: auto;
    transform: translateY(-100%);
}

    #il-top-interface{
        width: 100%;
        height: 12vh;
    }

        #ilti-info-box{
            width: 10vw;
            height: calc(100% - 2vh);
            text-align: start;
            float: right;
            font-size: 1.2rem;
            color: black;
            font-weight: bold;
            padding-top: 2vh;
        }

        #ilti-info-box p{
            margin: 0;
            padding: 0;
            -webkit-text-stroke: 0.025rem white;
        }

#il-center-interface{
    width: 100%;
    height: 70vh;
}

#il-bottom-interface{
    width: 100%;
    height: 20vh;
}

    #ilbi-top-box-before{
        width: 100%;
        height: 5vh;
        background-color: #243239;
    }

    #ilbi-top-box{
        width: 50%;
        height: 5vh;
        margin: auto;
        overflow: hidden;
        background: -moz-linear-gradient(left,  rgba(219,218,210,0) 1%, rgba(255,255,255,0.9) 75%, rgba(219,218,210,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(219,218,210,0)), color-stop(75%,rgba(255,255,255,0.9)), color-stop(100%,rgba(219,218,210,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left,  rgba(219,218,210,0) 1%,rgba(255,255,255,0.9) 75%,rgba(219,218,210,0) 100%); /* Chrome10+,Safari5.1+ */
    }

        #ilbitb-start-info-box{
            text-align: center;
            font-size: 1.6em;
            font-family: "Roboto", sans-serif;
            font-weight: 500;
            font-style: normal;
            color: #5D70BC;
            padding-top: 0.2vh;
            animation: infinite ease-in 3s StartInfoAni;
        }

    #ilbi-interface-box{
        width: 100%;
        height: 15vh;
    }

        #ilbiib-menu-btn{
            width: 5.5vw;
            height: calc(6vh - 1vh);
            color: #243239;
            background-color: #F3F4F3;
            border-radius: 0.4vw;
            font-size: 1.5em;
            text-align: center;
            padding-top: 1vh;
            font-weight: bold;
            transform: skew(-12deg) translate(3vw,1vw);
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            pointer-events: all;
        }

            #ilbiib-menu-btn:hover{
                background-color: #bbbbbb;
            }

        #ilbiib-downloading-box{
            width: 100%;
            height: 50%;
            padding-top: 2vh;
        }

            #ilbiibdb-downloading-out{
                width: 95%;
                height: calc(50% - 2vh);
                background-color: #454c61ab;
                overflow: hidden;
                margin: 0vh auto 1vh auto;
                border-radius: 1.0vh 0.3vh 1.0vh 0.3vh;
            }

            #ilbiibdb-downloading-in{
                width: calc(0% - 4px);
                height: calc(100% - 4px);
                background-color: #48C8FA;
                margin: 2px;
                border-radius: 1.0vh 0.3vh 1.0vh 0.3vh;
            }

            #ilbiibdb-downloading-text img{
                width: 3.6vh;
                height: 3.6vh;
                padding: 0.2vh;
                margin-left: 7vh;
                animation: loadingAni 3s linear infinite;
            }

            #ilbiibdb-downloading-text{
                width: 100%;
                height: 52%;
                display: flex;
                text-align: center;
                margin: 0;
                padding: 0;
            }

            #ilbiibdb-downloading-text p:nth-child(2){
                width: calc(50% - 15.7vh);
                height: 3vh;
                padding: 0;
                margin: 0;
                font-size: 1.1rem;
                margin-left: 1.5vh;
                margin-top: 0.5vh;
                text-align: start;
                color: #304272;
                text-shadow: 0px 0px 2px white;
                font-weight: bold;
                font-family: Arial Rounded MT;
            }

            #ilbiibdb-downloading-text p:nth-child(3){
                width: calc(50% - 5vh);
                height: 3vh;
                padding: 0;
                margin: 0;
                font-size: 1.1rem;
                margin-left: 1.5vh;
                margin-top: 0.5vh;
                text-align: end;
                color: #304272;
                text-shadow: 0px 0px 2px white;
                font-weight: bold;
                font-family: Arial Rounded MT;
            }

@keyframes StartInfoAni {
    0%{
        color: #6b7eca;
    }
    50%{
        color: #6b7eca4f;
    }
    100%{
        color: #6b7eca;
    }
}

@keyframes loadingAni {
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}