/* navigation bar */
.homenav {
  width: 100%;
  background-color: #CC5500;
  overflow: auto;
}

/* Style the links inside the navigation bar */
.homenav a {
  float: left;
  color: #f2f2f2;
  padding: 14px ;
  text-decoration: none;
  font-size: 17px;
  width: 33.33%;
  text-align: center;
}

/* Change the color of links on hover */
.homenav a:hover {
  background-color: #ddd;
  color: black;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* ids */
#boxes {
  background-color:#ffecc7;
  border: 2px solid;
  border-color: black;
  padding: 0px 20px 20px 20px;
            width: 60%;
            height:auto;
            margin-left: 20%;
            margin-right: 20%;
}


body {
  --s: 47px; /* control the size*/
  --c1: #efc970;
  --c2: #683f78;
  
  --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
  background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    var(--c2);
  background-size: calc(2*var(--s)) calc(2*var(--s));
  color: black;
  font-family: Verdana;
}