media-queries.css

@media screen and (max-width:1130px){
    #content{
      background-size: 1500px 800px;
    }
    h1{
       font-size: 30px;
    }
   h3{
      font-size: 30px;
    } 
    p{
       font-size:30px ;
    }
    #skills{
       height: 150px;
       width: 150px;
    }
    #motivation{
      
       margin-left: 10px;
    }
    #m-text{
      margin-left: 10px;
   }

   #mask{
      display: none;
   }

   
  
  
    
} 

/* MAX-WIDTH = 700 */

@media screen and (max-width:700px){
    #content{
      background-size: 1400px 800px;
      
      
    }
    h1{
       font-size: 26px;
    }
   h3{
      font-size: 26px;
    } 
    p{
       font-size:23px ;
    }
      a{
          font-size: 23px;
       }
       #skills{
          height: 100px;
          width: 100px;
       }
       #motivation{
          margin-left: 10px;
          
       }
       #m-text{
         margin-left: 10px;
      }
      #mask{
         display: none;
      }
     
    
    }
 

/* MAX-WIDTH = 600PX */

 @media screen and (max-width:600px){
    #content{
      background-size: 1400px 800px;
      
      
    }
    h1{
       font-size: 26px;
    }
   h3{
      font-size: 24px;
    } 
    p{
       font-size:22px ;
    }
      a{
          font-size: 22px;
       }
       #skills{
          height: 100px;
          width: 100px;
       }
       #motivation{
          margin-left: 10px;
          
       }
       #m-text{
         margin-left: 10px;
      }
    
      #mask{
         display: none;
      }
      #cont{
         height: 60px;
         width: 60px;
         padding: 10px;
      }

      #c{
         margin-left: 10px;
         height: 200px;
         width: 300px;
      }
     

    
 }
 

  

/* MAX-WIDTH = 500PX */
 
 @media screen and (max-width:500px){
    #content{
      background-size: 1400px 800px;
      
      
    }
    h1{
       font-size: 26px;
    }
   h3{
      font-size: 24px;
    } 
    p{
       font-size:22px ;
    }
      a{
          font-size: 22px;
       }
       #skills{
          height: 100px;
          width: 100px;
       }
       #motivation{
          margin-left: 10px;
          
       }
       #m-text{
         margin-left: 10px;
      }
      #mask{
         display: none;
      }
      #cont{
         height: 60px;
         width: 60px;
         padding: 10px;
      }
     
      #c{
         margin-left: 10px;
         height: 200px;
         width: 300px;

      }
     

    
 }
  

/* MAX-WIDTH = 400PX */
 
 @media screen and (max-width:480px){
    #content{
      padding-top: 100px;
      background-size: 590px 400px;
      height: 400px;
    
   }
    h1{
       letter-spacing: 0px;
       font-size: 14px;
       color: white;
       
    }
   h3{
      letter-spacing: 0px;
      font-size: 14px;
      color:white;
     
    } 
    p{
       font-size:14px ;
      
    }


    #skills{
       height: 80px;
       width: 80px;
    }
   
    
    a{
       font-size: 14px;
    }
    #motivation{
       margin-left: 10px;
       
    }
    #m-text{
      margin-left: 10px;
   }
   #mask{
      display: none;
   }
   #cont{
      height: 60px;
      width: 60px;
      padding: 10px;
   }
  
   #c{
      margin-left: 10px;
      height: 200px;
      width: 300px;

   }
  

  
 }
 
  

/* MAX-WIDTH = 330PX */
 
 @media screen and (max-width:330px){
    #content{
      padding-top: 100px;
      background-size: 590px 400px;
      height: 400px;
    }
    h1{
       letter-spacing: 0px;
       font-size: 14px;
       color:white;
       
    }
   h3{
      letter-spacing: 0px;
      font-size: 14px;
      color: white;
     
    } 
    p{
       font-size:14px ;
      
    }
    
    
    #skills{
       height: 20px;
       width: 20px;
       padding: 5px;
       
    }
    
    a{
       font-size: 14px;
    }
    #motivation{
       margin-left: 10px;
       
    }

    #m-text{
      margin-left: 10px;
   }
   
   #mask{
      display: none;
   }
   #cont{
      height: 60px;
      width: 60px;
      padding: 10px;
   }

  #c{
     margin-left: 10px;
     height:200 ;
     width: 200;

   }

   

  }