@import url('https://fonts.googleapis.com/css2?family=BBH+Bogle&family=Lexend:wght@100..900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

h1 { width: 70%;height: 9%;border-bottom: 2px solid gray;margin-top: 5%;padding-top: 2%;margin-left: 10%;
        font-family: 'Montserrat Alternates', sans-serif;font-size: 35px;font-weight: 500; }
.p1 { height: 14%;width: 100%;width: 70%;font-family: 'Nunito', sans-serif;font-size: 22px;
        margin-left: 10%;}
h2 { width: 70%;height: 9%;border-bottom: 2px solid gray;margin-top: 5%;padding-top: 2%;margin-left: 10%;
       font-family: 'Montserrat Alternates', sans-serif;font-size: 35px;font-weight: 500; }
.p2 { height: 20%;width: 100%;width: 70%;font-family: 'Nunito', sans-serif;font-size: 22px;
        margin-left: 10%;}
h3 { height: 5%;width: 70%;margin-left: 13%;border-left: 2px solid gray;padding-top: 1%;padding-left: 1%;font-family: 'Nunito', sans-serif;font-size: 25px;margin-top: 3%; }
.p1a { height: 14%;width: 70%;margin-left: 13%; width: 65%;font-family: 'Nunito', sans-serif;font-size: 22px; }
.lst1 { height: 40%;width: 70%;margin-left: 10%; }
.lst1 li { font-size: 22px;font-family: 'Montserrat Alternates', sans-serif;list-style: none;;margin-top: 2%;font-weight: 300;font-style: italic; }
.p3 { height: 10%;width: 100%; width: 70%;font-family: 'Nunito', sans-serif;font-size: 22px;
    margin-left: 10%;}

@media screen and (max-device-width: 1550px) { #fc1 { width: 45%;height: 13%;padding-right: 25%; }}
@media screen and (max-device-width: 1255px) { #fc1 { width: 70%;padding-right: 0%;height: 11%; } h1  { font-size: 30px; } h2 { text-align: center;font-size: 30px;height: 8%; }
                                                .p2 { height: 27%;line-height: 35px; } }
@media screen and (max-device-width: 1050px) { .p1 { height: 18%; } .p2 { height: 32%; } #fc1 { width: 80%; } h2  { width: 80%;font-size: 25px; } }
@media screen and (max-device-width: 850px) { .p1 { height: 22%; } .p2 { height: 45%; } .p3 { height: 15%; } .p1a { height: 20%; } }
@media screen and (max-device-width: 610px){ h1 { font-size: 25px; } .p2 { height: 65%; } .p1a { height: 30%; } h2 { font-size: 22px; } .lst1 li { font-size: 18px;margin-top: 7%; }  }
@media screen and (max-device-width: 500px)  { #fc1 { height: 14%;line-height: 35px; } .p1 { height: 35%;font-size: 18px;line-height: 35px; } .p2 { height: 70%;font-size: 18px; }
                                                h3 { height: 10%;font-size: 22px; } .p1a { font-size: 18px;line-height: 35px;height: 35%; } .p3 { font-size: 18px;line-height: 35px;height: 20%; }  }
@media screen and (max-device-width: 400px) { #fc1 { height: 16%; } .lst1 { height: 50%; } .lst1 li { margin-top: 12%; } h2 { height: auto; }}
@media screen and (max-device-width: 400px) { #fc1 { height: auto; } h2 { width: 90%;;margin-left: 5%;margin-top: 10%;margin-bottom: 10%; } .p2 { height: auto;padding-top: 10px; } 
                                                .h3 { margin-top: 5%;margin-bottom: 5%; } }
@media screen and (max-device-width: 340px) { .p2 { height: auto; } h2 { height: auto; } .p1 , .p3 , .p1a , #fc1 , .lst1 , h3 { height: auto; } }

.spc1 { height: 10%;width: 70%;margin: 0 auto;margin-top: 5%;display: flex;flex-direction: row; }
.spc1 button { height: 80%;background-color: whitesmoke;box-shadow: 1px 1px 1px 2px gray;border-radius: 10px;width: 25%;margin-left: 5%;border: none;
                font-size: 25px;font-family: 'Nunito', sans-serif;margin-top: 1%; }

@media screen and (max-device-width: 1400px) { .spc1 button:nth-child(2) { width: 30%; } }
@media screen and (max-device-width: 1150px) { .spc1 button { font-size: 20px;height: 60%;margin-top: 0.5%; } }
@media screen and (max-device-width: 910px) { .spc1 button , .spc1 button:nth-child(2) { width: 40%;border-radius: 15px;height: 70%;  }    }
@media screen and (max-device-width: 685px) { .spc1 { width: 90%; } }
@media screen and (max-device-width: 530px) { .spc1 button , .spc1 button:nth-child(2) { width: 45%;font-size: 18px;border-radius: 5px;height: 65%;margin-left: 3%; } .spc1 { width: 100%; } }
@media screen and (max-device-width: 410px) { .spc1 { display: flex;flex-direction: column;height: 20%;margin-left: 0%;width: 60%;margin: 0 auto; } 
                                                .spc1 button , .spc1 button:nth-child(2) { height: 35%;margin-top: 7%;width: 100%;margin-left: 0%; } }
@media screen and (max-device-width: 300px) { .spc1 { width: 80%;margin-top: 10%; } }