body {
margin: 0;
background: #f2e6d5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.canvas {
position: relative;
width: 400px;
height: 600px;
}

.shape {
position: absolute;
}

.blue {
background: #1f4e5f;
}

.pink {
background: #f06d7a;
}

.circle {
border-radius: 50%;
}

.big {
width: 150px;
height: 150px;
}

.small {
width: 80px;
height: 80px;
}

.square {
width: 140px;
height: 140px;
}

.semi {
width: 150px;
height: 75px;
border-radius: 0 0 75px 75px;
}

.triangle {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-bottom: 60px solid #1f4e5f;
}

.top-left { top: 0; left: 0; }
.top-center { top: 0px; left: 130px; }
.top-right { top: 0; right: 0; }
.top-corner { top: 0; right: 10; }

.mid-left { top: 150px; left: 0; }
.mid-center { top: 150px; left: 120px; }
.mid-right { top: 150px; right: 0; }

.bottom-left { bottom: 230px; left: 40px; }
.bottom-center { bottom: 160px; left: 120px; }
.bottom-right { bottom: 230px; right: 0px; }
.bottom-corner { bottom: 0; left: 140px; }