:root {
    --card-background-color: var(--zinc-100);
    --card-background-color-hover: white;

    --card-text-color: var(--zinc-900);
    --card-text-color-hover: var(--zinc-900);
    --card-text-color-active: var(--zinc-900);
    --card-text-color-disabled: var(--zinc-700);

    --card-border-color: var(--zinc-600);
    --card-border-color-hover: var(--zinc-700);
}

#contact {
    background-image: url("/pages/contact/standard.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    a,
    a:link,
    a:visited {
        color: var(--blue-600);
        text-shadow: 0 0 2px var(--zinc-050);
    }

    a:hover,
    a:active {
        color: white;
        text-shadow: 0 0 2px var(--zinc-950);
    }
}

#contact > section {
    min-height: calc(100vh - var(--nav-height)) !important;
}

#contact > section > article {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    gap: var(--gap);
}

#contact > section > article > div {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 600px;
}

#contact > section > article > div > p {
    text-align: left;
}

#contact > section > article > form {
    max-width: 400px;
    background-color: rgba(255, 255, 255, 0.75);

    label {
        color: var(--zinc-100);
    }
}