@import url(https://fonts.bunny.net/css?family=inter:400,500,600,700|pacifico:400);

@import "rezept-view.css";

html, spreadsheet-view-export, grid-with-filters-view-export {
    --lumo-primary-color: hsl(13, 74%, 48%);
    --lumo-primary-color-50pct: hsla(13, 74%, 48%, 0.5);
    --lumo-primary-color-10pct: hsla(13, 74%, 48%, 0.1);
    --lumo-error-color: hsl(3, 70%, 31%);
    --lumo-error-color-50pct: hsla(3, 70%, 31%, 0.5);
    --lumo-error-color-10pct: hsla(3, 70%, 31%, 0.1);
    --lumo-primary-text-color: hsl(13, 74%, 48%);
    --lumo-error-text-color: hsl(3, 70%, 31%);

    --lumo-font-family: Inter, sans-serif;
}

[theme~="dark"] {
    --lumo-primary-color: rgb(224, 0, 123);
    --lumo-primary-color-50pct: rgba(224, 0, 123, 0.7);
    --lumo-primary-color-10pct: rgba(224, 0, 123, 0.25);
    --lumo-primary-text-color: hsl(224, 27%, 64%);
}

body {
    background-color: var(--lumo-shade-5pct);
}

.font-inter {
    font-family: 'Inter', sans-serif;
}

.font-pacifico {
    font-family: 'Pacifico', cursive;
}

.text-italic {
    font-style: italic;
}

h1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Pacifico', cursive;
}

h2 {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Pacifico', cursive;
}

.rezept:hover {
    background-color: var(--lumo-contrast-5pct);
    cursor: pointer;
}

@media print {
    body {
        height: auto !important;
    }

    .main-layout {
        height: auto !important;
        display: block !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: white !important;
        box-shadow: none !important;
        color: black !important;
        overflow: visible !important;
    }

    vaadin-button {
        display: none !important;
    }
}