body {display : block;width : 100%;max-width : 1920px;padding: 0; margin: 0 auto;font-family:'font/Nunito-Regular', verdana, Helvetica, sans-serif;cursor: pointer;
background: url(bg.webp) top center no-repeat fixed;background-size : cover, cover;}

@font-face {font-family : 'font/Nunito-Regular';font-display:swap;src: local('Nunito-Regular'), local('Nunito-Regular'),url(font/Nunito-Regular.woff2) format('woff2'), url(font/Nunito-Regular.woff2.woff) format('woff');}

@font-face {font-family : 'font/Nunito-Bold';font-display:swap;src: local('Nunito-Bold'), local('Nunito-Bold'), url(font/Nunito-Bold.woff2) format('woff2'), url(font/Nunito-Bold.woff2.woff) format('woff');}

@font-face {font-family : 'font/Nunito-ExtraBold';font-display:swap;src: local('Nunito-ExtraBold'), local('Nunito-ExtraBold'), url(font/Nunito-ExtraBold.woff2) format('woff2'), url(font/Nunito-ExtraBold.woff2.woff) format('woff');}

html {scroll-behavior : smooth;}
header {display : block;text-align : center;}
* {box-sizing : border-box;}
  
img {text-decoration: none;border:none;} 
a {color:black;text-decoration: none; border: none;padding: 0;}
section {display:none;opacity:0;margin:100% auto 0 auto;font-size:0.5em;}

.haeins {font-family : 'font/Nunito-ExtraBold';color : white; margin : 0 auto; font-size: 2em; line-height : 1.2em; text-align : center; text-shadow : 0 2px 3px rgb(0, 0, 0, 1);}

.text {display: block;position: relative; top: 3em; left:50%;transform: translate(-50%, 0%);margin: 0 auto;text-align : center; width : 100%;}
.text p { margin : 0 auto; line-height : 1.2em;} 
.text img.puls {margin:0 auto; width: 136px; height: 92px;}
p.start {display: block;font-family : 'font/Nunito-ExtraBold';font-size : 5em; color : #ffa204; line-height : 1em;text-shadow : 3px 3px 3px rgb(0, 0, 0, 1);} 
p.start span.beibna {display: inline-block; position: relative; bottom: -20px; left: -10px; background: url(logo.png) no-repeat;width: 200px; height: 80px;}

@media (max-width: 430px) {
  p.start span.beibna {bottom: 0; left: 0;}
}

.vonoben {animation : vonoben 1s 0s ease 1 normal forwards;}
@keyframes vonoben { 
0% {opacity : 0;transform : translateY(-30%);}
100% {opacity : 1;transform : translateY(0);} 
} 

.fadeUp {animation: fadeUp 1s 0s 1 normal forwards;}
@keyframes fadeUp{
  0%{opacity: 0;transform: translateY(30%);}
  100%{opacity: 1;transform: translateY(0); visibility: visible}
}

.puls {animation: anim-pulse 3s infinite;border-radius: 10px;margin: 0 auto 0.5em auto;}
@keyframes anim-pulse {
  0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);}
  100% {box-shadow: 0 0 0 50px rgba(0, 0, 0, 0);}
}

.website {display: block; width: 70%; margin: 2em auto 5em auto; text-align : center;}

.post {display: inline-block; width: 40%; margin : 0.5em; border-radius: 8px; transition : all 0.4s ease-in-out;}
.post-link {display: flex; justify-content: center; position : relative; overflow : hidden; border-radius: 8px; border: solid white 8px; box-shadow : 0px 8px 25px -5px rgba(0, 0, 0, 1);}
.post-link img {display:block; position : relative; overflow : hidden; width: 100%;max-width: 500px; transition : all 0.3s ease-in-out;}
.post:hover img {transform : scale(1.1);}
.post-link .s {width: 0;height: 100%;background: rgba(0,0,0,0.5);position: absolute;top: 0;display: flex;justify-content: center;align-items: center;overflow: hidden; transition : all 0.4s ease-in-out;}
.post-link .s p {font-family : 'font/Nunito-Bold'; color:white; font-size: 1.2rem; opacity: 0; margin: 0 auto;transition : all 0.8s ease-in-out; text-transform: uppercase;}
.post:hover .s {width: 100%;}
.post:hover .s p {opacity: 1;}

.weiter {display: table; position: relative; top: -0.5em; margin : 0 auto; font-family : 'font/Nunito-Bold'; font-size: calc(15px + 0.4vw); line-height : 1.2em; text-shadow : 0 1px 2px rgb(0, 0, 0, 0.5); box-shadow : 0px 8px 25px -5px rgba(0, 0, 0, 0.5); color : white; background : #0a7645; border-radius: 10px; text-align : center; padding : 0.4em 0.7em 0.3em 0.7em; transition: 0.3s ease-in-out;}
.post:hover .weiter {color : white; background : #c71017;box-shadow : 0px 8px 25px -5px rgba(0, 0, 0, 1);}

@media (max-width: 1000px) {
  .website {width: 90%;}
}
@media (max-width: 500px) {
.post {display : block; width : 100%; margin : 2em auto;}
}




footer {position: fixed;left: 0;bottom: 0;width: 100%;text-align: center;}
footer a {font-size: 0.5em;line-height: 1.2em;color: black;padding: 3px 7px;text-transform: uppercase;background: rgba(255, 255, 255, 0.2);-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);}