how-why.css

body{
    background-color: #f6b3ad;
    font-family: 'Playfair Display', serif;

    /*border-sizing: border-box;*/
    
}

.top-half{ 
    /*display: flex;*/
    background:url(DiversityGroup.jpg);
    height: 98vh;
    /*justify-content: center;*/
}


nav {
    display: flex;
    /*flex-direction:column;*/
    padding-right:1500px;
    height: 7vh;
    position:fixed;
    top:0px;
}

.sub-container{
    display: flex;
    justify-content: center;
    margin-left:1%;
    margin-top:-1%;
}

.btn{
  margin:0;
  color: black;
  background-color:transparent;
  font-size: 50px;
  border:none;
}
.btn a {
 color:black;
}

.button{
    display:flex;
    justify-content: flex-start;
}

.title{
    display: flex-block;
    text-align: center;
    margin-top: 9%;
    color:black;
    background-color:#F6B3AD;
    height: 60vh;
    width:120vh;
    
}

section>div>p{
    font-size:18px;
    /*margin-top: 2%;*/
   
}
section>div>h1{
    font-size:3em;
}


.bottom-half{
    /*display:flex;*/
    
}
.container{
    display:flex;
}

p{
    margin:0%;
}

.block1{
    background-color: #F68B69;
    height:60vh;
    width:70vw;
    margin-top: 10%;
    /*font-size: 1.5em;*/
    font-size: 1.6vw;
    
}

.sub-block1{
    background-color:#FBE5CA;
    width: 30vw;
    height: 40vh;
    margin-top:14%;
    margin-left:-10%;

}

.img{
    height:40vh;
    width:30vw;
}

.paragraph1{
    margin-right: 15%;
    margin-left: 1%
}

.container2{
    display:flex;
    justify-content: flex-end;
}

.block2{

    background-color: #6A8CB2 ;
    height:60vh;
    width:70vw;
    margin-top: 5%;
    font-size: 3vw;;
}

.sub-block2{
    background-color: #FBE5CA;
    width: 25vw;
    height: 40vh;
    margin-top:13%;
    margin-right:-5%;
    z-index: 1;
    
}

.paragraph2{
    margin-left: 15%;
}

.img2{
    height:50vh;
    width:30vw;
}

.cont3{
    display: flex;
    justify-content: space-between; 
    margin-right:10%;
}

.graph1{
    margin-top:5%;
    height:50vh;
    width:30vw;
}

.graph2{
    margin-top:5%;
    height:50vh;
    width:30vw;
    margin-right:5%;
}

.block3cont{
    display:flex;
    justify-content:center;
    margin-top: 36%;

}
.block3{
    
    background-color: #F68B69;
    height:60vh;
    width:90vw;
    /*font-size: 1.5em;*/
    font-size: 2vw;
}

.par3{
    margin-left:1%;
    margin-top:1%;
}

.citing{
    display: flex;
    justify-content:center;
}

.block4{
    
    background-color: #E5E5E5;
    height:35vh;
    width:90vw;
    /*font-size: 1.5em;*/
    font-size: 2vw;
    margin-top: 10%;
}

ol{
    margin-top:-3%;
}
li{
    color:#74767a;
    font-size: 15px;
}



@media only screen and (max-width:800px){
    
    
    section>div>p{
    font-size:15px;
    margin-top: 2%;
   
}

.container2{
    display:flex;
    justify-content: flex-end;
}

    .block1{
      font-size:4vw;  
      width: 100%;
      height: 85vh
    }
    
    .block2{
       font-size:4vw;
       width: 100%;
    }
    
    .paragraph2{
        margin-left: 1%;
    }
    
    .sub-block1{
        display:none;
    }
    
    .sub-block2{
        display:none;
    }
    
    .cont3{
        display: flex;
        flex-direction: column;
    }
    
    .graph2{
        margin-top:60%;
    }
    
    .block3cont{
    margin-top: 58%;
}
  
}