*{
    margin: 0;
    padding: 0;
}
body{
    background-image:linear-gradient(to bottom right, rgb(217, 233, 196),#EEF2F7);
    background-repeat: no-repeat;
    background-size: cover;
}

.abt h1{
    padding-top: 50px;
    font-size: 50px;
   color:brown;
     text-align: center;
}
.abt p{
    line-height:1.7;
  
    word-wrap: break-word;
     
    text-align: center;
    
        font-size:24px;
    
    
}
.header {
  overflow: hidden;
  background-image:linear-gradient(to bottom right, white,orange);
  padding: 20px 10px;
    
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 10px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color:lightblue;
  color:black;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}
footer{
    margin-top: 70px;
     background-image:linear-gradient(to bottom right, white,orange);
     text-align: center;
     position: fixed;
      left: 0;
     bottom: 0;
    width: 100%;
 
    color:black;
}
  
@media(max-width:320px){
  
    .header {
  overflow: hidden;
  background-image:linear-gradient(to bottom right, white,skyblue);
  padding: 20px 10px;
    
}

.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 20px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 20px;
  font-weight: bold;
}

    
    .abt h1{
    font-size:15px;
   color:purple;
}
.abt p{
    line-height: 1.2;
    border: 1px solid #000000;
    line-height:2px
    word-wrap: break-word;
    padding-left:10px;
    float: left;
    font-size: 9px;
} 
    footer{
    margin-top: 40px;
    font-size:12px;
     background-image:linear-gradient(to bottom right, white,skyblue);
     text-align: center;
     position: fixed;
      left: 0;
     bottom: 0;
    width: 100%;
 
  color:black;
  
}
    
}
    
@media(max-width:375px){
    
    .abt h1{
    font-size:17px;
   color:rgb(128, 77, 0);
}
.abt p{
    line-height:1.4;
    border: 1px solid #000000;
    line-height:2px;
    word-wrap: break-word;
    padding-left:10px;
    float: left;
    font-size:16px;
}  
    .header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 10px; 
  line-height:3px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 13px;
  font-weight: bold;
}
    footer{
    margin-top: 40px;
    font-size:8px;
     background-image:linear-gradient(to bottom right, white,skyblue);
     text-align: center;
     position: fixed;
      left: 0;
     bottom: 0;
    width: 100%;
 
  color:black;
  
}
}
@media(max-width:425px){
    
    .abt h1{
    font-size:19px;
   color:purple;
}
.abt p{
    line-height:1.5;
    border: 1px solid #000000;
    line-height:2px
    word-wrap: break-word;
    padding-left:10px;
    float: left;
    font-size: 16px;
}  
     .header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 14px; 
  line-height:3px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 13px;
  font-weight: bold;
}
    footer{
    margin-top: 40px;
    font-size:10px;
     background-image:linear-gradient(to bottom right, white,skyblue);
     text-align: center;
     position: fixed;
      left: 0;
     bottom: 0;
    width: 100%;
 
  color:black;
  
}
}
@media(max-width:768px){
    
    .abt h1{
    font-size:22px;
   color:purple;
}
.abt p{
    line-height:1.6;
    border: 1px solid #000000;
    line-height:2px
    word-wrap: break-word;
    padding-left:10px;
    float: left;
    font-size: 17px;
}  
     .header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 13px; 
  line-height:3px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 15px;
  font-weight: bold;
}
    footer{
    margin-top: 40px;
    font-size:10px;
     background-image:linear-gradient(to bottom right, black,green);
     text-align: center;
     position: fixed;
      left: 0;
     bottom: 0;
    width: 100%;
 
  color:black;
  
}
}