*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body{
    background-color: grey;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;    
}
.header{
     background-color:snow;
     height: 70px;
     color:white;
     width: 100%;
     position: fixed;
}
ul{
    display: inline;
}
.brand{
    float: left;
    color: black;
}
.nav-items{
float: right;
}
li{
    list-style: none;
    display: inline;
}
.mtop{
    margin: 21px;
    
}
.mleft{
    margin-left: 35px;
}
.a{
    text-decoration: none;
    color: black;
}
.home{
    padding-top: 50px;
    font-size: 75px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color:black;
}
.htop{
    margin: 25px;
    margin-left: 120px;
}
.p{
    font-size: large;
}
img{
    width: 45px;
    height: 40px;
    
}
.logo{
    float: left;
    margin-top: 20px;
}
.part1{
    background-image: url("../brick.jpeg");
    height: 100vh;
    width: 100%;
}
.sam{
color: snow;
text-align: center;
padding-top: 80px;
font-size: 22px;
}
p{
text-align: center;
color: snow;
font-size: 18px;
}
table{
text-align: center;
width: 50%;
height: 30px;

border: 1px solid black;
}
.level{
margin-left: 320px; 

}
.percent{
    height: 30px;
    background-color: snow;
}
.levels{
    height: 50px;
    width: 20px;
    background-color: coral;
}
.part2{
    height: 100vh;
    background-color: rgb(243, 167, 96); 
}
.percent1{
    height: 30px;
    background-color:snow;
}
.levels1{
    height: 50px;
    background-color: chocolate;
}
.level1{
    margin-left: 320px; 
}
.base{
    text-align: center;
    color: black;
}
h3{
    margin-left: 180px;
}
input[ type=text]{
    margin-left: 180px;
    width: 400px;
    height: 50px;
    border-radius: 8px;
    border: none;
    background-color: chocolate;
    box-shadow: 4px 4px  brown;
    font-size: 25px;
}
input[type=button]{
    background-color: brown;
    width: 120px;
    height: 50px;
    margin-left:250px ;
    border-radius: 8px;
    border: 1px solid snow;
    font-size: 20px;
    color: snow;
}
.base1{
    color: black;
    margin-right: 200px;
}
.per{
    height: 30px;
    background-color: snow;
}
.leve{
    height: 50px;
    width: 20px;
    background-color: coral;
}
.lev{
    /* margin-left: 250px; */
    background-color: mistyrose;
    width: 100%;
}
.lev1{
    margin-left: 250px;
}
.bod{
    border: 2px solid chocolate;
    width: 100px;
}
.inline{
    display: inline;
}
.toop{
    margin-top: 10px;
}
.color{
    color: white;
}
.logo1{
}
.part4{
    background-color: rgb(38, 38, 66);
    width: 100%;
    height: 40vh;
}