/* Landing Page Styles  */

* {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .container {
        margin: 0 auto;
        max-width: 80rem;
    }
    .landing-page {
        font-family: sans-serif;
        padding-bottom: 11rem;
    }
    .landing-page .header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        background-color: #2d2f3f;
        color: #fff;
        padding: 3.5rem 0 4rem;
        z-index: 99;
    }
    .landing-page .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        max-width: 80rem;
    }
    .landing-page .header__link {
        color: inherit;
        position: relative;
        text-decoration: none;
        transition: transform 0.2s ease;
    }
    .landing-page .header__link:hover {
        transform: scale(1.3) rotate(-5deg);
    }
    .landing-page .header__link:hover:after {
        background: #bd93f9;
        border-radius: 4px;
        color: #2d2f3f;
        content: "Back to Home";
        font-size: 0.8rem;
        font-weight: 600;
        left: 50%;
        padding: 5px 10px;
        position: absolute;
        top: 100%;
        transform: translateX(-50%);
        white-space: nowrap;
    }
    .landing-page .header__title a {
        color: #fff;
        text-decoration: none;
    }
    .landing-page .header__title h1 {
        border: none;
        font-family: sans-serif;
        font-weight: 500;
        letter-spacing: -1px;
        margin: 0;
        padding: 0;
        position: relative;
    }
    .landing-page .header__title h1:after {
        background: #f472b6;
        background-image: linear-gradient(
            90deg,
            #7dd3fc 50%,
            #bd93f9 50% 75%,
            #f472b6 75%
        );
        bottom: -1rem;
        content: "";
        height: 0.2rem;
        left: 0;
        position: absolute;
        width: 4rem;
    }
    .landing-page .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #2d2f3f;
        margin-top: 4rem;
        padding: 3rem 0;
    }
    .landing-page .footer__inner {
        display: flex;
        justify-content: flex-end;
        margin: 0 auto;
        max-width: 80rem;
    }
    .landing-page .footer__text {
        color: #eff0f2;
        font-size: 0.875rem;
    }
    .landing-page .footer__text span {
        color: #7dd3fc;
    }
    .landing-page .container {
        background: #eff0f2;
        border-radius: 0.5rem;
        padding: 4rem;
    }
    .landing-page .section {
        background: #fefefe;
        padding-top: 4rem;
    }
    .landing-page .section ul li {
        margin-bottom: 0.5rem;
    }
    .landing-page .section ul li:last-of-type {
        margin-bottom: 0;
    }
    .landing-page .section ul li a {
        transition: all 0.3s ease;
    }
    .landing-page .section ul li a:hover {
        margin-left: 0.5rem;
        text-decoration: none;
    }
    .landing-page .section .divider {
        border-top: 1px solid #d1d5db;
        margin-top: 2rem;
        padding-top: 2rem;
    }
    .landing-page .section h2.heading {
        border-top: 1px solid #d1d5db;
        color: #0e2244;
        font-size: 1.75rem;
        font-weight: 500;
        letter-spacing: -0.5px;
        margin: 2rem 0 0.5rem;
        padding-top: 3rem;
    }
    .landing-page .section h2.heading:first-of-type {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }
    .landing-page .section h2.heading#project-title {
        border-top: none;
        margin-top: 0;
        padding-top: 0;
    }
    .landing-page .section h3.heading {
        color: #0e2244;
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: -0.5px;
        margin-bottom: 0.5rem;
    }
    .landing-page .section p {
        color: #4a4a49;
        font-weight: 500;
        letter-spacing: -0.35px;
        line-height: 24px;
    }
    .landing-page .section .flex {
        display: flex;
        margin-top: 1rem;
    }
    .landing-page .section .flex pre,
    .landing-page .section .flex div {
        border-radius: 0 0.25rem 0.25rem 0;
        flex-grow: 1;
    }
    .landing-page .section .flex .pre-flag {
        background: #afb6bd;
        border-radius: 0.25rem 0 0 0.25rem;
        color: #2d2f3f;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: -0.5px;
        min-width: 65px;
        padding: 1rem;
        text-align: center;
    }
    .landing-page .section pre {
        background: #2d2f3f;
        border-radius: 0.25rem;
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 1rem;
    }
    .landing-page .section pre + pre {
        margin-top: 1rem;
    }
    .landing-page .section pre .linktag {
        color: #f472b6;
    }
    .landing-page .section pre .attr {
        color: #7dd3fc;
    }
    .landing-page .section pre .fa-copy {
        cursor: pointer;
        position: relative;
    }
    .landing-page .section pre .fa-copy.active {
        color: #7dd3fc;
    }
    .landing-page .section pre .fa-copy:after {
        content: "Copied";
        display: none;
        font-family: sans-serif;
        font-size: 1rem;
        font-weight: 300;
        margin-right: 0.5rem;
        position: absolute;
        right: 100%;
    }
    .landing-page .section pre .fa-copy.active:after {
        display: block;
    }
    .landing-page .section ul {
        margin: 1rem 0 0 1rem;
    }
    .landing-page .section ul li a {
        color: #0e2244;
    }
    .landing-page .section .image-container {
        border: 1px solid #d1d5db;
        border-radius: 5px;
        display: inline-block;
        margin: 1rem 0 1.5rem;
        padding: 1.5rem;
    }
    .landing-page .section .image-container.--light {
        background: #fefefe;
    }
    .landing-page .section .image-container.--dark {
        background: #0e2244;
    }