/* Shared visual foundation for public PPID pages. */
:root {
    --site-surface: #f4f8f8;
    --site-ink: #123047;
}

html {
    background: #e8f0f2;
}

body {
    min-height: 100vh;
    background-color: var(--site-surface) !important;
    background-image:
        linear-gradient(120deg, rgba(15, 118, 110, .075) 1px, transparent 1px),
        linear-gradient(30deg, rgba(29, 78, 216, .055) 1px, transparent 1px),
        linear-gradient(180deg, #fbfdfd 0%, #eef5f5 52%, #e7f0f3 100%) !important;
    background-size: 34px 34px, 34px 34px, 100% 100% !important;
    background-attachment: fixed !important;
    color: var(--site-ink);
}

.main-background {
    min-height: 100vh;
    background-color: transparent !important;
    background-image:
        linear-gradient(140deg, rgba(255, 255, 255, .76), rgba(237, 247, 246, .58)),
        url('../images/bg.jpg') !important;
    background-position: center, center !important;
    background-repeat: no-repeat, repeat !important;
    background-size: cover, 960px auto !important;
}

.main-background .overlay {
    min-height: 100vh;
    background: rgba(255, 255, 255, .18);
}

@media (max-width: 768px) {
    body {
        background-size: 26px 26px, 26px 26px, 100% 100% !important;
    }

    .main-background {
        background-size: cover, 680px auto !important;
    }
}