.frame {
  border: clamp(16px, 6vw, 50px) solid black;
  width: clamp(280px, 90vw, 500px);
  padding: clamp(6px, 2vw, 10px);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.canvas {
  width: 100%;
  aspect-ratio: 5 / 6;
  background-color: var(--accent-color-brown);
}

/* Shared styles for top and middle color blocks */
.one, .two, .three {
  display: block;
  margin: 10px auto; 
  box-sizing: border-box;
  filter: blur(1px);
}

/* Top color block */
.one {
  width: 90%; 
  max-width: 450px;
  height: 25%;
  background-color: var(--accent-color-dteal);
  box-shadow: 0 0 3px 3px var(--accent-color-dteal);
  border-radius: 9px;
  transform: rotate(-0.6deg);
  aria-hidden: true; 
}

/* Middle color block */
.two {
  width: 95%;
  max-width: 475px;
  height: 33%;
  background-color: var(--accent-color-lteal);
  box-shadow: 0 0 3px 3px var(--accent-color-lteal);
  border-radius: 8px 10px;
  transform: rotate(0.4deg);
  aria-hidden: true;
}

/* Bottom color block */
.three {
  width: 90%;
  height: 28%;
  background-color: var(--accent-color-gold);
  box-shadow: 0 0 5px 5px var(--accent-color-hold);
  border-radius: 30px 25px 60px 12px;
  margin: 10px auto;
  filter: blur(2px);
  aria-hidden: true;
}