@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;}

.logo{width: 3vw; left: 0; top: 0; cursor: pointer; position: absolute; margin: 30px 1.5vw; transition: all 0.1s ease;}
.logo:hover{transform: scale(1.05);}

.content {display: flex; align-items: center; justify-content: center; height: 100vh;}
.bros {display: flex; flex-wrap: wrap; justify-content: center;}
.bros a {display: flex;align-items: center;justify-content: center; margin: 1.5vw;}
.bros img{width: 15vw; transition: all 0.1s ease;}
.bros img:hover{transform: scale(1.02);}
.pfeil {max-width: 100px; margin: 0 2vw; cursor: pointer; z-index: 9; transition: all 0.1s ease;}
.pfeil:hover{transform: scale(1.05);}

.one{display: flex;}
.two{display: none;}
.three{display: none;}
.four{display: none;}

@keyframes slide-in-right {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes slide-in-left {
0% {opacity: 0;}100% {opacity: 1;}}
.slide-in-right {animation: slide-in-right 0.3s ease-in-out;}
.slide-in-left {animation: slide-in-left 0.3s ease-in-out;}

@media screen and (max-width: 1000px){
  .pfeil{max-width: 100px;}
  .bros{width: 80vw;}
  .bros img{width: 24vw;}
  .bros a{margin: 4vw 4vw;}
  .content{justify-content: space-between;}
  .logo{width: 40px; margin: 20px;}
  .burger{width: 40px; margin: 20px;}
  .links{margin-right: 5%;}
}

@media screen and (max-width: 1200px) and (max-height: 800px){
    .bros a{margin: 1vw !important;}
}

@media screen and (max-width: 500px){
  .pfeil{max-width: 50px;}
  .bros{width: 80vw;}
  .bros img{width: 28vw;}
  .bros a{margin: 6vw 2vw;}
  .content{justify-content: space-between;}
  .logo{width: 40px; margin: 20px;}
  .burger{width: 40px; margin: 20px;}
  .links{margin-right: 5%;}
  a{font-size: 30px;}
}
@media screen and (max-width: 290px){
  .bros img{width: 20vw;}
}