@import url('https://fonts.googleapis.com/css?family=Asap|Asap+Condensed:700|Roboto+Mono');

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: black;
    color: #00cef2;
    font-family: 'Asap', sans-serif;
    text-align: center;
    font-size: 16px;
}

a { color: inherit; transition: 0.5s ease; }
a:hover { color: #ffffff; transition: 0.5s ease; }

#portrait {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0%, -50%);
    padding: 5px;

    height: 200px;
    width: 200px;

    border-radius: 50%;
    /*border: 5px solid #00cef2;*/
    /*filter: grayscale(100%);*/
    transition: width 1s ease, height 1s ease;

    animation-name: fade-in;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}
#portrait:hover {
    height: 350px;
    width: 350px;
    /*filter: grayscale(0%);*/
    transition: width 1s ease, height 1s ease;
}

#name {
    font-family: 'Asap Condensed', sans-serif;
    font-size: 120px;
    line-height: 0.65;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-100%, -50%);
    padding: 5px;
    text-align: right;

    animation-name: fade-in;
    animation-delay: 0s;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}

#address {
    font-family: 'Asap Condensed', sans-serif;
    color: #ffffff;
    font-size: 40px;

    padding: 2em;
}
#address a { text-decoration: none; }
.phone { word-spacing: 0.15em; }

.bottom {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -100%);
    /*transform: translate(-50%, -50%);*/
    width: 100%;

    padding: 2em;

    animation-name: fade-in;
    animation-delay: 2s;
    animation-duration: 2s;
    animation-fill-mode: backwards;
}

.buttons {
    height: 140px;
}
.buttons div {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 40px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    background-color: #00cef2;
    transition: 0.5s ease;

    animation-name: button-in;
    animation-delay: 2s;
    animation-duration: 1s;
    animation-fill-mode: backwards;
}
.buttons div:hover {
    background-color: #ffffff;
    padding: 5px;
    margin: 35px;
    transition: 0.5s ease;
}
@keyframes button-in {
    from { opacity: 0; width: 0; height: 0; margin: 50px; }
    to { opacity: 1; width: 60px; height: 60px; margin: 40px; }
}

.buttons a { text-decoration: none; font-size: 0; }
.buttons a:before {
    font-family: 'Asap Condensed', sans-serif;
    font-size: 32px;
    color: #000000;

    animation-name: icon-in;
    animation-delay: 2.5s;
    animation-duration: 1s;
    animation-fill-mode: backwards;
}
@keyframes icon-in {
    from { opacity: 0; font-size: 0; }
    to { opacity: 1; font-size: 32px; }
}

.button-mail:before { content: "@"; }
.button-linkedin:before { content: "in"; }

.content {
    margin-top: 100vh;
    position: relative;
}

#pgp a { text-decoration: none; }
#pgp .link { text-decoration: underline; }
#pgp #fingerprint { font-weight: bold; }

.code { font-family: 'Roboto Mono', monospace; }

.links a {
    text-decoration: underline;
    padding-left: 1em;
    padding-right: 1em;
}

/*#impressum {*/
/*font-family: 'Asap', sans-serif;*/
/*font-size: 12px;*/
/*}*/
/*#impressum .content {*/
/*max-width: 1200px;*/
/*}*/
/*#impressum .en { width: 44%; padding-left: 4%; padding-right: 2%; float: left; }*/
/*#impressum .de { width: 44%; padding-left: 2%; padding-right: 4%; float: left; }*/

@media only screen and (min-width: 768px) {

}