@media screen and (max-width: 480px) {


    body {
      margin: 0;
      display: grid;
      grid-template-columns:1fr;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
    
    }
    
      #home,
      #about,
      #projects,
      #contact{
    
        margin:5%;
      }
      
    .home-page,
    .about-page,
    .project-page,
      .contact-page{
        margin: 5%;
      
     width: inherit;
     height: inherit;
    
     border:1px solid #5c715e;
      }
    nav{
      width: 300px;
      height: 60px;
    }
    
    
      a{margin-top: 5%;
        font-size:10px;
        padding: 2px;
      }
     
      .side-bar,
      .project-text,
      .container3,
      .container2,
      .footer-bar
      {
        height:inherit;
        width: inherit;
        
      }
       
      .text-video-container,
      .project-container,
      .skill-container,
      .contact-box,
      textarea{
       margin: 1%;
        display: flex;
        flex-direction: column;
      width: inherit;
        height: inherit;
        border:1px solid #5c715e;
       }
    
      .text-container{
      
        align-self: center;
        
      }
     .text-video >video{
       padding-left: 3%;
       width: 90%;
  
       height: 150px;
      
     }
      h1{
        margin-left: 30px;
        white-space: normal;
        font-size: 1.2rem;
        line-height: normal;
      
      }
    
      p{font-size: 16px;
        white-space: normal;
        align-items: center;
        line-height: normal;
       
      
      }
    .contact-text{
      font-size: 1.4rem;
    margin: 10px;
    }
      textarea{
        margin-left: 15px;
        width: 250px;
        height: 200px;
      }
    button{
      align-items: center;
    font-size: 10px;
    margin-left: 30px;
    height: 30px;
      width: 120px;
       
    }
    
    .contact-btn{
      margin-left: 80px;
    }
    
    .icon-bar> a{
      align-items: center;
      margin-left:15px;
      font-size: 8px;
      
    
      
    }
    
    .aboutme{
      width: inherit;
    }
    .contact-container{
      display: flex;
      flex-direction: column;
      width: inherit;
      padding: 5px;
    }
    
    .project-text {
      margin-top: 10px;
      padding: 20px;
      width: inherit;
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      line-height: 1.5rem;
      font-size: 1.2rem;
    }
  
    .slideshow-container2 > video{
      padding-left: 3%;
      width: 90%;
  
      height: 150px;
     
  
    }
    .project-btn{
      font-size: 10px;
      height: 30px;
    width: 80px;
    }
    .icon > a{
      
      font-size: 1.4rem;
      padding: 8px;
      margin-left: 15px;
      
    
    }
    }