body{
    margin: 0;
    background-color: white;
}

.wrapper1{
    display: flex;
    gap: 20px;
    margin: 20px;
    flex-direction: column;
}
.wrapper2{
    display: flex;
    gap: 20px;
    margin: 20px;
    justify-content: space-around;
}
.wrapper3{
    display: flex;
    gap: 20px;
    margin: 20px;
    align-content: space-around;
}
.wrapper4{
    display: flex;
    gap: 20px;
    margin: 20px;
    align-items: flex-start;
    justify-content: space-evenly;
}

.quarter_box{
    flex: 25%;
    background-color: rgb(165, 106, 220);
    padding: 2%;
}

.third_box{
    flex-basis: 200px;
    background-color: rgb(94, 94, 180);
    padding: 2%;
}

.half_box{
    flex-wrap: 50%;
    background-color: rgb(200, 114, 114);
    padding: 2%;
}

.onethird_box{
    flex-basis: 100px;
    background-color: rgb(147, 215, 215);
    padding: 2%;
    
}

.twothird_box{
    flex-basis: 200px;
    background-color: rgb(238, 191, 130);
    padding: 2%;

}