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;
}

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

.spacer {
 height: 20vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

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

.container {
 position: absolute;
 width: 140px;
 height: 140px;
 border: 2px dashed var(--color-surface50);
 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
}

/* Start point */
.initial {
 left: 60%;
 top: 5%;
}

/* Down-the-page markers */
.second {
 left: 10%;
 top: 25%;
}

.third {
 right: 10%;
 top: 45%;
}

.fourth {
 left: 20%;
 top: 65%;
}

.fifth {
 left: 60%;
 top: 80%;
}

.sixth {
 left: 15%;
 top: 95%;
}

.marker {
 width: 100px;
 height: 100px;
 border-radius: 10px;
}

.box {
 width: 100px;
 height: 100px;
 z-index: 10;
 border-radius: 10px;
 background-image: url("https://assets.codepen.io/16327/flair-26.png");
 background-size: contain;
 background-repeat: no-repeat;
 background-color: transparent;
}