*{
            margin: 0;
            padding: 0;
            font-family: Tahoma;
        }
        .header{
             height: 10vw;
             width: 100vw;
             background-color:#ffffff;
             border-bottom: 0.5vw solid red;
             box-shadow: 0 0 3vw gray;
             display: flex;
             align-items: center;
             z-index: 2;
             position: fixed;
        }
        .name-logo{
            width: 16vw;
            position: absolute;
            left: 2vw;
        }
        .manu-icon{
            width: 9vw;
            position: absolute;
            right: 2vw;
        }
        .manu{
            height: 100vh;
            width: 70vw;
            background-color: #ffffff;
            right: -72vw;
            position: absolute;
            border-radius: 10vw 0 0 10vw;
            border-left: 1vw solid #cd1d5e;
            top: 0;
            z-index: 2;
            transition: 0.5s;
        }
        .close{
            position: absolute;
            width: 6vw;
            margin: 3vw 3vw 0 0;
            right: 0;
            border-radius: 1000vw;
            padding: 1vw;
            background-color: #ffe6e9;
        }
        .homeAnchar{
            position: absolute;
            margin: 50vw 0 0 10vw;
            height: 9vw;
            width: 50vw;
            display: flex;
            align-items: center;
            border-radius: 55553vw;
            background-color: #fff1f3;
            box-shadow: 0 0 1vw #dc3545;
            transition: 0.5s;
        }
        .HA{
            box-shadow: 0 0 1.5vw #ff5e00;
        }
        .homeAnchar:hover{
            height: 11vw;
            width: 52vw;
            margin: 49vw 0 0 9vw;
            box-shadow: 0 0 2vw #dc3545;
        }
        .homeImage{
            width: 6vw;
            height: 5.5vw;
            position: absolute;
            margin: 0 0 0 4vw;
        }
        .homeLeter{
            color: #dc3545;
            font-size: 4vw;
            text-decoration: none;
            position: absolute;
            margin: 0 0 0 12vw;
        }
        .resumeAnchar{
            margin: 62vw 0 0 10vw;
        }
        .resumeAnchar:hover{
            margin: 61vw 0 0 9vw;
        }
        .resumeImage{
            height: 5.5vw;
            position: absolute;
            margin: 0 0 0 5vw;
        }
        .contactAnchar{
            margin: 74vw 0 0 10vw;
        }
        .contactAnchar:hover{
            margin: 73vw 0 0 9vw;
        }
        .projectAnchar{
            margin: 86vw 0 0 10vw;
        }
        .projectAnchar:hover{
            margin: 85vw 0 0 9vw;
        }
        .chat{
            width: 8vw;
            position: absolute;
            right: 15vw;
            top: 1.5vw;
        }
        
        
        
        /* body */
        
        
        
        
       .body{
           display: flex;
           justify-content: center;
       }
       .background{
           position: absolute;
           width: 100vw;
           height: 130vw;
           top: 10vw;
       }
       .bg{
        display: none;
       }
       .intro{
           height: 45vw;
           width: 85vw;
           backdrop-filter:blur(0.5vw);
           border-radius: 2vw;
           position: absolute;
           top: 55vw;
           box-shadow: 0 0 5vw #ffffff;
           display: flex;
           justify-content: center;
       }
       .Ranith-Sarkar{
           border-radius: 1000vw;
           height: 18vw;
           width: 18vw;
           padding: 0.25vw;
           background-color: #ffffff;
           margin-top: 2vw;
           position: absolute;
           transition: 0.5s;
       }
       .rr{
           top: 55vw;
       }
       .Ranith-Sarkar:hover{
           height: 41vw;
           width: 41vw;
           z-index: 1;
       }
       .rName{
           position: absolute;
           color: #ffffff;
           margin-top: 22vw;
           font-size: 4vw;
       }
       .basic{
           color: #ffffff;
           max-width: 60vw;
           font-size: 2.5vw;
           text-align: center;
           margin-top: 27vw;
       }
       .resume0{
           position: absolute; 
       }
       .resume{
           position: absolute;
           left: -7.9vw; 
           margin-top: 35vw;
           background-color: orangered;
           color: #ffffff;
           border: 0;
           font-weight: bold;
           height: 5.5vw;
           width: 15.5vw;
           border-radius: 1000vw;
           box-shadow: 0 0 2vw #ffffff;
           font-size: 3.4vw;
       }
       .age{
           height: 23vw;
           width: 45vw;
           background-color: #fff1f3;
           position: absolute;
           top: 147vw;
           border-radius: 4vw;
           left: 3vw;
           transition: 0.5s;
       }
       .age:hover{
           height: 25vw;
           width: 47vw;
           top: 146vw;
           left: 2vw;
           box-shadow: 0 0 2vw #d12d69;
       } 
       .age1{
           color: #d12d69;
           position: absolute;
           margin: 4vw 0 0 4vw;
           font-size: 3.5vw;
       }
       .age2{
           color: #641220;
           position: absolute;
           margin: 12vw 0 0 4vw;
           font-size: 3.5vw;
       }
       .homeTown{
           height: 23vw;
           width: 45vw; 
           background-color: #fff1f3;
           position: absolute;
           top: 147vw;
           border-radius: 4vw;
           right: 3vw;
           transition: 0.5s;
       }
       .homeTown:hover{
           right: 2vw;
           height: 25vw;
           width: 47vw;
           top: 146vw;
           box-shadow: 0 0 2vw #d12d69;
       }      
       .skills{
           height: 27vw;
           width: 94vw;
           background-color: #fff1f3;
           position: absolute;
           top: 173vw;
           border-radius: 4vw;
           font-size: 3vw;
           transition: 0.5s;
       }
       .skills:hover{
           height: 29vw;
           width: 96vw;
           top: 172vw;
           box-shadow: 0 0 2vw #d12d69;
       }
       .skill0{
           position: absolute;
           width: 28vw;
           right: 0;
           opacity: 0.5;
           
       }
       .skill{
           margin-left: 5vw;
       }
       .skill1{
           margin-left: 25vw;
       }
       .skill2{
           margin-left: 44vw;
       }
       .skill3{
           margin-left: 61vw;
       }
       .skill4{
           margin-left: 74.5vw;
       }
       .skill5{
           margin: 18.5vw 0 0 5vw;
       }
       .skill6{
           margin: 18.5vw 0 0 17vw;
       }
       .school{
           top: 203vw;
           height: 23vw;
       }
       .school:hover{
           height: 25vw;
           top: 202vw;
       }
       .school0{
           position: absolute;
           right: 0;
           width: 8vw;
           margin: 4vw 8vw 0 0;
           opacity: 0.5;
       }
       .course{
           height: 25vw;
           width: 45vw;
           background-color: #fff1f3;
           position: absolute;
           top: 229vw;
           border-radius: 4vw;
           left: 3vw;
           transition: 0.5s;
       }
       .course:hover{
           height: 27vw;
           width: 47vw;
           top: 228vw;
           box-shadow: 0 0 2vw #d12d69;
       }
       .language{
           height: 25vw;
           width: 45vw; 
           background-color: #fff1f3;
           position: absolute;
           top: 229vw;
           border-radius: 4vw;
           right: 3vw;
           transition: 0.5s;
       }
       .language:hover{
           height: 27vw;
           width: 47vw;
           top: 228vw;
           box-shadow: 0 0 2vw #d12d69;
       }
       .language0001{
           margin-left: 3vw;
       }
       .about{
           top: 257vw;
           height: 44vw;
           display: flex;
           justify-content: center;
       }
       .about:hover{
           height: 46vw;
           top: 256vw;
       }
       .ab{
           position: absolute;
           left: 0;
       }
       .about0{
           position: absolute;
           right: 0;
           width: 37.7vw;
           margin: 2vw 4vw 0 0;
           opacity: 0.4;
       }
       .about1{
           text-align:justify;
           margin: 12vw 4vw 0vw 4vw;
           max-width: 86vw;
       }
       .about2{
           margin-left: 1vw;
           color: #d12d69;
       }
       .advertisement{
           top: 304vw;
           height: 27vw;
           display: flex;
           justify-content: center;
       }
       .advertisement:hover{
           top: 303vw;
           height: 29vw;
       }
       .ad0{
           position: absolute;
           left: 0;
       }
       .website{
           width: 28.5vw;
           position: absolute;
           right: 0;
           margin: 1vw 4vw 0 0;
           opacity: 0.35;
       }
       .ad{
           margin-right: 4vw;
           text-align: justify;
           max-width: 84vw;
       }
       .advertisement1{
           color: #d12d69;
       }
       .socialMedia{
           top: 334vw;
           height: 23vw;
       }
       .socialMedia:hover{
           top: 333vw;
           height: 25vw;
       }
       .SM0{
           position: absolute;
           width: 21vw;
           margin: 2vw 0 0 4vw;
           opacity: 0.5;
       }
       .SM{
           text-align: justify;
           margin-right: 4vw;
       }
       .linkedin{
           height: 20vw;
           width: 45vw;
           background-color: #ffffff;
           position: absolute;
           top: 362vw;
           box-shadow: 0 0 2vw gray;
           border-radius: 4vw;
           left: 3vw;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s;
       }
       .linkedin:hover{
           top: 361vw;
           height: 22vw;
           width: 47vw;
           left: 2vw;
       }
       .in{
           font-size: 4vw;
           color: #000000;
       }
       .in1{
           font-size: 4vw;
           padding: 1vw 2vw;
           background-color: #1da0f1;
           border-radius: 0.5vw;
           color: #ffffff;
           margin-left: 0.5vw;
       }
       .twitter{
           height: 20vw;
           width: 45vw;
           background-color: #1da0f1;
           color: #ffffff;
           position: absolute;
           top: 362vw;
           box-shadow: 0 0 2vw gray;
           border-radius: 4vw; 
           right: 3vw;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s;
       }
       .twitter:hover{
           top: 361vw;
           height: 22vw;
           width: 47vw;
           right: 2vw;
       }
       .facebook{
           height: 20vw;
           width: 45vw;
           background-color: #1da0f1;
           position: absolute;
           top: 385vw;
           box-shadow: 0 0 2vw gray;
           border-radius: 4vw;
           left: 3vw;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s;
       }
       .facebook:hover{
           top: 384vw;
           height: 22vw;
           width: 47vw;
           left: 2vw;
       }
       .instagram{
           height: 20vw;
           width: 45vw;
           background-image: linear-gradient(to top right, #F58529, #DD2A7B, #8134AF, #515BD4);
           color: #ffffff;
           position: absolute;
           top: 385vw;
           box-shadow: 0 0 2vw gray;
           border-radius: 4vw; 
           right: 3vw;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s;
       }
       .instagram:hover{
           top: 384vw;
           height: 22vw;
           width: 47vw;
           right: 2vw;
       }
       .ins{
           font-size: 4vw;
           padding: 1vw 2vw;
           border-radius: 0.5vw;
           color: #ffffff;
           margin-left: 0.5vw;
       }
       .YouTube{
           height: 20vw;
           width: 45vw;
           background-color: #fe0002;
           position: absolute;
           top: 408vw;
           box-shadow: 0 0 2vw gray;
           border-radius: 4vw;
           left: 3vw;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s;
       }
       .YouTube:hover{
           top: 407;
           height: 22vw;
           width: 47vw;
           left: 2vw;
       }
       .chat0{
           height: 20vw;
           width: 45vw;
           background-color: #ffffff;
           position: absolute;
           top: 408vw;
           box-shadow: 0 0 2vw gray;
           border-radius: 4vw;
           right: 3vw;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s;
       }
       .chat0:hover{
           top: 407;
           height: 22vw;
           width: 47vw;
           right: 2vw;
       }
       .chat1{
           font-family: 'Caveat', Tahoma;
           font-size: 5vw;
           background: linear-gradient(to left,
                    #41D8DD,#A16BFE);
            -webkit-background-clip: text;
            color: transparent;
       }
       .thanks{
           top: 432vw;
           height: 45vw;
           display: flex;
           justify-content: center;
       }
       .thanks:hover{
           top: 431vw;
           height: 47vw;
       }
       .ttq{
           position: absolute;
           width: 13vw;
           margin: 27.5vw 0 0 0vw;
           opacity: 0.8;
       }
       .thq0{
           position: absolute;
           left: 0;
       }
       .thq{
           margin-right: 4vw;
           text-align: justify;
           max-width: 84vw;
       }
       .tq{
           position: absolute;
           right: 4vw;
           top: 30vw;
       }
       .footer{
           height: 20vw;
           width: 100vw;
           position: absolute;
           top: 482vw;
           background-image: linear-gradient(to left bottom,#1d99d0,#2b3356); 
           display: flex;
           justify-content: center;
           align-items: center;
       }
       .ft{
           color: #ffffff;
           position: absolute;
           text-align: center;
           font-size: 3vw;
       }


       @media only screen and (min-width:500px){
        /* header */
        .header{
            height: 3vw;
            border-bottom: 0.2vw solid red;
        }
        .name-logo{
            width: 4vw;
            left: 1vw;
        }
        .manu-icon{
            width: 2.5vw;
        }
        .chat{
            width: 2.5vw;
            top: 0.35vw;
            right: 6.5vw;
        }
        .manu{
            width: 20vw;
            border-radius: 0;
            border-left: 0.2vw solid #cd1d5e;

        }
        .close{
            width: 1vw;
            padding: 0.5vw;
            margin: 1vw 2vw 0 0;
        }
        .homeAnchar{
            margin: 10vw 0 0 3vw;
            height: 3vw;
            width: 15vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .homeAnchar:hover{
            margin: 9.5vw 0 0 2.5vw;
            height: 4vw;
            width: 16vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .homeImage{
            width: 2vw;
            height: 2vw;
            margin: 0 0 0 1.5vw;
        }
        .homeLeter{
            font-size: 1.5vw;
            margin-left: 5vw;
        }
        .resumeAnchar{
            margin: 15vw 0 0 3vw;
            height: 3vw;
            width: 15vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .resumeAnchar:hover{
            margin: 14.5vw 0 0 2.5vw;
            height: 4vw;
            width: 16vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .resumeImage{
            width: 2vw;
            height: 2vw;
            margin: 0 0 0 1.5vw;
        }
        .contactAnchar{
            margin: 20vw 0 0 3vw;
            height: 3vw;
            width: 15vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .contactAnchar:hover{
            margin: 19.5vw 0 0 2.5vw;
            height: 4vw;
            width: 16vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .projectAnchar{
            margin: 25vw 0 0 3vw;
            height: 3vw;
            width: 15vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }
        .projectAnchar:hover{
            margin: 24.5vw 0 0 2.5vw;
            height: 4vw;
            width: 16vw;
            box-shadow: 0 0 0.4vw #dc3545;
        }



        /* body */
        .background{
            display: none;
        }
        .bg{
            position: absolute;
            display: flex;
            width: 100vw;
            top: 3vw;
        }
        .intro{
            top:18.5vw;
            height: 17vw;
            width: 40vw;
            border-radius: 1vw;
        }
        .Ranith-Sarkar{
            height: 5vw;
            width: 5vw;
            padding: 0.1vw;
        }
        .Ranith-Sarkar:hover{
            height: 14vw;
            width: 14vw;
        }
        .rr{
           top: 18.5vw;
        }
        .rName{
            margin-top: 7.3vw;
            font-size: 1.5vw;
        }
        .basic{
            font-size: 1vw;
            margin-top: 10vw;
        }
        .resume{
            margin-top: 14vw;
            height: 2vw;
            width: 7vw;
            font-size: 1vw;
            left: -3.5vw;
        }
        .age{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:65vw;

        }
        .age:hover{
            height: 8vw;
            width: 20vw;
            top: 64.5vw;
            left: 2.5vw;
            box-shadow: 0 0 0.8vw #d12dd1;
        }
        .age1{
            font-size: 1.3vw;
            margin: 1vw 0 0 1vw;
        }
        .age2{
            font-size: 1.3vw;
            margin: 3.5vw 0 0 1vw;
        }
        .homeTown{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:65vw;
            left: 25vw;
        }
        .homeTown:hover{
            height: 8vw;
            width: 20vw;
            top: 64.5vw;
            left: 24.5vw;
            box-shadow: 0 0 0.8vw #d12dd1;
        }
        .skills{
            height: 7vw;
            width: 49vw;
            top: 65vw;
            border-radius: 1vw;
            left: 47vw;
        }
        .skills:hover{
            height: 8vw;
            width: 50vw;
            top: 64.5vw;
            left: 46.5vw;
            box-shadow: 0 0 0.8vw #d12dd1;
        }
        .skill0{
            width: 7.5vw;
        }
        .skill{
            margin-left: 2vw;
        }
        .skill1{
            margin-left: 10vw;
        }
        .skill2{
            margin-left: 18vw;
        }
        .skill3{
            margin-left: 25vw;
        }
        .skill4{
            margin-left: 31vw;
        }
        .skill5{
            margin-left: 39vw;
        }
        .skill6{
            margin-left: 44vw;
        }
        .school{
            top: 74vw;
            left: 3vw;
        }
        .school:hover{
            top: 73.5vw;
            left: 2.5vw;
        }
        .school0{
            width: 2vw;
            margin: 2vw 2vw 0 0;
        }
        .course{
            top: 74vw;
            height: 7vw;
            width: 19vw;
            left: 55vw;
            border-radius: 1vw;
        }
        .course:hover{
            top: 73.5vw;
            height: 8vw;
            width: 20vw;
            left: 54.5vw;
            border-radius: 1vw;
            box-shadow: 0 0 0.8vw #d12dd1;
        }
        .language{
            top: 74vw;
            height: 7vw;
            width: 20vw;
            left: 76vw;
            border-radius: 1vw;
        }
        .language:hover{
            top: 73.5vw;
            height: 8vw;
            width: 21vw;
            left: 75.5vw;
            border-radius: 1vw;
            box-shadow: 0 0 0.8vw #d12dd1;
        }
        .bonus0{
            margin-left: -1vw;
        }
        .bonus1{
            margin-left: 5.5vw;
        }
        .bonus2{
            margin-left: 11vw;
        }
        .about{
            top: 83vw;
            left: 3vw;
            height: 12.5vw;
            padding-right: 1vw;
            width: 48vw;
        }
        .about:hover{
            top: 82.5vw;
            left: 2.5vw;
            height: 13.5vw;
            padding-right: 1vw;
            width: 49vw;
        }
        .about0{
            width: 9.5vw;
        }
        .advertisement{
            top: 83vw;
            left: 55vw;
            width: 40vw;
            height: 12.5vw;
            padding-right: 1vw;
        }
        .advertisement:hover{
            top: 82.5vw;
            left: 54.5vw;
            width: 41vw;
            height: 13.5vw;
        }
        .website{
            width: 12.5vw;
        }
        .socialMedia{
            top: 97vw;
            left: 3vw;
            width: 93vw;
        }
        .socialMedia:hover{
            top: 96.5vw;
            left: 2.5vw;
            width: 94vw;
        }
        .SM0{
            width: 5vw;
            right: 3vw;
        }
        .linkedin{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:107vw;
        }
        .linkedin:hover{
            height: 8vw;
            width: 20vw;
            top:106.6vw;
            left: 2.5vw;
        }
        .in{
            font-size: 1.5vw;
        }
        .in1{
            font-size: 1.5vw;
        }
        .twitter{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:107vw;
            left: 23vw;
        }
        .twitter:hover{
            height: 8vw;
            width: 20vw;
            top:106.6vw;
            left: 22.5vw;
        }
        .facebook{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:107vw;
            left: 43vw;
        }
        .facebook:hover{
            height: 8vw;
            width: 20vw;
            top:106.6vw;
            left: 42.5vw;
        }
        .instagram{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:116vw;
            left: 37vw;
        }
        .instagram:hover{
            height: 8vw;
            width: 20vw;
            top:115.5vw;
            left: 36.5vw;
        }
        .ins{
            font-size: 1.5vw;
        }
        .YouTube{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:116vw;
            left: 57vw;
        }
        .YouTube:hover{
            height: 8vw;
            width: 20vw;
            top:115.5vw;
            left: 56.5vw;
        }
        .chat0{
            height: 7vw;
            border-radius: 1vw;
            width: 19vw;
            top:116vw;
            right: 3vw;
        }
        .chat0:hover{
            height: 8vw;
            width: 20vw;
            top:115.5vw;
            right: 2.5vw;
        }
        .chat1{
            font-size: 1.5vw;
        }
        .thanks{
            top: 125vw;
            left: 3vw;
            width: 93vw;
            height: 15vw;
        } 
        .thanks:hover{
            top: 124.5vw;
            left: 2.5vw;
            width: 94vw;
            height: 16vw;
        }
        .tq{
            top: 8vw;
        }
        .ttq{
            margin: 0;
            width: 4vw;
            bottom: 0;
        }
        .footer{
            top: 150vw;
            height: 10vw;
        }
        .ft{
            font-size: 1vw;
        }
       }