@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');

body {
    background-color: #27282b;
    color: #ddd;
    font-family: 'Roboto';
    font-weight: 100;
}

h1 {
    font-variant: small-caps;
}

main {
    margin-top: 10vh;
    margin-left: 10vw;
}

footer {
    position: absolute;
    bottom: 10vh;
    left: 10vw;
}

#svgwolf {
    position: fixed;
    bottom: 0;
    right: -10vw;
    width: 60vw;
    max-height: 60vh;
    opacity: .6;
}

#linkedin-logo {
    width: 30px;
}

.dropping-texts {
    display: inline-block;
    width: 180px;
    text-align: left;
    height: 36px;
    vertical-align: -2px;
}

.dropping-texts > div {
    font-size: 0px;
    opacity: 0;
    margin-left: -30px;
    /*position:absolute;*/
    font-weight: 300;
    box-shadow: 0px 60px 25px -20px rgba(0, 0, 0, 0.5);
}

.dropping-texts > div:nth-child(1) {
    animation: roll 9s linear 1 0s;
    animation-fill-mode: forwards;
}

.dropping-texts > div:nth-child(2) {
    animation: roll 9s linear 1 3s;
    animation-fill-mode: forwards;
}

.dropping-texts > div:nth-child(3) {
    animation: roll 9s linear 1 6s;
    animation-fill-mode: forwards;
}


@keyframes roll {
    0% {
        font-size: 0px;
        opacity: 0;
        margin-left: -30px;
        margin-top: 0px;
        transform: rotate(-25deg);
    }
    3% {
        opacity: 1;
        transform: rotate(0deg);
    }
    5% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
    }
    20% {
        font-size: inherit;
        opacity: 1;
        margin-left: 0px;
        margin-top: 0px;
        transform: rotate(0deg);
    }
    100% {
        font-size: inherit;
        opacity: 0.5;
        margin-left: 0px;
        margin-top: 0px;
    }
}