*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  color: white;
  background-color: hsl(0, 0%, 12%);
  padding: 20px;
}
header {
  font-size: 16px;
  padding: 5px;
}
.hexagon {
  position: relative;
  display: inline-block;
  margin: 0 .5rem;
  width: 1rem;
  height: calc(1rem * 1.732);
  background-color: hsl(0, 75%, 50%);
}
.hexagon::before {
  width: inherit;
  height: inherit;
  background-color: inherit;
  content: "";
  position: absolute;
  left: 0;
  transform: rotate(-60deg);
}
.hexagon::after {
  width: inherit;
  height: inherit;
  background-color: inherit;
  content: "";
  position: absolute;
  left: 0;
  transform: rotate(60deg);
}


.four {
  background-color: hsl(180, 75%, 50%);
  width: 4rem;
  height: calc(4rem * 1.732);
  margin: 0 2rem;
}

.rounded, .rounded::before, .rounded::after {
  border-radius: .75rem/.25rem;
}

@keyframes selfRotate{
  0%{
    transform: rotate(0)
  }
  50%{
    transform: rotate(180deg)
  }
  100{
    transform:rotate(360deg)
  }
}