body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color:whitesmoke;
}

header{
    display: flex;
    width: auto;
    background-color:white;
    flex: 1;
}

header .header-container{
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    flex: 1;
}

header .navbar{
    display: flex;
    flex: 1;
    justify-content: end;
}

header .header-title{
    display: flex;
    text-align: center;
    font-size: small;
}

header .nav-link{
    display: flex;
    align-items: center;
    position: relative;
}

header .nav-link:hover{
    border-bottom: #F1C232 solid 4px; 
}

header .nav-links{
    padding: 0;
    margin: 0;
    display: flex;
    text-decoration: none;
    list-style: none;
    font-size: larger;
    column-gap: 10px;
}

header .vertical-menu{
    position: absolute;
    top: 100%;
    width: 100px;
    box-shadow: 1px 1px 1px black;
}

header .vertical-menu a{
    display: block;
    background-color: white;
    text-align: center;
}

header .vertical-menu a:hover{
    background-color: darkgray;
}

header .vertical-menu a.active{
    background-color: lightgray;
}

header img{
    width: 25px;
    height: 25px;
}

header a{
    text-decoration: none;
    color: #000;
}

.section-bh{
    max-width: 1000px;
    height: 300px;
    margin: 0 auto;
    background-image: url(./5q92mjc5c51bjlwaj3rs9aa82.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    padding: 20px 0;   
    flex: 1;
}

.section-bh .section-title{
    text-decoration: none;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    line-height: 400%;
}

.section-bh .welcome{
    color: #016A7D;
    text-align: center;
}

.section-bh .title-name{
    font-size: 300%;
    color: white;
    text-align: center;
}

.section-bh .grade{
    color: #F1C232;
    text-align: center;
}

.section-pa{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    background-color: white;
    flex: 1;
}

.section-pa .pa-image img{
    width: 500px;
    height: 600px;
    background-image: url(./Mr.Eddie.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    border-radius: 5%;
    flex: 1;
}

.section-pa .section-about{
    list-style: none;
}

.section-pa .section-about h2{
    color:#016A7D;
}

.section-pa .section-about a{
    color:#016A7D;
}

.section-pa .button1{
    width: 120px;
    height: 60px;
    background-color: #F1C232;
    text-decoration: none;
    justify-content: center;
    border-radius: 5%;
    flex: 1;
}

.section-ps{
    max-width: 1000px;
    height: auto;
    margin: 0 auto;
    display: flex;
    text-align: center;
    justify-content: space-around;
    line-height: 400%;
    flex: 1;
}

.section-ps .score1{
    color: #F1C232;
    font-size: 400%;
    list-style: none;
    text-align: center;
    position: relative;
    top: 10px;
}

.section-ps .score2{
    color: #016A7D;
    font-size: 400%;
    list-style: none;
    text-align: center;
    position: relative;
    top: 10px;
}

.section-ps .info-score{
    list-style: none;
    text-align: center;
    position: relative;
    top: 10px;
}

.section-pw{
    max-width: 1000px;
    width: 980px;
    height: auto;
    margin: 0 auto;
    background-image: url(./pngtree-simple-yellow-background-pasta-machine-psd-layered-master-map-background-material-image_128498.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    padding: 20px 10px;   
    flex: 1;
}

.section-pw p{
    text-align: center;
    font-size: 250%;
}

.section-pb{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex: 1;
    display: flex;
    background-color: white;
    line-height: 200%;
    list-style: none;
}

.section-pb-doc img{
    width: 350px;
    height: 350px;
    border-radius: 5%;
    position: relative;
    top: 25px;
    right: 20px;
}

.section-pb-docs .section-pb-doc{
    list-style-type: none;
    display: flex;
}

.section-pb .section-pb-docs .section-pb-doc .pb-title{
    color: #016A7D;
}

.section-pb .section-pb-docs .section-pb-doc a{
    color: #016A7D;
}

.section-pb .section-pb-docs .section-pb-doc .pb-options{
    list-style: square;
}

.section-pb .section-pb-docs .section-pb-doc .button2{
    color: #F1C232;
    border: 2px solid #F1C232;
    border-radius: 5%;
    text-decoration: none;
}

.section-pb .section-pb-docs .section-pb-doc .pb-image{
    width: 300px;
    height: 300px;
    background-image: url(./Online_teaching.jpg);
    background-size: cover;
    background-position: left;
    border-radius: 5%;
}

.section-pi .pi-image{
    max-width: 1000px;
    height: 600px;
    margin: 0 auto;
    background-image: url(./Teachers.jpg);
    background-position: center;
    background-size: cover;
    padding: 20px 0;   
    flex: 1;
}

.footer{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex: 1;
}

.footer .span{
    color: darkgray;
    position: relative;
    top: 20px;
}

.footer a{
    color: darkgrey;
    text-decoration: none;
}

.footer .footer-about{
    display: flex;
    list-style: none;
    flex: 1;
}

.footer .footer-about a{
    text-decoration: none;
    color: darkgrey;
}

.footer .footer-links{
    list-style: none;
    justify-content: end;
    display: flex;
    column-gap: 10px;
}

.footer .footer-links img{
    width: 40px;
    height: 40px;
}