:root {
    --background: #efefef;
    --font: #101010;
    --pink: #eb518d;
    --rosa: #FFB5F2;
    --alt: #ffcff7;
    --rose: rgb(182, 0, 127);
    --gray: #757575;
    --whatsapp: #25d366;
    --whatsapp-hover: #008330;
    --telegram: #0088cc;
    --telegram-hover: #0012af;
}


/* --------- Webkit Variables ------------- */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--alt) inset !important;
}
::-webkit-scrollbar{
    background: var(--gray);
    width: .5em;
}
::-webkit-scrollbar-track{
    background: var(--gray);
}
::-webkit-scrollbar-thumb{
    background: var(--pink);
    border: solid .1em var(--font);
    border-radius: .5em;
}


/* ------------ General Settings ------------ */

body {
    background-image: url("/static/images/bannerBright2.jpg");
    background-size: 100%;
    margin: 0%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a {
    text-decoration: none;
    background-color: var(--alt);
    transition: .4s ease-in-out;
    border-radius: 2em;
    padding: .25em;
    color: var(--font);
}
a:hover {
    text-decoration: none;
    color: initial;
    background-color: var(--pink);
}
.content{
    padding: 2em;
    align-items: center;
    text-align: center;
}
.innercontent {
    align-items: center;
    text-align: center;
}
.alert{
    font-size: 12px;
    color: red;
}
.msg{
    font-size: 12px;
    color: var(--whatsapp);
}


/*----------- Navbar and Footer ------------------ */

#headerlogo {
    width: 175px;
    text-align: center;
}
#headerlogo:hover {
    width: 175px;
    text-align: center;
}
#homelink{
    background: transparent;
}
.header {
    margin-top: 0;
    padding-right: .5em;
    padding-left: .5em;
    background: var(--alt);
    border-bottom: solid;
    border-color: var(--pink);
    position: sticky;
    top: 0em;
    text-align: center;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
    justify-content: center;
	align-items: center;
    z-index: 1;
}
nav{
    transform: translateY(1em) translateX(1em);
    z-index: 1;
}
nav ul{
    margin-left: 0;
    padding: 0;
    list-style: none;
    display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
#navlist {
    transform: translateX(-0.25em);
}
nav ul li{
    display: block;
    padding: 0.75em;
}
nav ul li a{
    height: 5em;
    font-size: 5ex;
    color: var(--font);
    background-color: var(--alt);
    font-family: 'New Berolina', cursive;
    font-weight: bold;
}
.navbtn{
    visibility: hidden;
    margin-right: 1em;
    transform: translateX(-1em);
    height: 0;
    width: 0;
}
.left-chandelier{
    transform: translateX(-5em);
    margin-right: 1em;
    width: 15em;
}
.right-chandelier{
    transform: translateX(5em);
    margin-left: 1em;
    width: 15em;
    z-index: 0;
}
footer {
    background-color: var(--pink);
    margin-top: auto;
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    padding: 0;
    padding-top: 1em;
    padding-bottom: 0;
}
footer ul {
    margin: auto;
    padding: 0;
}
.footerlink {
    background: none;
    color: var(--background);
}
.categorylink{
    background: none;
    color: var(--font);
}
.footerlink:hover{
    text-decoration: underline;
    background: none;
    color: var(--background);
}
.copyright{
    margin-top: 1.5em;
    margin-left: 46%;
    margin-right: 46%;
    font-size: 12px;
    padding: 0;
    color: var(--background);
}

.footer-col {
    width: 33%;
    padding-left: 12.5%;
    margin-bottom: .5em;
}
.internal-link {
    background: none;
    color: var(--font);
    transition: all .3s;
}
.internal-link:hover{
    background: none;
    text-decoration: underline;
}


/* -------------- Content ----------------- */

.cookie-banner{
    padding: 1em;
    background-color: var(--gray);
    text-align: center;
    z-index: 999 !important;
    position: sticky;
    top: 0;
}
.cookie-btn {
    background-color: var(--alt);
    font: var(--font);
    border: .1em solid var(--font);
    margin-top: .5em;
    border-radius: .5em;
}
.cookie-btn:hover {
    background-color: var(--pink);
}


/* -------------- Content ----------------- */

.mainbox {
    margin: 3%;
    background-color: rgba(255, 255, 255, 0.75);
    padding: 1em;
    border: 0.1em solid var(--font);
    flex: 1;
}
h1 {
    text-align: center;
    font-family: 'New Berolina', cursive;
    font-size: 350%;
    font-weight: bold;
    color: var(--pink);
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    text-align: center;
}
.picture{
    border-radius: 100em;
    width: 15em;
}
.indexref {
    background: none;
    color: var(--font);
    text-decoration: underline;
}
.indexref:hover {
    background: none;
    text-decoration: underline;
    color: var(--pink);
}
.contact-links{
    font-size: 1.25em;
}


/* ------------ Contact ------------------ */

.contactpage {
    align-items: center;
    padding: 1em;
    text-align: center;
}
.whatsapp{
    display: table; 
    font-family: sans-serif; 
    text-decoration: none; 
    margin: 1em auto; 
    color: var(--background); 
    font-size: 0.9em; 
    padding: 1em 2em 1em 3.5em; 
    border-radius: 2em; 
    font-weight: bold; 
    background: var(--whatsapp) url('/static/images/whatsapp.png') no-repeat 1.5em center;
    background-size: 2em;
}
.whatsapp:hover{
    background-color: var(--whatsapp-hover);
    color: var(--background)
}
.telegram{
    display: table; 
    font-family: sans-serif; 
    text-decoration: none; 
    margin: 1em auto; 
    color: var(--background); 
    font-size: 0.9em; 
    padding: 1em 2em 1em 3.5em; 
    border-radius: 2em; 
    font-weight: bold; 
    background: var(--telegram) url('/static/images/telegram.svg') no-repeat 1.5em center;
    background-size: 1.6em;
}
.telegram:hover{
    background: var(--telegram-hover) url('/static/images/telegram.svg') no-repeat 1.5em center;
    background-size: 1.6em;
    color: var(--background);
}
.telefon, .telefon-imprint{
    display: table; 
    font-family: sans-serif; 
    text-decoration: none; 
    margin: 1em auto; 
    color: var(--font); 
    font-size: 0.9em; 
    padding: 1em 2em 1em 3.5em; 
    border-radius: 2em; 
    font-weight: bold; 
    background: var(--alt) url('/static/images/telefon.svg') no-repeat 1.5em center;
    background-size: 1.6em;
}
.telefon:hover{
    background: var(--pink) url('/static/images/telefon.svg') no-repeat 1.5em center;
    background-size: 1.6em;
}


/* ------------ Imprint ------------------ */

.impressum{
    text-align: left;
}
.imprintlinks{
    background: none;
    text-decoration: underline;
    color: var(--font);
}
.imprintlinks:hover{
    background: none;
    color: var(--font);
}
.credits{
    font-size: 1em;
}
.nolink{
    background: none;
}
.nolink:hover{
    background: none;
}
.submit{
    color: var(--font);
    font-family: 'New Berolina', cursive;
    border: none;
    font-size: 200%;
    font-weight: bold;
    padding-right: 1%;
    padding-left: 1%;
    background: var(--rosa);
    border-radius: 2em;
    transition: .4s;
}


/* ------------ 1600 width ------------------ */

@media screen and (max-width: 1600px) {
    .left-chandelier {
        width: 15em;
        transform: translateX(.5em);
    }
    .right-chandelier {
        width: 15em;
        transform: translateX(-.5em);
    }
}


/* ------------ 1300 width ------------------ */

@media screen and (max-width: 1300px) {
    h1{
        font-size: 4em;
    }
    .copyright {
        font-size: 1.5em;
    }
    p {
        font-size: 1em;
    }
    .footerlink {
        font-size: 1.25em;
    }
    .header{
        background-color: var(--alt);
    }
    nav{
        margin-bottom: 2em;
    }
    nav ul{
        display: block;
    }
    nav ul li{
        transform: scale(0.9,0.9);
        text-align: left;
    }
    .navbtn{
        visibility: inherit;
        font-family: 'New Berolina', cursive;
        font-size: 4em;
        font-weight: bold;
        color: var(--font);
        background: var(--alt) no-repeat 1.5em center;
        background-size: 1.5em;
    }
    .navbtn:hover{
        background: var(--pink);
        color: var(--font);
        cursor: pointer;
    }
    #headerlogo{
        visibility: hidden;
    }
    .headerlink {
        font-size: 3em;
    }
    .left-chandelier{
        transform: translate(-6em, 0em);
        margin-right: 0em;
        width: 10em;
    }
    .right-chandelier{
        transform: translate(6em, 0em);
        margin-left: 0em;
        width: 10em;
        z-index: 0;
    }
    .left-chandelier-up{
        transform: translate(-5.75em, -12.05em);
        margin-right: 0em;
        width: 10em;
    }
    .right-chandelier-up{
        transform: translate(6.25em, -12.05em);
        margin-left: 0em;
        width: 10em;
        z-index: 0;
    }
    .whatsapp{
        font-size: 1em; 
    }
    .telegram{
        font-size: 1em;
    }
    .telefon{
        font-size: 1em; 
    }
    .telefon-imprint{
        font-size: 1em;
    }
    .mail-imprint{
        font-size: 1em;
    }
    .submit { 
        font-size: 4em;
        margin-bottom: 2em;
    }
    #home-element {
        height: 0;
        padding: 0;
    }
    .copyright {
        font-size: 0.7em;
    }
}


/* ------------ 1085 width ------------------ */

@media screen and (max-width: 1085px) {
    .telefon-imprint{
        font-size: 0.9em;
    }
}


/* ------------ 1085 width ------------------ */

@media screen and (max-width: 1015px) {
    .left-chandelier{
        width: 55pt;
        transform: translate(-7.5em, -1.2em);
    }
    .right-chandelier{
        width: 55pt;
        transform: translate(7.5em, -1.2em);
    }
    .left-chandelier-up{
        width: 55pt;
        transform: translate(-7.5em, -14.95em);
    }
    .right-chandelier-up{
        width: 55pt;
        transform: translate(7.5em, -14.95em);
    }
    .navbtn{
        font-size: 40pt;
    }
    .headerlink {
        font-size: 35pt;
    }
}


/* ------------ 900 width ------------------ */

@media screen and (max-width: 900px) {
    p {
        font-size: larger;
    }
    .left-chandelier{
        width: 45pt;
        transform: translate(-1em, -0.5em);
    }
    .right-chandelier{
        width: 45pt;
        transform: translate(1em, -0.5em);
    }
    .footer-col{
        padding-left: .5em;
    }
    footer > div > ul{
        margin-bottom: .5em;
    }

}


/* ------------ 630 width ------------------ */

@media screen and (max-width: 630px) {
    .left-chandelier{
        width: 45pt;
        transform: translate(-1em, -0.5em);
    }
    .right-chandelier{
        width: 45pt;
        transform: translate(1em, -0.5em);
    }
    nav{
        margin-bottom: 2em;
    }
    .navbtn{
        font-size: 30px;
    }
    h1 {
        font-size: 40pt;
    }
    .headerlink {
        font-size: 1em;
    }
    .copyright {
        font-size: 0.7em;
    }
}


/* ------------ 400 width ------------------ */

@media screen and (max-width: 400px) {
    .navbtn {
        font-size: 3em;
    } 
    .headerlink {
        font-size: 2em;
    }
    .left-chandelier{
        width: 0;
        visibility: hidden;
    }
    .right-chandelier{
        width: 0;
        visibility: hidden;
    }
    .telegram{
        font-size: 1em; 
    }
    .telefon, .telefon-imprint{
        font-size: 1em; 
    }
    .whatsapp{ 
        font-size: 1em; 
    }
    .footerlink{
        font-size: 1em;
    }
    #navlist {
        text-align: left;
    }
    body{
        margin: 0;
        padding: 0;
        width: 100%;
    } 
}