@font-face {
    font-family: "Limelight";
    src: url("../fonts/Limelight-Regular.woff") format('woff');
    src: url("../fonts/Limelight-Regular.woff2") format('woff2');
}




html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    font-size: 14px;
    line-height: 1.5em;
}


header {
    flex: none;
    /*height: 196px;*/
    text-align: center;
    /*background: url('../images/screen_and_brush2.png') center 190px no-repeat, linear-gradient(#cacaca, #ffffff);*/
    /*background: center  no-repeat, linear-gradient(#cacaca, #ffffff);*/
        /*background: radial-gradient(ellipse farthest-corner at 205px 85px , #ffffff 0%, rgba(32,124,202,0) 78%, rgba(32,124,202,1) 90%);*/
        /*margin-bottom: 30px;*/
}


header .logo {
    margin: 0;
}


header h2 {
    font: 10vw 'Limelight';
    margin: 15px 0 0 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,.4);
}



header .tagline {
    color: #382f2f;
    font-size: 2.75vw;
    margin: 0 10vw 25px 10vw;
}

@media (max-width: 799px) {
    header .tagline  {
        font-size: 150%;
    }
}

@media (max-width: 320px) {
    header .tagline  {
        font-size: 120%;
    }
}

header nav {
    list-style-type: none;
    font-size: 0;
    width: 100%;
    background-color: rgba(32,124,202,1);
    border-bottom: 2px rgba(41,137,216,1) solid;
    box-shadow: 0 2px 4px rgba(100, 100, 100, .6);
}

header nav li {
    display: inline-block;
    padding: 6px 20px;
    /*background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%);*/
    font-size:14px;
}

header nav li:last-of-type {
    padding: 0;
}

header nav li:last-of-type button {
    padding: 4px 6px;
    cursor: pointer;
}

header nav li:last-of-type button:hover {
    box-shadow: 0 0 4px yellow;
}


header  nav li:hover {
    /*background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(128,175,214,1) 50%,rgba(131,167,196,1) 51%,rgba(125,185,232,1) 100%);*/
    background-color: rgba(81,146,202,1);
}

header nav li a, header nav li a:visited, header nav li a:hover {
    text-decoration: none;
    color: #eee;
    font-weight: bold;
}


header button {
    display: block;
}

div.content {
    margin: auto;
    max-width: 800px;
}


.content {
    flex: 1 0 auto;
    position: relative;
    display: flex;
    max-width: 900px;
}

main {
    margin: 0 auto;
    padding: 20px;
}

em {
    letter-spacing: normal;
    font-style: normal;
}



h3 {
    color: #36454f;
    margin-top: 2.5em;
    margin-bottom: .5em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .2);
}

h3 + p {
    margin-top: .5em;
}


footer {
    flex: none;
}

footer nav {
    display: flex;
    position: relative;
    margin: auto;
    list-style-type: none;
    font-size: 0;

    border-top: 2px rgba(32,124,202,1) solid;
    width: 60%;
    padding: 10px;
}

footer nav li {
    flex-grow: 1;
}


footer nav li {
    padding: 6px;
    font-size: 10px;
    text-align: center;
}



footer nav a {
    text-decoration: none;
}

a.install-link {
    color: white !important;
    text-shadow: 0 0 1px rgba(255, 255, 255, .4);
    /*padding: 5px 10px 4px;*/
    /*border: 1px #c24a06 solid;*/
    border-radius: 4px;
    /*background: linear-gradient(to bottom, rgba(240,201,168,1) 0%,rgba(227,105,20,1) 50%,rgba(194,75,6,1) 51%,rgba(255,145,43,1) 100%);*/
    background-color: rgb(143,195,89);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    padding: 3px 5px;
}

main a.install-link {
	display:block;
	width: 11.25em;
	margin-top: 2em;
	font-size: 150%;
	border-radius: 6px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.6);
	padding: 5px 8px;
}


a.install-link:hover {
    background-color: rgb(163,215,109);
}


a, a:visited, a:hover {
    color: rgba(23,88,147,1);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


footer a.install-link {
	display: block;

	font-size: 150%;
    color: white !important;
    text-shadow: 0 0 1px rgba(255, 255, 255, .4);
    /*padding: 5px 10px 4px;*/
    /*border: 1px #c24a06 solid;*/
    border-radius: 4px;
    /*background: linear-gradient(to bottom, rgba(240,201,168,1) 0%,rgba(227,105,20,1) 50%,rgba(194,75,6,1) 51%,rgba(255,145,43,1) 100%);*/
    background-color: rgb(143,195,89);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
    padding: 3px 5px;
}



@media (max-width: 700px) {
    footer nav  {
        width: 80%;
    }

}

@media (max-width: 500px) {
    footer nav  {
        width: 100%;
    }
}


@media (max-width: 350px) {
    footer nav {
        display: block;
    }
    footer nav li {
        display: inline-block;
    }
}