@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
body {
    margin: 0;
    background-color: white;
    
}   
.wrapper1 {
    display: flex;
   gap: 20px;
   margin: 20px;
   flex-direction: column;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.wrapper2 {
    display: flex;
   gap: 20px;
   margin: 20px;
    justify-content: space-around;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.wrapper3 {
    display: flex;
   gap: 20px;
   margin: 20px;
   font-family: 'Courier New', Courier, monospace;
}
.wrapper4 {
    display: flex;
    align-items: flex-start;
   gap: 20px;
   margin: 20px;
   font-family: roboto, sans-serif;
}
.quarter_box   {
    flex: 25%;
    background-color: rgba(80, 234, 119, 0.587);
    padding: 2%;
}    
.third_box {
    background-color: rgb(80, 80, 234);
    padding: 2%;
    flex-basis: 20px;
}   
.half_box {
    flex: 50%;
    background-color: rgba(234, 149, 80, 0.587);
    padding: 2%;
}
.onethird_box { 
    flex: 33%;
    background-color: rgb(226, 5, 5);
    padding: 2%;
} 
.twothirds_box {
    flex: 66%;
    background-color: rgb(96, 246, 96);
    padding: 2%;
}