.loading-screen {
    position: fixed;
    background-color: black;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

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

    z-index: 5;
}

.loading-screen .developed-by {
    position: relative;
    font-weight: 500;
    font-size: 10px;
    color: #F4F4F4;
    margin-top: 30px;
    font-family: "GoogleSansFlex";
}

.loading-screen .trigger-logo {
    position: relative;
    width: 130px;
    height: 14px;
    margin-top: 3px;
}

.loading-screen .loading-area {
    position: relative;
    width: 468px;
    height: 484px;
    background: linear-gradient(132.96deg, rgba(199, 199, 199, 0.5) -27.09%, rgba(79, 79, 79, 0.5) 27.74%, rgba(129, 129, 129, 0.5) 99.43%);
    border-radius: vw(8);

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

}

.loading-screen .loading-area .image {
    position: relative;
    width: 362px;
    height: 60px;
    margin-bottom: 30px;
    margin-top: -64px;
}

.loading-screen .loading-area .timer-bar {
    position: relative;

}


.loading-screen .loading-area .loading-spinner {
    position: relative;
    width: 108px;
    height: 108px;
    box-sizing: border-box;
}

.loading-screen .loading-area .loading-spinner .background {
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 108px;
    height: 108px;
}

.loading-screen .loading-area .loading-spinner .spinner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 108px;
    height: 108px;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}