@font-face{font-family: Fira Code; font-weight:200; src:url(FiraCode-Light.woff2) format("woff2"); }
@font-face{font-family: Fira Code; font-weight:400; src:url(FiraCode-Regular.woff2) format("woff2"); }
@font-face{font-family: Fira Code; font-weight:600; src:url(FiraCode-SemiBold.woff2) format("woff2"); }
@font-face{font-family: Fira Code; font-weight:700; src:url(FiraCode-Bold.woff2) format("woff2"); }

$primary: #182430;

$background: darken($primary, 5%);
$background-container: lighten($primary, 10%);

* {
    margin: 10px;
    padding: 0px;
}

html {
    font-size: 80%
}

a {
    color: lighten($primary, 40%);
    text-decoration: none;
    &:hover { color: lighten($primary, 60%); }
}

body {
    font-family: Fira Code, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-shadow: 2px 2px 2px rgb(0, 0, 0);
    text-align: center;
    // line-height: 18px;
    color: rgb(255, 255, 255);
    background-color: $background;
    margin: 0px;

    .recipe-item {
        padding: 4px;
    }

    .recipe-item-current {
        padding: 3px;
        border: 1px solid white;
    }

    /*
    .header-container {

    }
    */

    .main-container {
        display: flex;

        .list {
            text-align: left;
        }

        .content {
            background-color: $background-container;
            border: 0.1em solid white;
            padding: 0.5em;
        }
    }

    .footer-container {
        font-size: 0.5em;
    }
}

img {
    border: 0px;
}