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

* { font-family: 'Roboto', sans-serif; line-height:1.2; vertical-align:middle; }

body { 
    background:#dddddd;
    user-select:none;
    font-size:2rem;    
    font-weight:300;
}

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: groove;
    border-width: 1px;
}

code {
    font-family: monospace;
    letter-spacing: 1px;
    font-size:1.05rem;   
    font-weight:500;
}

#me {
    padding-top: 50px;
    padding-left:5rem;
    padding-right:15px;
    padding-bottom:15px;
    left:5rem;
    font-size:1.7rem;    
}

#me-img{
    width: 150px;
    height:150px;
}

#me-container{
    background:#dddddd;   
    position:fixed;
    top:5rem;
    z-index:2;
    animation:move-in-from-left .5s 0.5s ease both;
    transform-origin:top left;
}

#about {
    background:#dddddd;   
    margin-top: 0.5em;
    font-size:1.2rem;
    color:gray;
}

#about a {
    font-size:1.2rem;
    color:gray;
    text-decoration:none;
}

#about a:hover {
    font-size:1.2rem;
    color:gray;
    text-decoration:underline;
}

#pin {
    margin-top: 7px;
    margin-right: 7px;
    width: 16px;
    height:16px;
}

#main {
    margin-top:8rem;
    margin-bottom: 8rem; 
    background:#dddddd;   
    z-index:3;
}

#header-container {
    position:fixed;
    top:0;
    width:100%;
    height:5rem;
    z-index:7;

}

#header {
    height:5rem;
    padding:0 5rem 0rem;
    box-shadow: 0px 0px 5px 1px #aaa;
    background:#dddddd;
    font-weight:400;
    font-size:3rem;
    color:#539D00;
    vertical-align: middle;
    letter-spacing: 3px;
    text-shadow: 3px 2px grey;
    line-height:2;
    animation:fly-in-from-top .5s 0.5s ease both;
    transform-origin:top left;
}

#footer {
    height:3rem;
    padding-left: 35rem;
    box-shadow: 0px 0px 5px 1px #aaa;
    background:#dddddd;
    font-size:.9rem;
    font-weight:400;
    color:gray;
    vertical-align: middle;
    line-height:3rem;
    animation:fly-in-from-bottom .5s 0.5s ease both;
    transform-origin:top left;
}

#footer-container {
    position:fixed;
    bottom:0;
    width:100%;
    height:3rem;
    z-index:7;
}

.category {
    min-width: 750px;
    margin:0 25rem 1rem;
    padding: 0 1rem 0 ;
    animation:fly-in-from-left 1s 1s ease both;    
    background:#dddddd;   
    z-index:1;
}

.card-sidebar {
    position: absolute;  
    bottom: 25px;
}

.logo-sf {
    position: absolute;  
    display: inline-block;
    top: 25px;
    width: 100px;
    height: 100px;
}

a.playstore {     
    display: inline-block;
    position: relative; 
    bottom:0;
    width: 100px;
    height: 30px; 
    background-image: url("../img/google-play-badge.png");
    background-repeat: no-repeat;
    background-size: cover;   
}

a .github-image {  
    display: inline;
    margin-top: 20px;
    font-size:1.7rem;    
    font-weight:300;   
    width: 40px;
    height: 40px; 
    color:black;
    text-decoration:none;
}

a.github {  
/*     position: relative;  */
    margin-top: 20px;
    bottom:0;
    display: inline;
    font-size:1.2rem;    
    font-weight:300;   
    color:black;
    text-decoration:none;
}

.divider {
    display: inline-block;
    width:16px;
        
}

.badges {
/*     margin-top:15px; */
/*     padding-top:15px; */
    position: absolute; 
    bottom: 25px;
}

.card { 
    position: relative;
    /*   display: inline-block; */
    padding:2rem;
/*     min-height: 225px; */
    min-width: 500px;
    /*   box-shadow: 0 1px 2px #aaa; */
    box-shadow: 5px 5px 5px 1px #aaa;
    background:white;
    margin:0 35rem 1rem;
    border-radius:3px;
    animation:fly-in-from-left 1s 1s ease both;
    transform-origin:top left;
    /*   overflow:hidden; */
    z-index:3;
}

.card .title {
    margin-left: 130px; 
    color:#539D00;  
}

.card .content {
    margin-top: 1rem; 
    margin-left: 130px; 
    margin-bottom:50px;
    font-size:.9rem;
    color:gray;
    font-weight:400;   
    line-height:1.3;
}

.content i {
    font-style: italic;
}
.content a {
    font-size:.9rem;
    color:black;
    text-decoration:underline;
}

.content a:hover {
    font-size:.9rem;
    color:black;
    text-decoration:underline;
}

@keyframes fly-in-from-left {
    from {
        transform:translateY(15rem) rotate(15deg);
        opacity:0;
    }
}

@keyframes move-in-from-left {
    from {
        transform:translateX(-15rem);
        opacity:0;
    }
}

@keyframes fly-in-from-top {
    from {
        transform:translateY(-15rem);
        opacity:0;
    }
}

@keyframes fly-in-from-bottom {
    from {
        transform:translateY(15rem);
        opacity:0;
    }
}