body {
  font-family: Arial, sans-serif; margin: 30px; background-color: #f5f5f5; color: #222; }

h1, h2 {
  margin-bottom: 10px; }

p {
  margin-bottom: 20px; }

.square,
.circle {
  width: 100px; height: 100px; display: inline-block; 
  margin: 10px; float: none; 
  }

.circle {
  border-radius: 50%; 
  }

#blockRed {
  background-color:aqua; }

#blockYellow {
  background-color: yellow; }

#circleRed {
  background-color: crimson; }

#circleYellow {
  background-color: gold; }

.shape-row {
  margin-bottom: 40px; 
  overflow: auto; 
  }


#container {
  margin: 0 auto; 
  width: 500px; height: 300px; position: relative; 
  margin-bottom: 40px; 
  }


.positioned {
  position: relative; 
  }

#abc {
  background-color: red; top: 80px; 
  left: 20px; 
  }

#insideYellow {
  background-color: yellow; top: 80px;
  left: 65px;
}

#insideBlue {
  background-color: royalblue; top: 80px;
  left: 105px;
}


#blockOverride {
  background-color: purple; position: relative; 
  top: 80px;
  left: 20px;
  margin-bottom: 100px; 
  }

.texture-box {
  width: 300px; height: 180px; border: 2px solid #333; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  color: white; font-weight: bold; background-image: url("images/wood.png");
  background-position: center;
  }


/* Modernist artwork recreation */
/* Carmen Herrera-inspired CSS composition */
.herrera-artwork {
  width: 420px;
  height: 520px;
  background-color: white;
  position: relative;
  margin: 40px auto;
  border: 8px solid #111;
  overflow: hidden;
}

.red-panel,
.blue-panel,
.white-cut {
  position: absolute;
  top: 0;
  height: 100%;
}

.red-panel {
  left: 0;
  width: 50%;
  background-color: #d71920;
}

.blue-panel {
  right: 0;
  width: 50%;
  background-color: #00327a;
}

.white-cut {
  left: 170px;
  width: 80px;
  background-color: white;
  transform: skewX(-14deg);
}