@charset "UTF-8";
/* CSSでチョコレート */
body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: rgb(255, 232, 232);
}

.choco {
  width: 400px;
  aspect-ratio: 2/1;
  background-color: rgb(74, 37, 10);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8%;
}
.choco span {
  display: grid;
  border-width: 3px;
  border-style: solid;
  border-top-color: rgb(74, 37, 10);
  border-right-color: rgb(74, 37, 10);
  border-left-color: rgb(111, 56, 17);
  border-bottom-color: rgb(111, 56, 17);
  background-color: rgb(183, 121, 76);
  border-radius: 5px;
}
.choco span::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(111, 56, 17);
  border-width: 5px;
  border-style: solid;
  border-top-color: rgb(183, 121, 76);
  border-right-color: rgb(183, 121, 76);
  border-left-color: rgb(74, 37, 10);
  border-bottom-color: rgb(74, 37, 10);
  transform: scale(98%);
  border-radius: 5px;
  grid-column: 1/2;
  grid-row: 1/2;
}
.choco span::after {
  content: "CHOCO";
  display: grid;
  place-items: center;
  color: rgb(74, 37, 10);
  font-size: 0.6rem;
  grid-column: 1/2;
  grid-row: 1/2;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  transform: scale(85%) translateX(1px) translateY(-1px);
  border-top: 8px solid rgb(74, 37, 10);
  border-right: 8px solid rgb(74, 37, 10);
  border-left: 4px solid rgb(183, 121, 76);
  border-bottom: 4px solid rgb(183, 121, 76);
  text-shadow: 0 0 4px rgba(252, 202, 110, 0.6);
}
/*# sourceMappingURL=style.css.map */