:root {
    --navBg: #FEFEFE;
    --primary: #8854C0;
    --text1: #5d5d5d;
    --border: #bebebe;
}

body {
    background-color: white !important;
}

#q-404-body {
    height: auto;
}

#q-404-left {
    width: 55%;
    display: flex;
    flex-direction: column;
    transform: translate(20%, 35%);
}

#q-404-right {
    width: 45%;
}

#q-404-left h1 {
    font-size: 80px;
    font-weight: 600;
    color: var(--primary);
}

#q-404-left h2 {
    font-size: 50px;
    font-weight: 600;
    color: var(--primary);
}

#q-404-right img {
    pointer-events: none;
    margin-top: 10%;
    user-select: none;
}

#q-404-left p {
    color: gray;
    font-size: 14px;
}

#q-404-button {
    background-color: var(--primary);
    color: white;
    width: 150px;
    font-size: 15px;
    border: none;
}

#q-404-button:active {
    transform: scale(0.98);
}

#q-404-button:focus {
    box-shadow: none;
}


@media only screen and (max-width: 765px) {

    #q-404-left {
        width: 100%;
        transform: translate(20%, 35%);
    }

    #q-404-right {
        width: 100%;
        margin-top: 5%;
    }
}

@media only screen and (max-width: 500px) {

    #q-404-left h1 {
        font-size: 50px;
    }

    #q-404-left h2 {
        font-size: 20px;
        padding: 0 !important;
    }

    #q-404-right {
        margin-top: 25%;
        padding: 0 !important;
    }

    #q-404-body {
        height: 100vh;
        padding: 0 !important;
    }

}

footer {
    background-color: #ECEFF1 !important;
}

#footer-below {
    background-color: #ECEFF1 !important;
}

#footer-wrap {
    background-color: #ECEFF1;
}

#footer-below .footer-row .footer-sub-row .foot-sub-row-a a {
    font-size: 14px;
    font-weight: 400;
}

#footer-foot {
    font-size: 13px;
}

#footer-foot a {
    font-size: 13px;
}