<style>
        html{
        }

@font-face{
   font-family: "Stitch Title";
   /*src: url('https://languagetapestries.jennyfilipetti.com/src/fonts/StitchTitle.ttf');*/
src: url('https://jennyfilipetti.com/languagetapestries/src/fonts/StitchTitle.ttf');
}

        body{
            font-family: "Arial", sans-serif;
        }
        header{
            display:block;
            max-width: 1060px;
            width: 80%;
            margin: auto;
            background-color:white;
        }

        footer{
            display:block;
            clear:both;
            max-width: 1060px;
            width: 80%;
            margin: 30px auto 5px auto;
            padding:3px;
            background-color:white;
        }

        footer p{
            text-align:center;
        }

        a{
            color:#0C950C;
            font-weight:bold;
            text-decoration:none;
        }

        a:visited{
            color:#0C6D0C;
        }

        h1{
            margin: 20px 0px 15px 0px;
            font-family: "Stitch Title", sans-serif;
            font-size: 32pt;
        }

       #titlebar h1{
           margin: 30px 0px 20px 0px;
           padding:0px 5%; 
           font-size: 28pt; 
           text-align: center; 
           line-height: 80%; 
           display: block;
       }

       #titlebar img{width:28px; height:28px; padding:auto; margin:auto; display: inline;}

       footer a{
            color: black;
            text-decoration: underline;
            font-weight: normal;
       }
       footer a:visited{color:black;}

       #titlebar a{
            color:black;
       }

        h3{
            margin: 8px 0px;
        }

        div.logo{
            position:absolute;
            display:block;
            float:right;
            text-align:right;
            width:400px;
            height:80px;
            background-color:red;
        }

        #body-wrapper{
            margin: auto; 
            width:80%; 
            max-width:1060px; 
            display:block; 
            background-color:white;
            margin-top:10px;
            margin-bottom:10px;
        }

p{
text-align:center;
}

#infotab{
font-variant: small-caps;
}

        .square-box{
            position: relative;
            float:left;
            max-width: 530px;
            width: 49%;
            overflow: hidden;
            margin: 0px 2% 0px 0px;
        }
        .square-box:before{
            content: "";
            display: block;
            padding-top: 100%;
        }
        .box-content{
            position:  absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            color: black;
            text-align: center;
            background-color:white;
        }

.explanation{
font-size:smaller;
text-align: center;
}

.chart{
display: block;
background-color: white;
margin: auto;
}

.chart text {
  fill: white;
  font: 14px sans-serif;
  text-transform: uppercase;
}

.chart rect{
display: block;
z-index: 100;
}

.chart line{
   stroke: white;
   stroke-width: 3px;
   stroke-linecap: butt;
}



.tooltip {
  background: blue;
  box-shadow: 0 0 5px #999999;
  color: #333;
  font-size: 12px;
  left: 130px;
  padding: 10px;
  position: relative;
  text-align: center;
  top: 95px;
  width: 80px;
  height: 40px;
  z-index: 10;
  display:block;
}
    </style>