@media (max-width: 1040px) {
  html{
    font-size: 13px;
  }

    .book{
      font-size: 1.2rem;
    }
    .book2{
      font-size: 1.5rem;
    }
    .flex1{
      display: flex;
    }
    .circle{
      height: 8.2rem;
      width:8.2rem;
      margin-right:auto;
    }
    .caption{
      margin-right:2rem;
    }
    .form1{
      margin-left: 10rem;
      margin-right:5rem;
    }
    .div{
      margin-left: 1rem;
    }
    .footer-text{
      width:170%;
    }
    .footer-text, .footer-title{font-size: 1rem;}

    #top{
        background-color: #004651;
        border-radius: 0 0 10rem 0;
        padding-right: 5rem;
        height:45rem;
    }
    #logo{
      width: 20%;
    }
    #a1{
      width:10%;
      margin-top: 2rem;
      margin-left:20rem;
      margin-right: 1rem;
    }
    #button1{
      width:20%;
    }
    #a2{
      width:10%;
      margin-top:2rem;
    }
    #button2{
      width:20%;
    }
    #text1 { /* done */
        font-size: 2.375rem;
        margin-top: 5rem;
    }
    #button3 { /* done */
        margin-top: 1.5rem;
        width:80%;
    }
    #image1 { /* done */
        margin-left:4rem;
        margin-top: 3rem;
        width: 100%;
        height: auto;
    }

    #paragraph2 { /* done */
        padding-right: 13.938rem;
        padding-left: 8.813rem;
    }
    #p1{
      margin-top: 3rem;
      height:auto;
    }
    #p2{
      margin-top:0.2rem;
    }
    #h2{
      margin-top: 2rem;
    }
    #button4{
      width:20%;
    }
    #image2{
      width:70%;
      height:auto;
    }
    #blue-box{
      margin-top: 6rem;
      padding-left: 8.813rem;
    }
    #p3{
      font-size:1.4rem;

    }
    #p4{
      margin-left: 8.813rem;
    }
    #dark-box{
      height: auto;
    }

    #step1, #step2, #step3, #step4, #step5, #step6 {display:flex; margin-top: 3.188rem; margin-right: 4rem;}
    #step1, #step3, #step5{margin-left:0; }
    #step2, #step4, #step6{margin-left:0;}
    #button5{ width: 30%; margin-bottom:3.313rem; }
    #blue-box2{
      height:auto;
      margin-top:20rem;
      padding-top: 35rem;
    }
    #p5{
      height: 100%;
      width:60%;
    }
    #image3{
      margin-left: 8.813rem;
      margin-top: 19rem;
      width:60%;
      height: auto;
    }
    #p6{
      height:auto;
    }
    #p7{
      margin-top: 5rem;
      width:80%;
      margin-left:0;
      padding: 0;
    }
    #statement{
      height: auto;
    }

    #name, #message{width:160%;}
    #email, #number{width:80%;}
    #number{margin-left: 0;}
    #button6{width:100%  }
    #T1{margin-left:15rem}
    #T2{margin-left: 20rem}
    #div1{margin-left:4rem }
    #follow{padding-left: 3rem; }
    #copyright{font-size: 0.8rem;}


}
@media (max-width:880px) {

  .circle{
    height: 8rem;
    width:8rem;
    margin-right:auto;
  }


  #top{
      background-color: #004651;
      border-radius: 0 0 10rem 0;
      padding-right: 5rem;
      height:45rem;
  }
  #logo{
    width: 20%;
    margin-right: 15rem;
    height:30%;
  }
  #a1{
    width:10%;
    margin-top: 3rem;
    margin-left:0rem;
    margin-right: 2rem;
  }
  #button1{
    width:20%;
  }
  #a2{
    width:10%;
    margin-top:3rem;
  }
  #button2{
    width:20%;
  }

  #button3 { /* done */
      margin-top: 1.5rem;
      width:70%;
  }
  #image1 { /* done */
      margin-left:4rem;
      margin-top: 3rem;
      width: 150%;
      height:auto;
  }
  #button4{
    width:30%;
  }
  #image2{
    width:70%;
    height:auto;
  }
  #blue-box{
    margin-top: 6rem;
    padding-left: 8.813rem;
    height:42rem;
  }
  #p3{
    font-size:1.4rem;

  }
  #p4{
    margin-left: 8.813rem;
  }
  #dark-box{
    height: auto;
  }
  #step1, #step2, #step3, #step4, #step5, #step6 {width:100%;}
  #button5{ width: 40%; margin-bottom:3.313rem; }
  #blue-box2{
    height:auto;
    margin-top:20rem;
    padding-top: 25rem;
  }

  #image3{
    margin-left: 8.813rem;
    margin-top: 19rem;
    width:60%;

  }
  #p7{
    margin-top: 4rem;
  }
  #hr{
    width:55%;
  }

  #follow{
    padding-left: 5rem;
  }
}
@media (max-width:799px){
  .circle{
    padding-top: 2.5rem;
    width:7.5rem;
    height:7.5rem;
    margin-right: auto;
  }
    .flex1{
      display: contents;
    }
    .flex2{
      display: flex;
    }
    .form1{
      margin-left: 0rem;
      margin-top:2rem;
      width:30%;
    }
    .div{width:100%; }
    #top{
      padding-right: 0rem;
      height:auto;
      padding-bottom: 2rem;
    }
    #logo{
      margin-left: 12rem;
      width:30%
    }
    #a1{
      width:20%
    }
    #button1{
      width:30%;
      margin-top:3rem;
      margin-left:5rem;
    }
    #a2{
      width:20%
    }
    #button2{
      width:30%;
      margin-top:0rem;
    }
    #image1{
      margin-left: 0rem;
      width:100%;
      margin-bottom: 2rem;
    }
    #button3{
      width:40%;
    }
    #p3{
      margin-bottom: 0rem;
    }
    #blue-box{
      height: auto;
      padding-bottom: 2rem;
    }
    #dark-box{
      width:90%;
      padding-right: 1rem;
      margin-left:4rem;
    }
    #ending{
      height: auto;
      margin-top: 6rem;
      padding-bottom: 5rem;
    }
  #T1{margin-left: 2rem;margin-top: 5rem;}
  #T2{margin-left: 6rem;margin-bottom: 6rem;}
  #footer{
    height:auto;
    padding-bottom: 2rem;
    padding-left: 8rem;
  }
  #div1{margin-left: 1rem;}
  #follow{margin-left: 1rem;padding-left: 0rem;}
}
@media(max-width:700px){
  .form1{
    margin-right: auto;
    width:50%;
  }
  .flex2{
    display: contents;
  }
  .header1, .header2{height: auto;}
  .circle{width:9rem;height:9rem; position: absolute;}
  .caption{margin-right:0rem;margin-left: 20rem;position: absolute;padding-top: 2rem;}
  #logo{margin-left: 5rem; width: 40%;}
  #a1{margin-left: 0rem;}
  #button1, #button2{width: 31%;margin-left: 0rem;}
  #button3{width:40%;}
  #middle1, #top, #blue-box{padding-left:2rem;}
  #blue-box{width:100%}
  #paragraph1{width:100%;}
  #paragraph2{padding-left: 2rem; width: 100%;padding-right: 0rem;}
  #image2{margin-left: 3rem;width:90%;}
  #p4{margin-left: 4rem;}
  #dark-box{padding-left:2rem;margin-left:1rem;width:100%;}
  #title2{margin-left: 1rem;}
  #image3{margin-left:2rem; width:90%;}
  #p5{width:90%;}
  #blue-box2{
    padding-top: 35rem;padding-left: 3rem; width:100%;
  }
  #button4{margin-left: 3rem; width:40%;}
  #timeline{padding-left:2rem;}
  #ending{padding-left: 3rem;}
  #footer{padding-left:3rem;}
  #hr{display: none;}
  #circle2, #caption2{margin-top: 10rem;}
  #circle3, #caption3{margin-top:20rem;}
  #circle4, #caption4{margin-top:30rem;}
  #circle5, #caption5{margin-top:40rem;}
  #statement{margin-top:50rem;}
  #ending{margin-top: 35rem;}
  #T1{margin-top: 1rem; margin-left: 0rem; text-align: center;}
  #T2{margin-left:0rem; text-align: center; }
}
@media(max-width:630px) {
  #logo1{width:30%;}
  #blue-box2{padding-top: 30rem;}
  #ending{margin-top: 40rem;}
}
@media(max-width:560px) {
  #blue-box2{padding-top: 25rem;}
}
@media(max-width:520px) {
  #blue-box2{padding-top: 20rem;}
}
@media(max-width:455px) {
  .header2{width:auto;}
  #blue-box2{padding-top: 15rem;}
  #ending{margin-top: 50rem;}
  #logo1{width:40%;}

}
@media(max-width:380px) {
  .caption{margin-left: 15rem;}
  #blue-box2{padding-top: 10rem;}
  #ending{margin-top: 55rem;}
  #logo1{width:50%;}
}