body {
    background: #7e3f3f;
    margin: 0;
  }

  #backgroundImage {
    border: none;
    height: 100%;
    pointer-events: none;
    position: fixed;
    top: 0;
    visibility: hidden;
    width: 100%;
  }

  [show-background-image] #backgroundImage {
    visibility: visible;
  }
  li{
    list-style-type: none;
    color: rgb(0, 247, 255);
  }

  div.nav_1 ul{
    background-color: chartreuse;
    width: 100%;
  }

 div ul{
    float: left;
  }

   ul a{
    float: left;
    padding: 5px;
    text-decoration: none;
  }

  .clear-float{
    clear: both;
  }

  .text {
    color: rgb(0, 26, 255);
    background-color: brown;
    width: 50%;
    margin: auto;
    border: solid 5px goldenrod;
    text-align: center;
  }

  .circle_one{
    background-color: crimson;
    border-radius: 50%;
    text-align: center;
    color: aliceblue;
    height: 100px;
    width: 100px;
    padding: 25px;
    margin: auto;
  }

  .circle_two{
    background-color: rgb(9, 255, 0);
    border-radius: 50%;
    text-align: center;
    color: aliceblue;
    height: 100px;
    width: 100px;
    padding: 25px;
    margin: auto;
  }

  .circle_three{
    background-color: rgb(16, 199, 255);
    border-radius: 50%;
    text-align: center;
    color: aliceblue;
    height: 100px;
    width: 100px;
    padding: 25px;
    margin: auto;
  }

  .square_j_1{
    background-color: rgb(255, 246, 246);
    text-align: center;
    color: aliceblue;
    height: 100px;
    width: 100px;
    padding: 25px;
    margin: auto;
  }

  .square_j_2{
    background-color: rgb(255, 246, 246);
    text-align: center;
    color: aliceblue;
    height: 100px;
    width: 100px;
    padding: 25px;
    margin: auto;
  }
 .circle_j {
  background-color: rgb(9, 255, 0);
  border-radius: 50%;
  text-align: center;
  color: aliceblue;
  height: 100px;
  width: 100px;
  padding: 25px;
  margin: auto;

 }