html {
    min-height: 100%;
    background: #f7f4ed;
}

body,
body.public-page {
    position: relative;
    isolation: isolate;
    background: transparent !important;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
    background-color: #f7f4ed;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 399px, rgba(255, 215, 94, 0.6) 399px 400px),
        repeating-linear-gradient(90deg, transparent 0 199px, rgba(96, 217, 255, 0.65) 199px 200px, transparent 200px 399px, rgba(185, 166, 255, 0.65) 399px 400px),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(16, 17, 20, 0.14) 39px 40px),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(16, 17, 20, 0.14) 39px 40px);
}

@media (max-width: 700px) {
    body::before {
        background-image:
            repeating-linear-gradient(0deg, transparent 0 279px, rgba(255, 215, 94, 0.6) 279px 280px),
            repeating-linear-gradient(90deg, transparent 0 139px, rgba(96, 217, 255, 0.65) 139px 140px, transparent 140px 279px, rgba(185, 166, 255, 0.65) 279px 280px),
            repeating-linear-gradient(0deg, transparent 0 27px, rgba(16, 17, 20, 0.14) 27px 28px),
            repeating-linear-gradient(90deg, transparent 0 27px, rgba(16, 17, 20, 0.14) 27px 28px);
    }
}