html {
    text-align: center;
    background: #252629;
    color: #fafafa;
    background: url("http://res.cloudinary.com/dzepwcs5f/image/upload/v1485558471/photo-1446104838475-bc6508184f08-min_1_slvurf.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    padding: 10px;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.75);
}
#container {
    height: inherit;
    border: 1px solid rgba(236, 232, 232, 0.25);
}

#about {
    margin: 0 auto 0;
    width: 280px;
    position: relative;
    top: 50%;
    margin-top: -100px;
}

h1 {
    font-family: 'Fira Sans Condensed', sans-serif;
    font-weight: 400;
    font-size: 50px;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 1px 1px 1px #25302f;
    animation: slide-down .6s ease;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    position: relative;
    top: -10px;
    margin-bottom: 5px;
}

@keyframes slide-out {
    from { left: 50%; right: 50%; }
    to { left: 0; right: 0 }
}

@keyframes slide-down {
    from { top: -10px; }
    to { top: 0; }
}
@keyframes slide-up {
    from { top: 10px; }
    to { top: 0; }
}

.divider {
    height: 8px;
    position: relative;
}
.divider:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    top: 0px;
    background: rgba(236, 232, 232, 0.25);
    height: 1px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    animation: slide-out .4s ease-out;
    animation-fill-mode: forwards;
    animation-delay: .4s;
}

.icons {
    animation: slide-up .6s ease;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    position: relative;
    top: 10px;
}
.icon {
    display: inline-block;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 1px 1px 1px #25302f;
    font-size: 30px;
    transition: color 0.5s ease;
}
.icon:hover {
    color: rgba(255, 255, 255, 0.9);
}

#footer {
    width: 100%;
    background: url("../images/camo.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 200px;
    position: absolute;
    bottom: 0;
}

@media all and (max-width : 650px) {
    #about {
        width: 230px;
    }
    h1 {
        font-size: 45px;
    }
}

@media all and (max-width : 375px) {
    body {
        padding: 7px;
    }
}