:root {
  --color-black: #303030;
  --color-cyan: #00CCFF;
  --color-pink: #FF0092;
  --color-purple: #953FE3;
  --color-white: #FFFFFF;
}

body {
  background: transparent url("https://assets.codepen.io/11907/grid.png") repeat top left;
  font-family: 'Oi', cursive;
  margin: 1.75rem;
}

h1 {
  background-color: var(--color-black);
  border-right: 0.5rem solid var(--color-cyan);
  color: var(--color-white);
  font-weight: 400;
  font-size: 2.5rem;
  margin-top: 1rem;
  padding: 1rem;
  width: 6ch;
}

.circle,
.triangle,
.square {
  position: absolute;
}


.circle {
  --circle-size: 45vw;

  bottom: 0.5rem;
  background-color: var(--color-purple);
  border-radius: 100%;
  height: var(--circle-size);
  right: 1rem;
  width: var(--circle-size);
}

.triangle {
  --triangle-size: 3rem;

  border-color: transparent transparent var(--color-pink) transparent;
  border-style: solid;
  border-width: 0 var(--triangle-size) calc(var(--triangle-size) * 2) var(--triangle-size);
  bottom: 2rem;
  height: 0;
  right: 9rem;
  transform: rotate(-4deg);
  width: 0;
}

.square {
  --color-cyan: top;
  --square-size: 3rem;

  background-color: var(--color-cyan);
  border: 0.25rem dashed var(--color-white);
  bottom: 4rem;
  height: var(--square-size);
  right: 3rem;
  width: var(--square-size);
  transform: rotate(3deg);
}