:root{
    --main-bright: #a3afbb;
    --main-dark: black;
    overflow-x: hidden;
}

html {
    background-color: var(--main-dark);
    font-family: Arial, sans-serif;
    color: var(--main-dark);
    -webkit-text-stroke: 0.3vw var(--main-dark);
}
.element-container {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-wrap: none;
}
.bordered {
   margin: 50px;
   margin-top: -4.1vw;
   margin-bottom: -4.1vw;
}

.programm {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1 {
    font-size: 6vw;
    padding: 0.7vw;
    padding-right: 0;
    background-color: var(--main-bright);
    width: 100%;
    border-radius: 1.5vw;
}

.figur {
    display: flex;
    justify-content: center;
    height: 45vw;
}



.logos > img {
    height: 8vw;
}

.date {
    position: absolute;
    right: 10px;
    top: 10px;
}
.date > h2 {
    font-size: 2.5vw;
    color: white;
    -webkit-text-stroke: 0.2vw white;
}



.right {
    justify-content: right;
}
.right > .bordered >  h1 {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
.left {
    justify-content: left;
}
.left > .bordered >  h1 {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.left > .border-inverted {
    height: 80%;
    width: 200%;
    margin-top: -4.000vw;
    margin-bottom: -4.0001vw;
}
.left > .border-inverted > h1 {
    margin-left: -5vw;
    border-top-left-radius: 1.5vw;
    border-bottom-left-radius: 1.5vw;
    background-color: var(--main-dark);
}

.right > .border-inverted {
    height: 80%;
    width: 100%;
    margin-top: -4.1vw;
    margin-bottom: -4.01vw;
    z-index: 1;
}
.right > .border-inverted > h1 {
    margin-left: 5vw;
    border-top-right-radius: 1.5vw;
    border-bottom-right-radius: 1.5vw;
    background-color: var(--main-dark);
}


.panty-paradise > .bordered > h1 {
    width: 70vw;
    text-align: right;
    padding-right: 2vw;
    margin-top: 20vw;
}
.panty-paradise .border-inverted  > h1 {
    border-top-right-radius: 0;
    margin-top: 20vw;
}



.dj-handplant  {
    display: flex;
    
    flex-wrap: none;
}

.dj-handplant > .bordered > h1 {
    width: 45vw;
}

.feat {
    font-size: 4vw;
    -webkit-text-stroke: 0.4vw var(--main-dark);
}

.sendling-allstarz > .bordered > h1 {
    width: 60vw;
    text-align: right;
    padding-right: 2vw;

}

.anna-butter .bordered > h1 {
    margin-right: 30vw;
}

.mol .bordered > h1 {
    width: 50vw;
    text-align: right;
    padding-right: 2vw;
}
.ebow .bordered > h1 {
    margin-right: 40vw;
}

.packed-rich .bordered .top {
    margin-bottom: -5vw;
    border-bottom-right-radius: 0;
    padding-right: 2vw;
}

.packed-rich .bordered .bottom {
    border-top-right-radius: 0;
    padding-right: 2vw;
}

.packed-rich .bordered {
    width: 50vw;
    text-align: right;
    padding-right: 2vw;
}

.packed-rich .border-inverted {

    width: 50vw;
    margin-right: 0vw;
    margin-left: -10vw;
}

.packed-rich .border-inverted .top {
    margin-bottom: -5vw;
    border-bottom-right-radius: 0;
}


.packed-rich .border-inverted .bottom {
    border-top-right-radius: 0;
}
.hnrk .bordered {
    width: 300vw;
}

.dopplereffekt .bordered {
    width: 100vw;
    text-align: right;
    padding-right: 2vw;
}
.dopplereffekt .bordered > h1 {
    padding-right: 2vw;
}

.tin-man .bordered {
    width: 90vw;
}

.tin-man .border-inverted {
    width: 70vw;
}

.iso-e-super .bordered {
    width: 120vw;
    text-align: right;
    padding-right: 2vw;
}

.iso-e-super .bordered > h1 {
    padding-right: 2vw;
}

.cosmic-surprise-union .border-inverted {
    width: 10vw;
    margin-left: -5vw;
}
.cosmic-surprise-union .bordered {
    width: 100vw;
}
.bdb .bordered {
    width: 100vw;
    text-align: right;
}

.bdb .bordered > h1 {
    padding-right: 2vw;
}

.friends-of-gas .bordered {
    width: 100vw;
}

.friends-of-gas .border-inverted {
    width: 10vw;
    
}
.friends-of-gas .border-inverted > h1 {
    border-bottom-left-radius: 0;
}
.friends-of-gas .bordered {
    width: 200vw;
}

.tickets {
    display: flex;
    justify-content: center;
    margin: 3vw;
    margin-top: 6vw;
}

.tickets > a {
    font-size: 10vw;
    text-decoration: none;
    color: var(--main-dark);
    background-color: var(--main-bright);
    -webkit-text-stroke: 0.65vw var(--main-dark);
    padding: 2vw;
    border-radius: 2vw;
    transition: filter 0.3s;
}

.tickets > a:hover {
    filter: hue-rotate(90deg) invert(29%);
}

.infotext > p {
    color: white;
    font-size: 5vw;
    -webkit-text-stroke: 0.4vw white;
    text-align: center;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
}

.social-links > div {
    margin: 1.5vw;
}

.social-links a {
    color: white;
    font-size: 4vw;
    text-decoration: none;
    -webkit-text-stroke: 0;
}

.social-links  img {
    height: 3vw;
    margin-right: 1vw;
}

.title > h1 {
    padding: 1vw;
    width: 100%;

    text-align: center;
}
.title {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.title > .bordered > h1 {
    font-size: 12vw;
    text-align: center;
    padding-left: 2vw;
    padding-right: 2vw;
}

.title > .bordered > .top {
    margin-bottom: -3vw;
}

.border-inverted {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }