@font-face {
  font-family: colourFactor;
  src: url(fonts/garabd.ttf);
  font-weight: bold;
}

@font-face {
  font-family: colourFactor;
  src: url(fonts/garait.ttf);
  font-weight: italic;
}
@font-face {
  font-family: colourFactor;
  src: url(fonts/gara.ttf);
  font-weight: normal;
}

/*  https://www.w3schools.com/css/css3_fonts.asp says...
    Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
*/


#colourFactor {
  font-size: 10px;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  width: 12em;
  margin-left: auto;
  position: fixed;
  bottom: 5px;
  left: 20px;
} 
  
#pink {
  background-color: lightPink;
}

#crimson {
  padding-left: 0.5em;
  background-color: crimson;
  width: 9.1em;					/* 8 * 1.2em per block, less padding left */
  display: inline-block;
  cursor: pointer;
}

#amber {
  padding-left: 0.5em;
  background-color: orange;
  width: 11.5em;
  display: inline-block;
  cursor: pointer;
}


#contact {
  font-size: 70%;				/* with font at N% we have to adjust WIDTH em settings below */
  padding: 0.71em;				/* 0.5em/N% */
  background-color: ivory;
  width: 15.8em;				/* i.e. (12em - 2*std-padding)/N% */
  line-height: 1em;
  color: crimson;
  letter-spacing: normal;
}

#contact>A {
  color: grey; /* crimson; */
  text-decoration: none;
  /*  border-bottom: 1px grey solid; */
}

#title {
  padding-left: 0.5em;
  background-color: ivory;
  width: 11.5em;
  color: black
}