* {
  margin: 0;
  padding: 0;
}

body {
  background: #222;
  font:
    14px Georgia,
    serif;
  padding: 2rem;
}
#content {
  background: white;
  padding: 2rem;
}

.tabs {
  list-style: none;
  margin-inline-start: 20px;
  display: flex;
}
.tabs li {
  /* So the psueudo elements can be abs. positioned inside */
  position: relative;
}
.tabs a {
  /* Make them block level and only as wide as they need */
  float: left;
  padding: 10px 40px;
  text-decoration: none;

  /* Default colors */
  color: black;
  background: #ddc385;

  /* Only round the top corners */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.tabs .active {
  /* Highest, active tab is on top */
  z-index: 3;
}
.tabs .active a {
  /* Colors when tab is active */
  background: white;
  color: black;
}
.tabs li:before,
.tabs li:after,
.tabs li a:before,
.tabs li a:after {
  /* All pseudo elements are 
		     abs. positioned and on bottom */
  position: absolute;
  bottom: 0;
}
/* Only the first, last, and active
		   tabs need pseudo elements at all */
.tabs li:last-child:after,
.tabs li:last-child a:after,
.tabs li:first-child:before,
.tabs li:first-child a:before,
.tabs .active:after,
.tabs .active:before,
.tabs .active a:after,
.tabs .active a:before {
  content: "";
}
.tabs .active:before,
.tabs .active:after {
  background: white;

  /* Squares below circles */
  z-index: 1;
}
/* Squares */
.tabs li:before,
.tabs li:after {
  background: #ddc385;
  width: 10px;
  height: 10px;
}
.tabs li:before {
  left: -10px;
}
.tabs li:after {
  right: -10px;
}
/* Circles */
.tabs li a:after,
.tabs li a:before {
  width: 20px;
  height: 20px;
  /* Circles are circular */
  border-radius: 10px;
  background: #222;

  /* Circles over squares */
  z-index: 2;
}
.tabs .active a:after,
.tabs .active a:before {
  background: #ddc385;
}
/* First and last tabs have different
		   outside color needs */
.tabs li:first-child.active a:before,
.tabs li:last-child.active a:after {
  background: #222;
}
.tabs li a:before {
  left: -20px;
}
.tabs li a:after {
  right: -20px;
}