#author {
  font-size: 10px;
  font-style: italic;
}

.svg_example_container {
    display: flex;
    justify-content: baseline;
    border: 1px solid black;
    padding: 10px;
    align-items: center;
    flex-wrap: wrap;
    background-color: #ffe8af;
}

.left_content {
width:50%;
}

.right_content {
  width: 48%;
}

.double_content {
  display: flex;
}

.right_content {
  margin-left: 2%;
}
.area_4_pieces {
  display: flex;
}

.bold_higlight {
  font-weight: bold;
}

.animation{
 animation: rotation 5s infinite linear;
}


.bold_higlight_code {
  font-weight: bold;
  font-size: 12px;
  border: 1px solid black;
  background-color: white;
}

.bold_explanation {
    font-style:bold;
}

.explanation_designs {
  border:1px solid black;
  padding:10px;
  background-color: #ffe8af;
}

.explanation_designs_4pc {
  border:1px solid black;
  padding:10px;
  background-color: #ffe8af;
  margin-left: 1%;
  width:24.25%;
}

.explanation_designs_4pc_nomargin {
  border:1px solid black;
  padding:10px;
  background-color: #ffe8af;
  width:24.25%;
}

.explanation_designs_2 {
  border:1px solid black;
  padding:10px;
  background-color: #ffe8af;
  width:25%;
  margin-left: 1%;
}
.explanation_designs_75 {
  border:1px solid black;
  padding:10px;
  background-color: #ffe8af;
  width:75%;
}
.area_2_pieces {
  display: flex;
}

@keyframes rotation { 
  from { 
    transform: rotate(0) 
  } 
  to { 
    transform: rotate(360deg) 
  } 
}

.animation svg {
  animation: rotation 5s infinite linear;
}