/* circle */
 
.circle {
    padding:16px;
    border-radius:16px;
    background-color:#ffffff
}
 
section {
    width: 80%;
    margin:32px auto;
}
 
/* orange box */
 
header {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    background-color:#FFA54A;
    padding:8px 8px;
}
 
.left {
    display:flex;
    flex-direction:row;
    gap:4px
}
 
.right {
    display:flex;
    flex-direction:row;
    gap:4px
}
 
/* green box */
 
.green {
    display:flex;
    flex-wrap: wrap;
    padding: 8px 8px;
    gap:4px;
    background-color:#21D099;
}
 
/* pink box */
 
.pink {
    display:flex;
    flex-direction: column;
    align-items:center;
    padding: 8px 8px;
    gap:4px;
    background-color:#D881D5;
}
 
/* blue box */
 
.blue-top {
    display:flex;
    justify-content:center;
    padding: 8px 8px;
    gap:4px;
    background-color:#72AAF5;
    margin: 16px auto;
    
}
 
.blue-mid {
    display:flex;
    justify-content:space-evenly;
    padding: 8px 8px;
    gap:4px;
    background-color:#72AAF5;
    margin: 16px auto;
}
 
.blue-bot {
    display:flex;
    justify-content:space-between;
    padding: 8px 8px;
    gap:4px;
    background-color:#72AAF5;
    margin: 16px auto;
}