body{
    background-image: url("images/bg3.png");
    background-repeat: repeat-x;
    background-size: 1000px;
    image-rendering: pixelated;
    margin:0;
    padding:0;
    font-family:'Times New Roman', Times, serif;

    animation: bgScroll 10s linear infinite;
}


.container {
    text-align: center;
    padding-top : 10vh;

}

.github-logo
{
    width:100px;
    height:100px;
    transition: 0.2s;
    opacity :0;
    animation-delay: 0.5s;
    animation: fadeIn 1s ease-in forwards, scrollUpGreeting 1s ease-out forwards;
}
.github-logo:hover{
    transform: scale(1.1);
}

@keyframes fadeIn{
    from {opacity: 0}
    to {opacity: 1}
}

.github-bg{
    /*background-color: gray;*/
    opacity: 1;
    /*padding: 20px;*/
    border-radius: 50px;
    width: 103px;
    height: 103px;
    margin: 0 auto;
    
    

    /*animation: fadeIn 1s ease-in;*/
}

.github-bg:hover{
    animation: fadeInShadow .5s ease-out forwards, githubLogoScale .5s ease-in forwards;

}


@keyframes fadeInShadow{
    from{box-shadow: 0 0 20px rgba(255, 255, 255, 0);
        background-color: rgba(255, 255, 255, 0);}
    to{box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
        background-color: rgba(255, 255, 255, 0.5);}
}

.greeting{
    animation: fadeInGreeting 1.0s ease-in forwards, scrollUpGreeting 1.0s ease-out;
}

.greeting:hover{
    transform:scale(1.1);
}

@keyframes fadeInGreeting{
    
    from{opacity: 0; 
        }
    to{opacity: 1; 
        }
}
@keyframes scrollUpGreeting{
    from{transform: translate3d(0,30px,0);}
    to{transform: translate3d(0,0,0);}
}

@keyframes bgScroll{
    from{background-position: 0 0;}
    to{background-position: -1000px 0;}
}

@keyframes githubLogoScale{
    from{transform: scale(1);}
    to{transform: scale(1.1);}
}