@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
body {
    background-color: #1d1e22;
    color: #ddca7e;
  }
  .footer {
    font: 1em/1.0 'Roboto', georgia, serif;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #060606;
    text-align: center;
  }
  
  .starburst {
    font: 4em/1.0 'Lobster', georgia, serif;
    background: #f33;  
    width: 3.5em;
    height: 3.5em;
    text-align: center;
    color: #fff;
  }
  
  .starburst,
  .starburst span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .starburst span {
    width: 100%;
    height: 100%;
    background: inherit;
    transform: rotate(45deg);
  }
  
  .starburst:before,
  .starburst:after ,
  .starburst span:before,
  .starburst span:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: -1;
    transform: rotate(30deg);
  }
  
  .starburst:after {
    transform: rotate(-30deg);
  }
  
  .starburst span:after {
    transform: rotate(30deg);
  }
  .starburst span:before {
    transform: rotate(-30deg);
  }
  
  .example {
    position: absolute;
    top: 25%;  
    margin-top: -1.25em;
    margin-left: -1.25em;
  }
  
  #sb-1 {
    left: 25%;
    transform: rotate(-90deg);
  }