:root {
 --grid-line: rgba(255, 255, 255, 0.08);
 --box-border: rgba(255, 255, 255, 0.25);
}

/* subtle grid background */
body {
 background-image: linear-gradient(
 rgba(255, 255, 255, 0.05) 2px,
 transparent 2px
 ),
 linear-gradient(90deg, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
 linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
 background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
 background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

.spacer {
 width: 100%;
 height: 20vh;
 display: grid;
 place-items: center;
 font-weight: 600;
 letter-spacing: 0.02em;
 opacity: 0.8;
}

.main {
 position: relative;
 height: 200vh;
}

.container {
 position: absolute;
 width: 200px;
 height: 200px;
 display: grid;
 place-items: center;
 border: 2px dashed var(--box-border);
 border-radius: 12px;
}

.initial {
 left: 60%;
 top: 10%;
}

.container.second {
 left: 10%;
 top: 50%;
 width: 100px;
 height: 100px;
}

.second .marker {
 width: 100px;
 height: 100px;
}

.third {
 right: 10%;
 bottom: 3rem;
}

.marker {
 width: 200px;
 height: 200px;
 border-radius: 10px;
 outline: 1px dashed var(--grid-line);
 outline-offset: -6px;
 opacity: 0.6;
}

/* the moving canvas is the “box” */
canvas.box {
 width: 200px;
 height: 200px;
 border: dashed 1px #d2ceff;
 display: block;
 border-radius: 10px;
 background: transparent;
 z-index: 2;
}