:root {
    --bg-primary: #fafafa;
    --bg-secondary: #e4e5f1;
    --border-color: #d2d3db;
    --text-secondary: #9394a5;
    --text-primary: #484b6a;
    --gradiant-logo: linear-gradient(to right bottom, #006678, #4fa8ff);
}

@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
    font-display: swap;
}

/* Default */
* {
    box-sizing: border-box;
    font-family: Roboto;
}

/* Drucken */
@media print {
    html,
    body {
        width: 210mm;
        height: 297mm;
    }
}

/* Bereiche */
body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* Elemente */
img {
    max-width: 100%;
}

a:link {
    text-decoration: none;
}

.ingredient-item {
    cursor: pointer;
}

/* Bootstrap */
.w-lg-50 {
    width: 100% !important;
}

/* Custom */
#container_autocomplete {
    top: 124px;
}

.grid-template-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-areas:
        "main"
        "details"
        "ingredients"
        "wakeLock"
        "instructions"
        "notes"
        "tags";
}

@media screen and (min-width: 576px) {
}

@media screen and (min-width: 768px) {
}

@media screen and (min-width: 992px) {
    #container_autocomplete {
        top: 68px;
    }

    .grid-template-container {
        display: grid;
        gap: 1rem;
        grid-template-columns: 8fr 4fr;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas:
            "main wakeLock"
            "main details"
            "main ingredients"
            "instructions ingredients"
            "notes ingredients"
            "tags tags";
    }

    .w-lg-50 {
        width: 50% !important;
    }
}

@media (min-width: 1200px) {
}

@media screen and (min-width: 1400px) {
}