@font-face {font-family: Author-Medium; src: url(../font/Author-Medium.otf);}
@font-face {font-family: Author-Semibold; src: url(../font/Author-Semibold.otf);}

*{margin: 0; box-sizing: border-box; user-select: none;}
body{overflow: hidden;}
body::before {background-image: url(../img/noise.png); content: ''; height: 300%; left: -50%; opacity: 0.6; position: fixed; top: -100%; width: 300%; z-index: -9;}

.nav{position: absolute; right: 0; height: 100%; width: 6.1%; background-color: #3B3185; transition: all 0.2s ease; z-index: 3;}
h1{font-family: Author-Semibold; font-size: 10vw; color:#3B3185; text-align: right; margin: 50px 10vw 0 0; line-height: 10vw; position: absolute; right: 0; z-index: 2; letter-spacing: 30px; transform: translateX(20px);}
.date{font-family: Author-Medium; font-size: 2vw; color:#3B3185; text-align: right; margin: 35vw 10vw 0 0; line-height: 3vw; position: absolute; right: 0; z-index: 2;}
.interact{display: flex; flex-direction: column; position: absolute; top: 35%; left: 5%;}
.what{font-family: Author-Medium; font-size: 40px; color:#3B3185; text-align: left; margin: 0; line-height: 50px; z-index: 2;}
h3{margin-top: 50px; z-index: 2; letter-spacing: 2px;}
h3 a{font-family: Author-Semibold; font-size: 35px; color: white; background-color: #3B3185; border-radius: 25px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.1s ease; letter-spacing: 2px;}
h3 a:hover{font-size: 35.5px;}
h3 a:active{animation: uWu 30s infinite alternate; animation-delay: 5s;}
@keyframes uWu {0% {background-color: #C84826;}20% {background-color: rgb(147, 27, 147);}40% {background-color: rgb(30, 30, 184);}
60% {background-color: rgb(26, 194, 194);}80% {background-color: rgb(31, 177, 39);}100% {background-color: #C84826;}}
.art{background-image: url(../img/lieferband_art.png); background-position: center; background-repeat: no-repeat; background-size: 80vw; position: absolute; width: 100%; height: 100%; z-index: 1;}
.burger{width: 3vw; right: 0; top: 0; cursor: pointer; position: absolute; margin: 30px 1.5vw;}
.burgerClose{display: block; fill: white;}
.burgerOpen{display: none;}
.links{display: none; transition: all 0.3s ease-out; position: absolute; text-align: right; top: 15%; right: 0; margin-right: 20%;}
.change.links{display: flex; flex-direction: column;}
a{font-family: Author-Medium; font-size: 40px; color: white; text-decoration: none; margin-top: 75px;}
span{background-color:white; width: 400px; height: 7px; margin-top: 10px; border-bottom-left-radius: 10px; transition: 0.1s ease-out; opacity: 0;}
.b-stripe{bottom: 0; position: absolute; width: 100%; z-index: 0;}

@media screen and (max-width: 1200px){
    .art{background-position: -15vw 10vh; background-size: 1200px;}
    .date{margin: 40vw 12vw 0 0;}
    h1{transform: translateX(0);}
}

@media screen and (max-width: 1200px) and (max-height: 800px){
    .interact {margin-top: 20vh !important;}
}

@media screen and (max-height: 600px){
    h1{font-size: 7vw; line-height: 7vw;}
    .date{margin: 26vw 10vw 0 0; }
}

@media screen and (max-width: 550px){
    .b-stripe{display: none;}
    .date{display: none;}
    .burger{width: 15vw; margin: 0; background-color: #3B3185; padding: 15px; border-bottom-left-radius: 20px;}
    .burgerClose{fill: white;}
    .art{background-size: 150vw; background-position: -45vw 35vh;}
    h1{margin: 12vh 8vw 0 0; font-size: 20vw; line-height: 20vw; letter-spacing: 15px;}
    .interact{margin: 12vh 0 0 38vw;}
    .what{font-size: 5vw; line-height: 7vw; text-align: right;}
    h3 a{font-size: 4vw; padding: 4vw; border-radius: 15px;}
    h3 a:hover{font-size: 4vw;}
    h3{margin-top: 25px;}
    .links{margin-right: 5%;}
    a{font-size: 30px;}
}