@font-face {
    font-family: "Bungee";
    src: url("/fonts/Bungee-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Roboto";
    src: url("/fonts/Roboto-Light-webfont.ttf") format("truetype");
}

@font-face {
    font-family: "RobotoThick";
    src: url("/fonts/Roboto-VariableFont_wdth,wght.ttf") format("truetype");
}

@font-face {
    font-family: "Colombo";
    src: url("/fonts/postnobillscolombo-light.ttf") format("truetype");
}

body {
    font-family: "Roboto";
    font-size: xx-large;
    color: rgb(224 206 255);
    background-color: rgb(0, 0, 0);
}

#background {
    width: 100vw;
    height: 115vh;
    position: relative;
    object-fit: cover;
    z-index: 1;
}

#logo {
    width: 45%;
    height: auto;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 2;
}

#frontContainer {
    margin-top: -36vh;
    padding: 0%;

}

#mobileFrontpage {
    display: none;
}

#frontpage {
    position: relative;
    margin-top: 0%;
    margin-bottom: 0%;
    width: 100vw;
    height: auto;
}

#ticketLink {
    position: absolute;
    left: 32%;
    top: 0%;
    width: 36%;
    height: 10.5%;
}

#instaLink {
    position: absolute;
    left: 30%;
    top: 24%;
    width: 10%;
    height: 14%;
}

.oben #SchonMalWasLeuchtendesGegessen {
    /* margin-top: calc(var(--image-offset, 0px)); */
    margin-top: -25.5vh;
    text-align: center;
    position: relative;
    z-index: 2;
}

.oben #voll {
    width: 55vw;
    height: auto;
}

.oben #pierog {
    object-fit: cover;
    width: 100vw;
    height: 65vh;
}

.oben {
    text-align: center;
    padding: 5px;
}

.oben img {
    width: auto;
    height: 50vh;
}

#bloecke .h1 {
    font-family: 'Bungee';
    font-size: 200%;
    margin-top: 0%;
}

.links {
    display: flex;
    align-items: flex-start;
    padding-left: 0px;
    gap: 15px;
}

.links img {
    object-fit: contain;
    max-width: 45vw;
    height: auto;
}

.rechts {
    text-align: right;
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    padding-right: 0px;
    gap: 15px;
}

.rechts img {
    object-fit: contain;
    max-width: 45vw;
    height: auto;
}

#slideCSS img {
    object-fit: cover;
    width: 60vw;
    height: 70vh;
}

#newsletter {
    display: flex;
    justify-content: center;
    align-items: center;
}

#newsletter input {
    font-size: 1em;
    font-family: Roboto;
    padding: 4px;
    color: white;
    height: 1.4em;
    background-color: transparent;
    border-radius: 12px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
}

#newsletter input:focus {
  outline: 2px solid #00FF00;
  border-radius: 12px;
  outline-offset: -2px;
}

#newsletter button {
    font-family: Colombo;
    font-size: 1.2em;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border-radius: 12px;
    border-color: #00FF00;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2vw;
}