:root {
  --bg-color: #666666;
  --chip-color: #aca9bb;
  --chip-border1: #474554;
  --chip-border2: #8685ef;
  --text-engrave: rgb(172, 169, 187, 0.5);
  --light: #faf7ff;
}

body {
  background-color: var(--bg-color);
  user-select: none;
  margin-left: 0;
  margin-right: 0;
}

div#chip-container {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  /* padding-top: 10vh; */
  /* padding-bottom: 10vh; */
  overflow: hidden;
}

#chip-content {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(75, 75, 75, 1) 70%,
    rgba(0, 0, 0, 1) 100%
  );
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 14px;
  width: 40rem;
  aspect-ratio: 1/1;
  filter: drop-shadow(1pt 1pt 3pt var(--chip-border1));
  transform: rotate(8deg);
}

#chip-content > h1,
#chip-content > h2 {
  /* font-size: 2.5em; */
  background-color: rgb(58, 56, 70);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: var(--text-engrave) 0.6pt 0.8pt 1pt;
}

#chip-content > h2 {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.4em;
  transform: rotate(-8deg);
}
#chip-content > h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  letter-spacing: 2pt;
  font-size: 3.8em;
  transform: rotate(-8deg);
}
#chip-content::before {
  content: "";
  position: absolute;
  inset: 0; /* width: 100%; height: 100%; */
  z-index: -1;
  background-color: var(--chip-color);
  --lg1: var(--chip-color);
  --lg2: #c1bfd1;
  background: linear-gradient(
    135deg,
    var(--lg2) 0%,
    var(--lg1) 10%,
    var(--lg2) 20%,
    var(--lg1) 50%,
    var(--lg2) 80%,
    var(--lg1) 90%,
    var(--lg2) 100%
  );
  border-radius: 5pt;
  border: 2px dotted var(--chip-border2);
  border-radius: 5pt;
  transform: rotate(-8deg);
  pointer-events: none;
}

/* @media all and (min-width: 691px) { */
/* div#chip-content { */
/* width: 40rem; */
/* height: 40rem; */
/* } */
/* div#accent1 {
    width: 45rem;
    height: 45rem;
    margin-top: 10vh;
  } */
/* } */

@media all and (min-width: 691px) {
  div#chip-container {
    padding-top: 10vh;
    padding-bottom: 10vh;
  }
}

@media all and (max-width: 690px) {
  #chip-content > h1 {
    font-size: 3.5em;
  }
  div#chip-container {
    padding-top: 6vh;
    padding-bottom: 6vh;
  }
  div#chip-content {
    width: 35rem;
  }
}