@media only screen and (max-width: 820px) {
    .loading_frame_percentage.loading_frame_percentage {
        font-size: 30px;
    }

    .loading_frame_actual_doing.loading_frame_actual_doing {
        font-size: 30px;
    }
}

.loading_frame_image {
    z-index: 3;
    transition: opacity 2s ease-in-out;
    opacity: 0;
    position: relative;
    flex: 0 0 22vmin;
    --size: 22vmin;
    transform: translate(0, -60px);
    display: none;
}

    .loading_frame_image.show {
        display: flex;
    }

    .loading_frame_percentage {
        text-align: center;
        font-family: 'RobotoBlack', sans-serif;
        font-size: 50px;
        color: var(--text_color);
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
        justify-content: center;
        z-index: 3;
        position: relative;
        flex: 0 0 auto;
        transition: opacity 2s ease-in-out;
        opacity: 0;
        transform: translate(0, -60px);
        display: none;
    }
        .loading_frame_percentage.show {
            display: flex;
        }

        .loading_frame_actual_doing {
            text-align: center;
            font-family: 'RobotoLight', sans-serif;
            font-size: 50px;
            color: var(--text_color);
            justify-content: center;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
            z-index: 3;
            position: relative;
            flex: 0 0 auto;
            transition: opacity 2s ease-out;
            opacity: 0;
            transform: translate(0, -60px);
            display: none;
        }

.loading_frame_actual_doing.show{
    display: flex;
}