body {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/agsquare.png);
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    margin: 0;
}

#spLogo {
    display: block;
    margin: 0 auto;
    width: 84px;
    margin-bottom: 12px;
    margin-top: 2px;
}

h1 {
    font-size: 35px;
    text-align: center;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    margin-top: -17px;
    margin-bottom: -6px;
    text-shadow: 2px 2px #b3b3b3;
}

h2 {
    font-size: 17px;
    text-rendering: optimizeLegibility;
    color: #003d88;
}

.elegantshadowH1 {
     color: #131313;
     letter-spacing: .15em;
     text-shadow:
             1px -1px 0 #767676,
             -1px 2px 1px #737272,
             -2px 4px 1px #767474,
             -3px 6px 1px #787777,
             -4px 8px 1px #7b7a7a,
             -5px 10px 1px #7f7d7d,
             -6px 12px 1px #828181,
             -7px 14px 1px #868585,
             -8px 16px 1px #8b8a89,
             -9px 18px 1px #8f8e8d,
             -10px 20px 1px #949392,
             -11px 22px 1px #999897,
             -12px 24px 1px #9e9c9c,
             -13px 26px 1px #a3a1a1,
             -14px 28px 1px #a8a6a6,
             -15px 30px 1px #adabab,
             -16px 32px 1px #b2b1b0,
             -17px 34px 1px #b7b6b5,
             -18px 36px 1px #bcbbba;
             /*-19px 38px 1px #c1bfbf,*/
             /*-20px 40px 1px #c6c4c4,*/
             /*-21px 42px 1px #cbc9c8,*/
             /*-22px 44px 1px #cfcdcd,*/
             /*-23px 46px 1px #d4d2d1,*/
             /*-24px 48px 1px #d8d6d5,*/
             /*-25px 50px 1px #dbdad9,*/
             /*-26px 52px 1px #dfdddc,*/
             /*-27px 54px 1px #e2e0df,*/
             /*-28px 56px 1px #e4e3e2;*/
 }


.elegantshadowH2 {
    text-align: center;
    letter-spacing: .15em;
    margin-top: -8px;
}

#mainContent {
    display: grid;
    grid-template-columns: 33% 33% 1fr;
    justify-items: center;
    margin-top: 10%;
}

@media screen and (max-width: 740px) {
    #mainContent {
        grid-template-columns: 50% 50%;
        row-gap: 60px;
    }

    #apiItem {
        grid-column: 1 / span 2;
    }
}

#mainContent div {
    align-self: center;
}

#mainContent img {
    width: 68px;
}

#mainContent label {
    display: grid;
    text-align: center;
    font-weight: bold;
    font-size: 17px;
}

#mainContent label:hover, h1.elegantshadowH1:hover {
    cursor: pointer;
    opacity: 0.5;
}

footer {
    background-color: #003d88;
    height: 31px;
    position: fixed;
    width: 100%;
    bottom: 0;
    color: #d8d8d8;
    text-align: center;
}

footer p {
    margin: 0;
    margin-top: 8px;
    font-size: 13px;
}