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

}

.wrapper1 {
    display:flex;
    gap:20px;
    margin:20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    flex-direction:column;
}

.wrapper2 {
    display:flex;
    gap:20px;
    margin:20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    justify-content:space-around;
}

.wrapper3 {
    display:flex;
    gap:20px;
    margin:20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    flex-direction: row-reverse;
    
}

.wrapper4 {
    display:flex;
    gap:20px;
    margin:20px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items: flex-end;
}

.quarter_box {
    flex-basis:100px;
    background-color: #D8DCFF;
    padding:2%;

}

.third_box {
    flex-basis:200px;
    background-color: #C3C5F8;
    padding:2%;

}

.half_box {
    flex-basis:300px;
    background-color: #AEADF0;
    padding:2%;
    align-self:stretch;
}

.onethird_box {
    flex:33%;
    background-color: #8282B3;
    padding:2%;

}

.twothird_box {
    flex:66%;
    background-color: #565676;
    padding:2%;

}