body {
    margin: 0;
    font: arial
}

@keyframes up-bump {
    0% {
        padding-top: 0
    }

    50% {
        padding-top: .3em
    }

    100% {
        padding-top: 0
    }
}

@keyframes down-bump {
    0% {
        padding-top: 0
    }

    50% {
        padding-top: .15em
    }

    100% {
        padding-top: .3em
    }
}

#myHeader {
    width: 100%;
    background-color: #333;
    position: fixed;
    top: 0;
    z-index: 1
}

.header {
    height: 45px;
    border-style: solid;
    border-color: #bbb;
    border-width: 5px 0 0 0;
    text-align: left;
    color: #333
}

ul.header {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}

.header li {
    text-align: center;
    float: left;
    position: static;
    background-size: 100% 200%;
    color: #fff;
    height: 50px;
    width: 15%;
    display: inline-block;
    text-decoration: none
}

    .header li a {
        color: #fff;
        font-size: 22px;
        text-decoration: none;
    }

    .header li:hover a {
        color: #fff;
    }

.headerLinks {
    background-position: 100% 100%;
    padding-top: .35em;
    cursor: pointer
}

    .headerLinks:hover {
        color: white;
        background: linear-gradient(#333 50%,#fff 50%,#bbb 0);
        transition: all .6s cubic-bezier(.31,1.62,.41,.17);
    }

.mainContent {
    margin-top: 50px
}

.mainContent, body {
    border-style: solid;
    border-color: #d4af37;
    border: 10px;
    background-color: #333
}

.HiddenHeaderText {
    margin: 0;
    padding: 0;
    text-align: left;
    color: #d4af37
}

ul.HiddenHeaderText {
    margin: 0;
    padding-bottom: 10px;
    color: #d4af37;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.HiddenHeaderText li a {
    margin: 0;
    padding: 0;
    font-size: 16px;
    text-align: center;
    float: left;
    position: static;
    width: 33.33333333%
}

.gold {
    background-color: #d4af37;
    border-color: #d4af37;
    border-style: solid;
    border-width: 0 0 5px 0
}

.goldHidden li a {
    color: #d4af37
}

.goldHover:hover {
    color: gold;
    transition: all .6s ease-out
}

.red {
    background-color: #bb0606;
    border-color: #bb0606;
    border-style: solid;
    border-width: 0 0 5px 0
}

.redHidden li a {
    color: #bb0606
}

.redHover:hover {
    color: #c00;
    transition: all .6s ease-out
}

.blue {
    background-color: #00d;
    border-color: #00d;
    border-style: solid;
    border-width: 0 0 5px 0
}

.blueHidden li a {
    color: #00d
}

.blueHover:hover {
    color: #00d;
    transition: all .6s ease-out
}

.green {
    background-color: #0d0;
    border-color: #0d0;
    border-style: solid;
    border-width: 0 0 5px 0
}

.greenHidden li a {
    color: #0d0
}

.greenHover:hover {
    color: #0d0;
    transition: all .6s ease-out
}

.tiles {
    float: left;
    display: inline;
    width: 49%;
    height: 40%;
    width: 50%;
}

.innerTile {
    border-radius: 25px;
    background-color: #090909;
    margin: 20px;
    color: #bbb;
    padding: 50px;
}

.github {
    border-radius: 25px;
    background: #0366d6;
    margin: 20px;
    padding: 5px;
    width: 200px;
    height: 50px;
}

.centeredOnPageContent {
    padding: 5% 0% 5% 0%;
    width: 100%;
    background-color: #0c297e;
}

.centered {
    margin: 0% 5% 5% 5%;
    width: 90%;
    text-align: center;
}

.homeInfo {
    padding: 5px;
    background-color: #333;
    color: #fff;
}

.homelink {
    margin: 10px;
    padding-top: 10px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 36px;
    color: #333;
    width: 99%;
    height: 40px;
    display: block;
    font-family: "Arial Black",Gadget,sans-serif;
    float: left;
    transition: all .6s ease-out
}

.homelink:hover {
    background-color: #fff
}

.gitMargin {
    position: centered;
}

.githubHover:hover {
    color: #333;
    background-color: #bbb;
    transition: all .6s ease-out;
}


.bottomText {
    font-size: 20px;
    padding: 40px;
    background-color: #333;
    color: #fff;
    float: left;
    text-align: center;
}

.servicesText {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 46px;
    color: #777;
    width: 100%;
    display: block;
    font-family: "Arial Black",Gadget,sans-serif;
    float: left;
}

.servicesHeader {
    color: #fff;
}

.bottomTextHeader {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 46px;
    color: #333;
    width: 100%;
    display: block;
    font-family: "Arial Black",Gadget,sans-serif;
    float: left;
    transition: all .6s ease-out
}

    .bottomTextHeader:hover {
        background-color: #fff
    }

.money {
    color: #fff;
    font-size: 24px;
    text-decoration: bold;
    font-weight: bold;
}

footer {
    color: #333;
    background-color: #bbb;
    float: left;
    text-align: center;
    border-style: solid;
    border-color: #bbb;
    width: 100%;
    margin-top: 20px;
    padding-left: 20px;
    border: 5px,0,0,0;
    transition: all .6s ease-out
}

    footer:hover {
        color: #fff;
        background-color: #333;
        transition: all .6s ease-out
    }

.productImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid white;
}

.spacer {
    padding: 10px;
    font-size: 22px;
    font-family: "Arial Black",Gadget,sans-serif;
}