/* Stylsheet by conPassione gmbh */


@font-face {
    font-family: 'Droid Sans';
    src: url('./Fonts/DroidSans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --clr-bw-010: oklch(0.1 0 0);
    --clr-bw-020: oklch(0.2 0 0);
    --clr-bw-030: oklch(0.3 0 0);
    --clr-bw-040: oklch(0.4 0 0);
    --clr-bw-050: oklch(0.5 0 0);
    --clr-bw-060: oklch(0.6 0 0);
    --clr-bw-070: oklch(0.7 0 0);
    --clr-bw-080: oklch(0.8 0 0);
    --clr-bw-090: oklch(0.9 0 0);
    --clr-bw-100: oklch(1 0 0);
    --clr-brand-primary: #5b97bf;
}

body {
    font-family: 'Droid Sans', system-ui;
    font-size: 18px;
    line-height: 1.5;
    color: var(--clr-bw-030);
    box-sizing: border-box;
    margin: 0;
    padding: 1rem;
}

.wrapper {
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--clr-bw-080);
    max-width: 960px;
    box-shadow: 5px 5px 10px oklch(from var(--clr-bw-080) l c h / .5);
}

img {
    display: block;
    width: 100%;
    height: auto;
}

.address {
    text-align: right;
    a {
        text-decoration: none;
        color: var(--clr-brand-primary);
    }
    p > span {
        color: var(--clr-brand-primary);
    }
}


header {
    display: grid;
    grid-template-columns: minmax(380px, 1fr) 1fr;
    justify-content: space-between;
    @media (width < 760px) {
        grid-template-columns: 1fr;
    }
}

main {
    display: block;
    p {
        padding-block: 4rem 2rem;
    };
}

.logo {
    max-width: 370px;
}