/* 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;
}