@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%; transition: all 0.3s ease-out; z-index: 2;}
.burger{width: 3vw; right: 0; top: 0; cursor: pointer; margin: 30px 1.5vw; position: absolute;}
.burgerClose{display: block; fill: #3B3185;}
.burgerOpen{display: none;}
.links{display: none; transition: all 0.3s ease-out; text-align: right; top: 15%; right: 0; margin-right: 20%; position: absolute;}
.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;}

.back{width: 3vw; left: 0; top: 0; cursor: pointer; position: absolute; margin: 30px 1.5vw; fill:#3B3185; transition: all 0.1s ease-in;}
.back:hover{transform: scale(1.05);}
.click img{transition: all 0.1s ease; width: 30vw; cursor: pointer;}
.click img:hover{transform: scale(1.015);}

.content{display: flex; align-items: center; justify-content: center; height: 100vh;}
.click{margin: 0 5vw;}
.click p{font-family: Author-Semibold; font-size: 2vw; color:#3B3185; transform: rotate(-20deg); position: absolute; letter-spacing: 3px; margin: -4vh -4vw;
         animation: wiggleAnim 0.5s ease-in-out infinite alternate;}
@keyframes wiggleAnim {0% {transform: rotate(-20deg) scale(1); color: #3B3185;} 50% {transform: rotate(-15deg) scale(1.1); color: #c84826;} 100% {transform: rotate(-20deg) scale(1); color: #3B3185;}}
.NW{width: 25vw; margin: 0 2vw;}

.art{background-image: url(../img/bandBLAU.png); background-position: bottom left; background-repeat: no-repeat; background-size: 40vw; position: absolute; width: 100%; height: 100%; z-index: -1;}

@media screen and (max-width: 1000px){
    .back{width: 40px; margin: 20px;}
    .burger{width: 40px; margin: 20px;}
    .links{margin-right: 5%;}
    .content{flex-direction: column;}
    .click{margin: 20px 0;}
    .click p{font-size: 5vw;}
    .click img{width: 30vh;}
    .NW{width: 25vh; margin: 20px 0;}
    .art{background-size: 60vw;}
    a{font-size: 30px;}
}