html {
    background: rgb(60, 88, 112);
}
body {
    margin: 0;
    text-align: center;
    background: rgb(128, 128, 128);
    font-size: large;
    font-family: Arial, serif;
    color: hsl(208, 91%, 9%);

}

.blue { color: blue; }
.width-pct-100 { width: 100%; }
.width-pct-80 { width: 80%; }
.bkgcol-grey-25p { background-color: rgba(119,119,119, .25); }
.display-table { display: table; }
.margin-centered { margin-left: auto; margin-right: auto;}
.overflow-hidden { overflow: hidden; }

.scaled-image {
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.content-width {
    width: 90%;
    margin: 0 auto;
    position: relative;
}
.fity-cent {
    display: table-cell;
    width: 50%;
    box-sizing: border-box;
    padding: .5em 2em;
    text-align: left;
    display: block;
    width: 100%;
}

.work {
    background: black;
    background: linear-gradient(to right,  #7f7f7f 0%,#000000 100%); /* W3C */
    text-align: right;
    border-radius: 0 1em 1em 0;
    color: #ffeee6;
    color: hsl(208, 91%, 91%);
    color: hsl(19, 100%, 95%);
}
.fity-cent.work {
    padding-left: 0;
}
.fity-cent.play{
    padding-right: 0;
}
.work a {
    /*color: hsl(208, 91%, 91%);
    color: hsl(19, 100%, 95%);*/
    color: hsl(207, 20%, 85%);
}
.work h1 {
    font-family: 'Bevan', Arial, serif;
    letter-spacing: 2px;
    /* color: #ffeee6; */
    /* color: hsl(19, 100%, 95%); */
    color: hsl(207, 20%, 85%);
}
.play{
    background: white;
    color: hsl(208, 91%, 9%);
    background: linear-gradient(to right,  #ffffff 0%,#7f7f7f 100%); /* W3C */
    border-radius: 1em 0 0 1em;
}
.play a { color: hsl(208, 91%, 9%) }
.play h1 {
    letter-spacing: 2px;
    font-family: 'Shadows Into Light', cursive;
}

.site-header {
    padding: 1em;
    background: rgb(41,137,216);
    background: linear-gradient(to bottom,  rgb(41,137,216) 0%,rgb(127,127,127) 85%);
}

.site-header p {
    font-family: 'Bevan', Arial, serif;
    font-size: 250%;
    margin: 0;

}

.site-footer {
    padding: 2em;
    background: rgb(127,127,127);
    background: linear-gradient(to bottom,  rgb(127,127,127) 30%, rgb(60, 88, 112) 90%);
}

.site-content {
    margin: 0 auto;
    position: relative;
}

.fingers-top {
    width: 100%;
    height: auto;
    position: relative;
    bottom: 0;
    display: none;
}
.fingers-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    z-index: 1;
    display: none;
}

.box1 {
    box-shadow: 0 30px 15px -30px rgba(0, 0, 0, 0.5);
    position: relative;
}


@media (max-width: 350px) {

    body {
        font-size: medium;
    }
}

@media (min-width: 350px) {

    .site-header p {
        text-shadow: white -1px 1px 1px, black 1px -1px 1px;
        letter-spacing: 2px;
    }
}

@media (min-width: 550px) {

    .fingers-top,
    .fingers-bottom {
        display: block;
    }
    .site-header p {
        letter-spacing: 4px;
    }
    .site-header {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .content-width {
        top: -15px;
    }
    .fity-cent {
        display: table-cell;
        width: 50%;
        padding: 2em;
        padding-top: 80px;
        box-sizing: border-box;
    }
    .play, .work {
        border-radius: 0;
    }
    .work-play-divider {
        background: url(images/work-play-divide-1.png) repeat-y;
        width: 60px;
        height: 100%;
        margin-left: -30px;
        left: 50%;
        top: 100px;
        position: absolute;

    }
}

@media (min-width: 650px) {
    .fity-cent {
        padding-top: 90px;
    }
}

@media (min-width: 950px) {
    .site-content {
        /*width: 700px;*/
        margin: 0 auto;
    }
    .fingers-top {
        /*width: 700px;*/
        margin: 0 auto;
    }
    .fingers-bottom {
        /*width: 700px;*/
        margin: 0 auto;
    }
    .site-header {
        /*margin: 0 0 100px;*/
    }
    .fity-cent {
        padding-top: 95px;
    }
}