@font-face {
    font-family: BebasNeue;
    src: url("/font/BebasNeue.ttf");
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: black;
}

a{
    color: #ff9000;
}

a:hover{
    color: #ff9000;
}

#main{
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Raleway', sans-serif;
    background-image: url("/img/barcelona_brunnen_blur.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#content {
    margin: 0 auto;
    position: absolute;
    top: 10em;
    left: 0;
    right: 0;
    width: 40%;
    background-color: white;
    border: 1px solid #ff9000;
    border-radius: 2px;
}

#content h1{
    text-align: center;
    margin: 0.1em 0 0 0;
    font-size: 4em;
    font-family: BebasNeue, sans-serif;
}

#portrait{
    position: relative;
    width: 30%;
    float: left;
}

#vorname{
    color: #ff9000;
}

#content p{
    text-align: center;
}

#kontakt{
    text-align: center;
}

.social_icon{
    width: 2.25em;
    margin: 0 auto 0.05em;
}

#kontakt .col :hover > img{
    filter: drop-shadow(0px 0px 2px black);
}

#kontakt .col a{
    color: #ff9000;
}

#kontakt .col a:hover{
    text-decoration: none;
}

#footer{
    position: absolute;
    bottom: 1px;
    text-align: center;
    width: 100%;
    font-size: 0.75em;
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -3000px, 0);
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        -webkit-transform: translate3d(0, 25px, 0);
        transform: translate3d(0, 25px, 0);
    }

    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0);
    }

    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0);
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}