style.css

@import url(https://fonts.googleapis.com/css?family=Gudea);

/*
NOTE: Place @import at the very first line of the CSS file.
*/

	
<style type="text/css"  media="all" >  /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,
acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,
sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,
header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,

video{border    : 0;
      font-size : 100%;
      font      : inherit;
      vertical-align : baseline;
      margin    : 0;
      padding   : 0}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
section{display:block}  body{line-height:1} ol, ul{list-style:none} blockquote, q{quotes:none} blockquote:before, blockquote:after,
q:before, q:after{content:none} table{border-collapse:collapse; border-spacing:0}


html {
    font-size: 100%;  /* maintain the browser's default font size, for all modern browers this is 16px. (1rem = 16px) */
}

body {
    font-family: Gudea, sans-serif;
    font-weight: 400;
    font-stretch: normal;
    display: block;
    color: #bbbbbb;
    color: #111;
    background-color: #424040;
    background-color: #eee;
}

header {
    display: block;
    width: 90%;
    max-width: 1100px;
    padding: 0 0.5rem;
    margin: 0 auto;
    background-color: #744;
    font-weight: 700;
    vertical-align: middle;
    box-shadow: 0.2em 0.8em 1em 0em rgba(32,32,32,0.15);
    z-index: 5;
    color: #e8e8ef;
}



h1 {
    font-size: 2.0rem;
    padding: 1.2rem;
    margin: 0em 0em 2.4rem 1.2rem;
    color: #444;
}


a {
    font-size: 1.75rem;	
    text-decoration: none;
}

/*
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
and a:active MUST come after a:hover in the CSS definition in order to be effective.
*/
/*
a:link    { color: yellow; }
a:visited { color: blue; }
a:focus   { color: green; }
a:hover   { color: green; }
a:active  { color: red;  }
*/

h2 {
    font-size: 1.75rem;
    padding: 0.34rem;
    margin: 4rem 0rem 1rem -0.5rem;
    color: #444;
}

p {
    padding: 1rem 2rem;
    padding: 1rem 2rem;
    max-width: 80rem;
}

ol {
    margin: 0.85rem;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: rgb(241, 241, 241);
    border: 3px solid rgb(85, 85, 85);
}



li a {
    display: block;
    color: black;
    padding: 8px 16px;
    text-decoration: none;
}


li {
    text-align: center;
    border-bottom: 1px solid black;
}

li:last-child {
    border-bottom: none;
}


li a.active {
    background-color: rgb(62,115,71);
    color: white;
}

li a:hover:not(.active) {
    background-color: rgb(85, 85, 85);
    color: white;
}





</style>