@media  (max-width: 600px){
    .hideOnMobile{
        display: none;
    }
    .menu-button{
        display: block;
    }
    
     nav{
        background-color: black;
       
        position: fixed;
        top: 1px;
        width:400px;
        box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
    } 
    
    main{
        width: 100%;
        margin-top: 10px;
    }
    .sidebar{
        display: block;
    }
    /* .sidebar a:active{
       right: -250px;
    } */
    .photo{
        display: block;
        width: 300px;
        float: right;
        margin-top: 100px;
        margin-right: 50px;
        border-radius: 50%;
        
    }
    
    #intro{
        color: white;
        margin-left: 10px;
        font-size: small;
        transition-property: all;
        font-family: 'Ubuntu','sans-serif';
        transition-duration: 2s;
    }
    #intro .text-1{
        margin-top: 30px;
        font-size: 20px;
       }
       #intro .text-2{
        font-size: 25px;
        font-weight: 600;
        margin-left: -3px;
       }
       #intro .text-3{
        font-size: 30px;
        margin: 5px 0;
       }
        #intro .text-3 span{
          color:  rgb(246, 173, 225);
          font-weight: 500;
        }
    .g p{
       font-size: 10px;
    }
    #techid{
        display: flex;
        align-items: center;
        justify-content:center;
        flex-direction: row;
        margin-top: 70px;
    }
    #gfg{
        position: absolute;
        width:60px;
        height: 60px;
        /* z-index: 5; */
        object-fit: fill;
        background-color: white;
        border-radius: 100%;
        border:rgb(173, 225, 246) 2px;
        object-position: center;
        top:0;
        left: 0;
        perspective: 200px;
        transform-origin: right center;
        transition: 0.5s all ease-in-out;
    }
    #gfg:hover{
        transform: rotateY(180deg);
    }
    .g{
        width: 60px;
        height: 60px;
        position: relative;
        top:0;
        left: 0;
        display: flex;
        justify-content: center;
        background-color: black;
        border-radius: 100%;
        perspective: 200px;
        
        object-fit: cover;
        align-items: center;
        text-align: center;
        flex-flow: column;
    }
    .p{
        font-size: 1px;
        text-align: center;
        color:white;
    }
    .gfg{
        width: 60px;
        height: 60px;
        perspective: 500px;
    }
    #link{
        margin-left: 10px;
        
    }
    #about{
         
         width: 90%; 
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content:space-evenly;
        flex-direction: column;
         margin-left: 10px;
    }
     
    #aboutme{
        width: 20px;
        margin-left: 90px;
        

       
    }
    #atext{
        margin-left: 20px;
        font-size: 20px;
        margin-bottom: 10px;
        color: rgb(173, 225, 246);
    }
    #atext:hover{
        color: white;
    }
    #secimg{
        height: 200px;
        width: 200px;
        margin-left: 20px;
        margin-top: 50px;
        border-radius: 20%;
    }
    #about p{
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        font-size: 10px;
        align-items: center;
        justify-content:space-evenly;
        flex-direction: row;
    }
    #about ul li{
        margin-left: 20px;
        color:  blueviolet;
        display: flex;
        align-items: center;
        justify-content:space-evenly;
        flex-direction: row;
    }
    #about ul li:hover{
        color:  rgb(173, 225, 246);
        text-decoration: underline;
    }
    #cv{
        background-color:blueviolet ;
        text-align: center;
        margin-left: 100px;
        font-size: medium;
        border-radius: 50px;
        padding: 15px;
        text-decoration: underline;
    }
    #cv:hover{
        background-color: rgb(173, 225, 246);
        box-shadow:blueviolet;
    }
    #edph{
        width: 60px;
        margin-left: 100px;
        margin-top: 20px;
    }
    #Education{
        margin-top: 30px;
        height: 650px;
        
        border-radius: 10%;
       
    }
    #clg{
         width: 310px;
        height: 400px;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        background-color: rgb(255, 255, 255);
        margin-left: 30px;
         display: flex; 
        color: black;
        display: inline-block;
        /* justify-content:space-evenly;  */
        border-radius: 5px;
        transition: 0.3s;
        overflow: hidden; 
        color: black;
      }
      #clg:hover {  
        box-shadow: 0 8px 16px 0 rgb(168, 165, 165) ;
      }
      #schl{
        width: 310px;
       height: 400px;
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
       background-color: rgb(255, 255, 255);
       margin-left: 30px;
        display: flex; 
       color: black;
       display: inline-block;
       /* justify-content:space-evenly;  */
       border-radius: 5px;
       transition: 0.3s;
       overflow: hidden; 
       color: black;
     }
     #schl:hover {  
       box-shadow: 0 8px 16px 0 rgb(168, 165, 165) ;
     }
      #gweca{
        width: 310px;
        margin-left: 0;
        height: 180px;
      }
     #clgpara{
        margin-top: 20px;
        
        margin-left: 0px;
        color: black;
     }
     #schlpara{
        margin-top: 20px;
        
        margin-left: 0px;
        color: black;
     }
     
      #eye{
         margin-top: 2px; 
        margin-left: 150px;
        width: 20px;
        height: 20px;
      }
      #view{
        margin-top: 8px;
        margin-left: 10px;
        font-size: 15px;
        color: black;
        text-decoration: none;
      }
      #eyeschl{
        margin-top: 1px; 
       margin-left: 150px;
       width: 20px;
       height: 20px;
     }
     #viewschl{
       margin-top: 1px;
       margin-left: 10px;
       font-size: 15px;
       color: black;
       text-decoration: none;
     }
     #exp{
        width: 40px;
        height: 40px;
        margin-left: 90px;
        margin-top: 400px;
      }
      #exptext{
        margin-left:10px;
        font-size: 30px;
        margin-bottom: 10px;
        transition-property: all;
        color: rgb(173, 225, 246);
    }
    #exptext:hover{
        text-decoration: underline;
        transition: 0.5s;
        height: 3px;
    }
    #exptext:hover{
        color: white;
    }
     #timeline{
        margin: 50px auto;
     }
     #timeline::after{
        left: 31px;
     }
     .container{
        width: 100%;
        padding-left: 80px;
        padding-right: 25px;
        
     }
     .text-box{
        font-size: 13px;
     }
    
     
     .right-container{
        left: 0;
     }
    .container img{
        left: 0;
    }
     .left-container-arrow,.right-container-arrow{
        border-right: 15px solid white;
        border-left: 0;
        left: -15px;
     }
     .project_list{
        
        margin-top: 50px;
        justify-content:space-evenly;
        flex-direction: column;
        display: flex;
    }
    .container-form{
      justify-content:space-evenly;
      flex-direction: column;
      display: flex;
     
    } 
    form input,form textarea{
        width: 90%;
        border: 0;
        margin-left: 10px;
        outline: none;
        background: black;
        padding: 15px;
        margin-top: 10px;
        color: #fff;
        border-radius: 6px;
      }
      #submit{
        background-color:rgb(173, 225, 246);
        text-align: center;
        margin-left: 30px;
        font-size: medium;
        border-radius: 40px;
        padding: 20px;
        text-decoration: underline;
    }
}