/*? ========== CONTAINER LAYER 1 ========== */
.redirect-container {
    height: 100dvh;
    width: 100dvw;
    
    text-align: center;
    color: #dcdcdc;
    font-size: 2vh;

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

    background: linear-gradient(46deg, #1a1a1a 0%, #2c3e50 100%);
}

/** ========== SPINNER ========== */

.spinner {
    width: 15dvh;
    height: 15dvh;

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

    border: 1dvh solid t;
    border-top: 1dvh solid var(--color-red);
    border-radius: 50%;
    margin: 2dvh auto;
    
    animation: spin 1s linear infinite;
}

/*? ========== CONTAINER LOGO ========== */

.logo_container {
    height: 100dvh;
    width: 100dvw;

    position:absolute;
    left: 0;
    top:-1dvh;

    display: block;
    
    z-index: 10;
    overflow: hidden;
}

.logo {
    height: 100%;
    width: 100%;

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

.header_logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_logo_ {
    display: flex;
    justify-content: center;
    align-items: center;
}

#dida_logo {
    height: 7dvh;
    width: 7dvh;

    object-fit: contain;
}

/*? === MEDIA QUERY TABLET ===  */

@media screen and (max-width: 769px) {
    .logo_container {
        top: -2dvh;
    }
}