body {
  width: 100%;
  height: 100%;
  --s: 82px;
  --c1: #b2b2b2;
  --c2: #ffffff;
  --c3: #d9d9d9;

  --_g: var(--c3) 0 120deg, #0000 0;
  background: conic-gradient(from -60deg at 50% calc(100% / 3), var(--_g)),
    conic-gradient(from 120deg at 50% calc(200% / 3), var(--_g)),
    conic-gradient(
      from 60deg at calc(200% / 3),
      var(--c3) 60deg,
      var(--c2) 0 120deg,
      #0000 0
    ),
    conic-gradient(from 180deg at calc(100% / 3), var(--c1) 60deg, var(--_g)),
    linear-gradient(
      90deg,
      var(--c1) calc(100% / 6),
      var(--c2) 0 50%,
      var(--c1) 0 calc(500% / 6),
      var(--c2) 0
    );
  background-size: calc(1.732 * var(--s)) var(--s);
}


img{
  height: 200px;
  width: 150px;
  float: left;
  border-radius: 50%;
}
.img1{
  background-color: black;
  padding: 10px;
  width: 150px;
  float: left;
  height: 100%;
  
}
.d1{
  background-color: grey;
  padding: 17px;
}
.n1{
  color: black;
  text-size: 500px;
font-family: "Times New Roman", Times, serif;
  
}



.burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: black;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}