@font-face {
  font-style: normal;
  font-family: 'Raleway';
  src: url('/fonts/raleway.woff2') format('woff2'),
       url('/fonts/raleway.ttf') format('truetype'); 
}

body {
  font-family: 'Raleway', Fallback, sans-serif;
}

#box-b1 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;
 
    background: rgb(214,196,31);
}
#box-b2 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;
 
    background: rgb(31,141,214);
}
#box-b3 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;
 
    background: rgb(214,31,50);
}
#box-b4 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;
 
    background: rgb(214,104,31);
}
#box-b5 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;

    background: rgb(214,31,141);
}
#box-b6 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;

    background: rgb(31,214,104);
}

#box-b7 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;

    background: rgb(165,105,189);
}

#box-b8 {
    height: 12em;
    display: block;
    color: #fff;
    padding: 1em;
    text-align: left;

    background: rgb(125,206,160);
}