style.css

@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Zilla+Slab:wght@500;700&display=swap");

/* HTML/BODY */

html,
body {
    min-height: 100vh;
}

hr {
    /* is ugly otherwise */
    border: none !important;
}

/* On Mac and iOS you can scroll further than the page.
This gradient (with a hard stop at 50%) causes the background
above the page and below the page to match the main background
and footer color respectively */
html {
    background-image: linear-gradient(
        to top,
        /* gruv-gray-0 */ rgba(29, 32, 33, 1),
        /* gruv-gray-0 */ rgba(29, 32, 33, 1) 50%,
        /* gruv-gray-12 */ rgba(249, 245, 215, 1) 50%
    );
}

/* FOOTER */

.call-to-action {
    box-shadow: 0 4px 0 0 #48825f;
    background-color: #49d27e;
    font-family: "Zilla Slab";
    color: #45594c;
    border-radius: 0 6px 6px 0;
    transform: translate(0, -4px);
}

.call-to-action:hover,
.call-to-action:focus {
    box-shadow: 0 4px 0 0 #48825f, inset 0 0 0 4px #9df5be;
    outline: none;
}

.call-to-action:active {
    box-shadow: none;
    text-shadow: none;
    transform: none;
}

footer input::placeholder {
    /* gruv-gray-6 */
    color: rgba(146, 131, 116, 1) !important;
}

/* HIGHLIGHTS */
.link-effect:hover,
.link-effect:focus {
    /* gruv-gray-12 */
    background-image: linear-gradient(
        to top,
        rgba(235, 219, 178, 1),
        rgba(235, 219, 178, 1) 45%,
        rgba(255, 255, 255, 0) 45%
    );
    outline: none;
}

.link-effect-purple:hover,
.link-effect-purple:focus {
    /* gruv-purple-l with .3 alpha */
    background-image: linear-gradient(
        to top,
        rgba(211, 134, 155, 0.3),
        rgba(211, 134, 155, 0.3) 45%,
        rgba(255, 255, 255, 0) 45%
    );
    outline: none;
}

.link-effect-purple:hover,
.link-effect-purple:focus {
    /* gruv-purple-l with .3 alpha */
    background-image: linear-gradient(
        to top,
        rgba(211, 134, 155, 0.3),
        rgba(211, 134, 155, 0.3) 45%,
        rgba(255, 255, 255, 0) 45%
    );
    outline: none;
}

/* elm-interactive */
.has-type-error {
    /* gruv-red-d */
    background-image: linear-gradient(to top, rgba(157, 0, 6, 1), rgba(157, 0, 6, 1) 45%, rgba(255, 255, 255, 0) 45%);
    outline: none;
}

/* on dark backgrounds */
.highlighted-l {
    /* gruv-purple-l with .3 alpha */
    background-image: linear-gradient(
        to top,
        rgba(181, 118, 20, 0.8),
        rgba(181, 118, 20, 0.8) 45%,
        rgba(255, 255, 255, 0) 45%
    );
    outline: none;
}

/* MARKDOWN */
.code-shadow {
    text-shadow: 0 1.4px 0 black;
}

/* loading indicator in elm-pages needs to be above the page */
#__elm-pages-loading {
    z-index: 50;
}

@media (min-width: 1600px) {
    .margin-paragraph {
        left: calc(100% + 24px);
        width: 450px;
    }
}