@font-face {
    font-family: 'Tangerine';
    src: url('../assets/fonts/Tangerine-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: 'Tangerine';
    src: url('../assets/fonts/Tangerine-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'The Scientist';
    src: url('../assets/fonts/TheScientist-L3EyW.ttf');
}

:root {
    --peony-lightgrey: rgb(225, 214, 214);
    --peony-pink: rgb(126, 107, 107);
    --peony-pink-dark: rgb(66, 55, 55);
    --peony-pink-alarm: rgb(179, 72, 72);
    --peony-pink-complement: #109BB1;
    --hex-rounded-svg: path("M172.871,0a28.906,28.906,0,0,1,25.009,14.412L245.805,97.1a28.906,28.906,0,0,1,0,28.989L197.88,208.784A28.906,28.906,0,0,1,172.871,223.2H76.831a28.906,28.906,0,0,1-25.009-14.412L3.9,126.092A28.906,28.906,0,0,1,3.9,97.1L51.821,14.412A28.906,28.906,0,0,1,76.831,0Z");
    --linear-gradient: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7));
    --low-opacity-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
}

body {
    margin: 0;
    font-size: 3em;
    text-shadow: rgba(95, 95, 95, 0.55) 0 0 15px;
}

.main-feed {
    font-family: 'Tangerine', "Brush Script MT", sans-serif;
    text-align: center;
    margin-left: 20%;
    margin-right: 20%;

    input::placeholder |input.value {
        font-family: 'Tangerine', "Brush Script MT", sans-serif;
        color: #888;
        font-style: italic;
        opacity: .8;
    }

    input::-webkit-input-placeholder { /* Safari ≤ 12, old Chrome/Edge */
        font-family: 'Tangerine', "Brush Script MT", sans-serif;
        color: #888;
        font-style: italic;
        opacity: .8;
    }

    input:-ms-input-placeholder { /* IE 10‑11, Edge‑HTML 12‑18 */
        font-family: 'Tangerine', "Brush Script MT", sans-serif;
        color: #888;
        font-style: italic;
        opacity: .8;
    }
}

.main-feed > div {
    margin-top: 1em;
    opacity: 0; /* start invisible */
    transform: translateY(0.5em); /* slight slide down */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.main-feed > div.visibleFaded {
    opacity: 1;
    transform: translateY(0);
}

.main-feed > div:nth-child(2n-1) {
    background-color: var(--peony-lightgrey);
    border-radius: 0.5em;
    box-shadow: rgba(95, 95, 95, 0.55) 0 0 15px;
    padding: 0.3em;
}

.main-login {
    font-family: 'Tangerine', "Brush Script MT", sans-serif;
}

.main-admin {
    font-family: sans-serif;
}

*[id="heading"] {
    font-family: 'Tangerine', "Brush Script MT", sans-serif;
    text-align: center;
    min-height: 14em;

    img {
        width: 7em;
        height: 7em;
        padding-top: 1.5em;
    }

    h4 {
        padding-bottom: 1em;
    }
}

.main-feed .googleMapsAddressBlock {
    display: flex;
    flex-flow: row nowrap;

    .content {
        flex: 2;
        flex-direction: column;
        display: flex;
        padding-left: 0.8em;
        padding-right: 0.8em;
        height: inherit;
        text-align: center;
    }

    .sub-content {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .sub-content:first-child {
        align-content: center;
        /*font-size: 120%;*/
        padding-top: 0.3em;
    }

    .sub-content:last-child {
        align-content: end;
        font-size: 90%;
        opacity: 80%;
        margin-bottom: 0;
    }
}

.main-feed .googleMapsAddressBlock .mapframe {
    width: 9em;
    min-height: 6em;
    border-radius: 0.5em;
}

.main-feed *[id="painterXiDing"] {
    background-image: var(--low-opacity-image), url('../assets/img/ja_scetch.jpg');
    background-size: cover;
    background-position: center;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-color: white !important;
    border-radius: 0.5em;

    color: white !important;
    font-weight: bold;
    font-size: 130%;
    text-shadow: rgb(0, 0, 0) 0 0 10px;
}

.main-feed *[id="painterXiDing"] .content-linked {
    padding-top: 8em;
}

.main-feed *[id="fotoUpload"] > * {
    display: flex;
    flex-flow: row nowrap;

    .content {
        margin: 0 1.5em;
        align-content: center;
    }
}

.main-feed .image-border {
    border-radius: 0.5em;
    margin: 0.2em;
    display: block;
}

.main-feed *[id="dressCode"] {
    display: flex;
    flex-flow: row nowrap;

    .content {
        flex: 2;
        align-content: center;
        text-align: center;
        margin: 0 1em;
    }

    .dresscode-example-img {
        flex: 1;
        max-height: 6em;
        max-width: 6em;
    }
}

.main-feed *[id="fotoUpload"] .drive-qr-code {
    background-image: url("../assets/img/drive.google_foto_upload_qr.svg");
    background-size: cover;
    background-position: center;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-color: white !important;
    height: 5em;
    width: 5em;
    padding: 0.4em;
}

.main-feed *[id="registrationForm"] p {
    margin: 0.4em 0;
}

.main-feed *[id="registrationForm"] div[id="successMessage"] {
    color: var(--peony-pink-complement);
    margin-top: 1em;
}

.main-feed .field {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
}

.main-feed .fields-form .field:first-child {
    margin-top: 1.8em;
}

.main-feed .fields-form .field:nth-child(2)::before {
    content: "";
    width: 70%;
    height: 0.047em;
    background: var(--peony-pink-dark);
    display: block;
    border-radius: 1em;
    opacity: 0.35;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
}

.main-feed .field small {
    font-size: 0.45em;
    flex: 1;
    display: flex;
    flex-flow: row;
    margin-top: 0.2em;
}

.main-feed .field.field-created {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.main-feed .field.success :is(input,small) {
    color: var(--peony-pink-complement);
}

.main-feed .field.error :is(input,small) {
    color: var(--peony-pink-alarm);
}

.main-feed .field :is(input,button) {
    font-family: 'Tangerine', "Brush Script MT", sans-serif;
    font-size: 0.65em;
    text-align: center;
}

.main-feed .field input[type=text] {
    min-width: 20em;
    border-radius: 0.4em;
}

.main-feed .field input[type=password] {
    min-width: 20em;
    border-radius: 0.4em;
}

.main-feed .field :is(input[type=submit],button) {
    border-radius: 0.6em;
    border-color: var(--peony-lightgrey);
    background: none;
}

*[id="imprint"] {
    font-family: 'Tangerine', "Brush Script MT", sans-serif;
    font-size: 0.7em;
    opacity: 0.7;

    a {
        color: black;
        text-decoration: none;
    }
}

.content-linked {
    text-decoration: none;
    color: black;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

.invert-color {
    color: white;
}

.content-linked:active {
    border: none;
}

.content-linked:focus {
    border: none;
}

.multilineheaders {
    h1:has(+ h2) {
        margin-bottom: -0.75em;

        + h2 {
            opacity: 70%;
        }
    }

    h1:has(+ h3) {
        margin-bottom: -0.75em;

        + h3 {
            opacity: 70%;
        }
    }

    h1:has(+ h4) {
        margin-bottom: -0.8em;

        + h4 {
            opacity: 70%;
        }
    }

    h2:has(+ h3) {
        margin-bottom: -0.6em;

        + h3 {
            opacity: 70%;
        }
    }

    h2:has(+ h4) {
        margin-bottom: -0.7em;

        + h4 {
            opacity: 70%;
        }
    }
}