/* =========================================================
   LAYOUT
   ========================================================= */

.layout {
    display: grid;

    grid-template-columns:
        320px minmax(0, 1fr) 320px;

    min-height: calc(100vh - 64px);
}


/* =========================================================
   MAIN
   ========================================================= */

.layout .main {
    position: relative;

    min-width: 0;
    min-height: 0;

    padding: 40px 48px;

    box-sizing: border-box;

    overflow: hidden;

    /*
     * Keep all decorative elements behind the content.
     */
    isolation: isolate;

    background:
        /* Vertical grid */
        linear-gradient(90deg,
            rgba(0, 255, 136, 0.018) 1px,
            transparent 1px),

        /* Horizontal grid */
        linear-gradient(rgba(0, 255, 136, 0.018) 1px,
            transparent 1px),

        /* Green ambient glow */
        radial-gradient(circle at 15% 10%,
            rgba(0, 255, 136, 0.025),
            transparent 35%),

        /* Cyan ambient glow */
        radial-gradient(circle at 85% 15%,
            rgba(0, 229, 255, 0.02),
            transparent 35%),

        /* Base */
        linear-gradient(135deg,
            #050809,
            #080d10,
            #050708);

    background-size:
        32px 32px,
        32px 32px,
        auto,
        auto,
        auto;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

.layout .main>* {
    position: relative;

    z-index: 10;
}


.layout .main .article {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .layout {
        grid-template-columns:
            240px minmax(0, 1fr);
    }

    .layout .sidebar-left,
    .layout .sidebar-right {
        display: none;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 768px) {

    .layout {
        grid-template-columns: 1fr;
    }

    .layout .main {
        padding: 24px 16px;
    }

    /*
     * Keep the article readable on small screens.
     */
    .layout .main .article {
        max-width: 100%;
    }

    /*
     * The large background text becomes too intrusive
     * on small screens.
     */
    .layout .main .god-text {
        font-size: 28px;

        left: 5%;
    }
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .layout .main::before,
    .layout .main::after,
    .layout .main .god-text {
        animation: none;
    }
}