@import "../base.css";

.page-container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: calc(var(--spacing-2xl) * 2.5);
}

.content-wrapper {
    display: flex;
    gap: calc(var(--spacing-2xl) * 4 - var(--spacing-sm));
    width: 70%;
    flex: 1;
}

.left-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: calc(var(--spacing-2xl) * 2.5);
    text-wrap: balance;
}

.right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing-2xl) + var(--spacing-sm));
}

#help-button {
    position: absolute;
    right: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    align-self: end;
    filter: drop-shadow(0 0 1px var(--color-accent-blue));
    border: none;
    width: 40px;
    height: 40px;
    background-color: var(--color-white);
    border-radius: var(--border-radius-full);
}

#help-button svg {
    fill: var(--color-accent-blue);
}


h3 {
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--color-gray-900);
}

h5 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-900);
}

p {
    font-size: var(--font-size-lg);
    color: var(--color-gray-800);
}

.navbar {
    margin-top: calc(var(--spacing-2xl) + var(--spacing-sm)) !important;
    flex-shrink: 0;
}

footer {
    border-top: 1px solid var(--color-gray-500);
    margin-top: auto;
    flex-shrink: 0;
}

@media (max-width: 1280px) {

    .page-container {
        min-height: 100vh;
        height: auto;
        overflow-y: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .content-wrapper {
        flex: 1 0 auto;
        width: 90%; 
        margin-top: calc(var(--spacing-xl) * 2);
        flex-direction: column;
        gap: calc(var(--spacing-2xl) * 2);
    }

    .container {
        flex-direction: column !important;
        align-items: baseline !important;
        width: 100%;
    }

    .container>div {
        flex-direction: column !important;
        width: 100% !important;
        gap: var(--spacing-md);
    }

    #help-button {
        position: relative;
        right: var(--spacing-xs);
        margin-bottom: var(--spacing-md);
        align-self: end;
    }

    .left-button {
        position: unset !important;
    }

    .navbar {
        width: 100%;
    }

    #qve-logo {
        align-self: center;
    }
}