.access-denied-body {
    background-color: #332851;
}

.base {
    background-color: #332851;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

    .base h1 {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        font-family: 'Vazir', sans-serif !important;
        text-transform: uppercase;
        text-align: center;
        font-size: calc(30vw / 2.5);
        display: block;
        margin: 0;
        color: #9ae1e2;
        position: relative;
        z-index: 0;
        animation: colors .4s ease-in-out forwards;
        animation-delay: 1.7s;
    }

    .base h2 {
        font-family: 'Vazir', sans-serif !important;
        color: #9ae1e2;
        font-size: calc(5vw / 2.5);
        margin: 0;
        text-transform: uppercase;
        text-align: center;
        animation: colors .4s ease-in-out forwards;
        animation-delay: 2s;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }

    .base h3 {
        direction:rtl;
        font-family: 'Vazir', sans-serif !important;
        color: #9ae1e2;
        font-size:20px;
        margin: 0;
        text-align: center;
        opacity: 0;
        animation: show 2s ease-in-out forwards;
        color: #ca3074;
        animation-delay: 3s;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }

}

@keyframes lock {
    50% {
        top: -4%;
    }

    100% {
        top: -6%;
    }
}

@keyframes colors {
    50% {
        transform: scale(1.1);
    }

    100% {
        color: #ca3074;
    }
}

@keyframes show {
    100% {
        opacity: 1;
    }
}