*{margin:0;padding:0;outline:0 none;text-decoration:none;color:rgba(225,225,225,1);cursor:url(mouse.png),auto;}
body, html{width:100%;height:100%;background-color:rgba(225,0,0,0)}
html{background: url(bg2-rgb.jpg) no-repeat fixed center center / cover;
}
{
}
h1{
/*font-family: 'Cabin Sketch', cursive;*/
font-family:'nes_controller', 'Finger Paint';
font-size:100px;
text-align:center;
line-height: 51px;
margin-top:30px;
}
h1 span{
letter-spacing:-15px;
font-size:150px;}
h2{
font-family: 'Cabin Sketch', cursive;
font-size:50px;
text-align:center;
margin-bottom:20px;
}
h2 span{
font-family:'nes_controller';
letter-spacing:0px;
font-size:55px;
}
h3{
font-family: 'Cabin Sketch', cursive;
font-size:30px;
text-align:center;
margin-bottom:20px;
}
p{font-family: 'Poiret One', cursive;margin-bottom:20px;}
input{color:#000; width:10%; margin-left:45%; min-width:70px}
a{font-family: 'Poiret One', cursive;}
header{position:relative;height:100%;width: 100%;
float:left;}
header.imp{
height:0%;
animation-name:implogo;
animation-duration:5s;
}
#implogo2{
opacity:1;
position:absolute;
top:0px;
right:10px;
animation-name:implogo2;
animation-duration:8s;
}
#logo{
background: url(bg2-rgb-lg.jpg) no-repeat fixed center center / cover;
position:absolute;
left:25%;
top:25%;
width:50%;
height:auto;
min-height: 200px;
}
.mob{
animation-name:implogo3;
animation-duration:10s;
}
content{
position:relative;
height:auto;
min-height:85%;
width:100%;
background: url(bg2.jpg) no-repeat fixed center center / cover;
padding-top:15%;
float:left;
overflow:hidden;
}
content p{
text-align:center;
letter-spacing:1.5;
margin:30px;
}
#picture{ /*Main*/
position: relative;
width: 25%;
left: 35.5%;
border: 10px solid #D3D3D3;
border-bottom: 60px solid #D3D3D3;
margin-top : 50px;
margin-bottom: 50px;
box-shadow: 10px 10px 40px #000;
border-radius: 0 0 2px 2px;
transition:2s
}
#picture:active{
border: 0px;
left: 5%;
width: 90%;
transition:1s
}
/**/ .pic::after{content:"Juni 2025";color:#000;position:relative;font-family: 'Rock Salt', cursive;}
.pic::after{top:-130px;left:-2%}
#line{
position:absolute;
height:1px;
width:80%;
left:10%;
}
#line2{
position:absolute;
height:1px;
width:100%;
}
#line, #line2{
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 75%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 75%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
#contact{margin:32px; margin-top:70px}
#contact p{font-size:30px}
#copyright{
position:absolute;
bottom:10px;
width:100%;
color:#5d5d5d;
text-align:center
}
#linkintern{
position:absolute;
bottom:10px;
width:100%;
color:#5d5d5d;
text-align:center;
cursor: no-drop
}
#mail:hover{color:rgb(225,225,0)}
#imp{text-align:center}
#imp:hover{color:rgb(225,225,0)}
footer{
position:relative;
background:#00192B;
height:300px;
width:100%;
box-shadow: inset 0 10px 20px #000, inset 0 -3px 7px #000;
float:left
}
#watermark{
position:absolute;
width:50%;
max-width:500px;
height:auto;
right:0px;
top:0
}
#watermark img{
width:100%;
}
#button{
position:absolute;
width:260px;
right:50px;
bottom:50px;
transition:1s
}
#download{float:left}
#datenschutz{float:center}
#impressum{float:right}
#button:hover{
transition:1s
}
@font-face{font-family: 'nes_controller'; src: url('nes_controller.ttf') format('truetype')}
/*--------------KEYFRAMES------------*/
@keyframes implogo {
from {height:100%;}
to {height:0%;}
}
@keyframes implogo2 {
0% {opacity:0;}
50%{opacity:0;}
100% {opacity:1;}
}
/*--------------MEDIA QUERYS------------*/
@media only screen and (max-width: 900px){
content{background:rgba(0,0,0,.5)}
#logo{
background:rgba(225,225,225,.3);
}
.mob{opacity:0;}
@keyframes implogo3 {
0% {opacity:1;}
50%{opacity:0;}
}
#implogo2{display:none}
#picture{ /*Main*/
width: 50%;
left: 25%;
}
}
@media only screen and (max-width: 785px){
h1{
font-size:70px;
}
h1 span{
letter-spacing:-10px;
font-size:100px;
}
h2{
font-size:40px;
}
h3{
font-size:30px;
}
#picture{
width:80%;
left:7%;
border: 10px solid #D3D3D3;
border-bottom: 60px solid #D3D3D3;
box-shadow: 10px 10px 40px #000;
border-radius: 0 0 2px 2px;
transition:2s
}
#picture:active{
border: 10px solid #D3D3D3;
border-bottom: 60px solid #D3D3D3;
left:7%;
width:80%;
transition:2s
}
#picture:hover{
border: 0px;
left: 0%;
width:100%;
transition:.5s
}
}
@media only screen and (max-width: 530px){
h1{
font-size:45px;
}
h1 span{
letter-spacing:-6px;
font-size:70px;
}
h2{
font-size:35px;
}
h3{
font-size:28px;
}
#contact p{font-size:20px}
#button{
position:absolute;
width:60%;
right:20%;
bottom:50px
}
#button:hover{
width:80%;
right:10%;
}
}
@media only screen and (max-width: 365px){
h1{
font-size:35px;
}
h1 span{
letter-spacing:-3px;
font-size:45px;
}
h2{
font-size:30px;
}
h3{
font-size:25px;
}
}