/***************************************************************************************************************************************
 * This is the general styling used by all pages.
 * It includes elements like the navbar, nav menu, earch, bar, footer etcetera
 * 
 * @author (Anyanwu Benedict Chukwuemeka)
 * @version (v0.01)
 *
****************************************************************************************************************************************/

html:root
{
    --errClr0: #000000;
    --errClr1: #14d60d;
    --errClr2: #d7d7d7;
    --errClr3: #888888;
}





/* ===== Page Not Found Error ==== */
.error_bdr
{
    width: 100%;
}

.error_bdr .error_box
{
    width: 100%;
    display: grid;
    place-items: center;
    gap: 0.9375rem;
    padding-top: calc((var(--navBarHeight) + 1rem));
}

.error_box .error_note
{
    width: 100%;
    height: fit-content;
    padding: 0.625rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    overflow: hidden;
}

.error_note .header
{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.25rem;
    font-size: 2.8125rem;
    user-select: none;
}

.header .header_note.hN1
{
    transform: rotate(20deg) translateX(1.25rem);
    color: var(--errClr1);
}

.header .header_note.hN2
{
    transform: rotate(0deg);
    color: var(--errClr2);
}

.header .header_note.hN3
{
    transform: rotate(-20deg) translateX(-1.25rem);
    color: var(--errClr1);
}

.error_note .middle
{
    width: 100%;
    max-width: 31.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    align-items: center;
    text-align: justify;
}

.middle .mid_Title
{
    color: var(--errClr2);
    font-size: 1.125rem;
}

.middle .mid_Note
{
    color: var(--errClr3);
    font-size: 0.9375rem;
}

.middle .goToHome
{
    position: relative;
    color: var(--errClr1);
    font-size: 1rem;
}

.middle .goToHome::after
{
    content: '';
    position: absolute;
    left: 50%;
    width: 0%;
    height: 0.1875rem;
    bottom: calc(0% - .125rem);
    border-radius: .125rem;
    background-color: var(--errClr1);
    opacity: 0;
    visibility: hidden;
    transition: 300ms;
}

.middle .goToHome:hover::after
{
    left: 5%;
    width: 90%;
    opacity: 1;
    visibility: visible;
}

.error_note .footer
{
    width: 100%;
}

.footer .logoBox
{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logoBox .logo
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0;
    text-transform: uppercase;
}

.logoBox .logo .logo1
{
    color: var(--errClr1);
    font-size: 1.5625rem;
}

.logoBox .logo .logo2
{
    color: var(--errClr2);
    font-size: 1rem;
}









@media only screen and (max-width: 55.25rem)
{

    .error_note .header
    {
        font-size: 1.875rem;
    }
}


@media only screen and (max-width: 35.3125rem)
{

    .error_note .header
    {
        font-size: 1.25rem;
    }
}