body {
     height: 100vh;
     margin: 0;
     padding: 0;
     background-size: contain;
     background-repeat: no-repeat;
     /* background-image: linear-gradient(to top left, rgb(182 185 255) 40%, rgb(218 215 255)); */
     /* background-image: linear-gradient(48deg, rgb(220, 255, 149), rgb(202, 204, 255), rgb(247, 209, 255), rgb(255, 228, 228), rgb(227, 255, 194), rgb(202, 204, 255), rgb(247, 209, 255), rgb(253, 255, 199)); */
     /* background-image: linear-gradient(48deg, rgb(179, 255, 0), rgb(164, 167, 255), rgb(241, 179, 255), rgb(255, 223, 223), rgb(180, 255, 179), rgb(179, 255, 255)); */
     /* background-image: linear-gradient(48deg, rgb(179, 255, 0), rgb(172, 175, 255), rgb(244, 193, 255), rgb(216, 216, 255), rgb(222, 217, 255), rgb(255, 217, 238));
     background-size: 400% 400%;
     animation: color 40s ease infinite;
     background-color: aliceblue;
     background-size: 400% 400%;
     animation: gradient 25s ease infinite; */
     background-color: red;
 }

 /* 
 @keyframes gradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 0%;
     }

     100% {
         background-position: 0% 50%;
     }
 } */


 * {
     margin: 0;
     padding: 0;
     border: 0;
     text-decoration: none;
     box-sizing: border-box;
 }

 .topblur {
     background-color: rgba(255, 255, 255, 0);
     backdrop-filter: blur(5px);
     height: 20px;
     width: 100%;
     position: fixed;
     z-index: 1111;
     /* background-image: linear-gradient(to left, rgb(189 190 251) 40%, rgb(218 215 255)); */
 }

 header {
     background-color: rgba(255, 255, 255, 0.712);
     backdrop-filter: blur(4px);
     height: 60px;
     border-radius: 10px;
     width: 97%;
     /* box-shadow: 0px 5px 9px -6px; */
     /* box-shadow: 0px 5px 15px -10px; */
     box-shadow: 0px 5px 20px -15px;
     margin: 20px 0px 0px 0px;
     position: fixed;
     z-index: 2;
     left: 50%;
     transform: translate(-50%, 0);
 }

 .hedderbg {
     height: 60px;
     display: flex;
     justify-content: space-between;
 }

 .leftbox {
     height: 100%;
     /* background-color: rgb(9, 132, 132); */
     width: 20%;
     align-items: center;
     display: flex;
     justify-content: left;
 }

 .fa-caret-down:hover.fa-caret-down {
     transform: rotate(180deg);
 }

 .myself {
     /* background-color: blue; */
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     color: rgb(59, 59, 59);
     margin-left: 30px;

 }

 .myprfile {
     display: none;
 }

 /* .myself:hover .myprfile {
    width: 27VW;
    height: 70VH;
    display: flex;
    background-color: rgba(59, 59, 59, 0.229);
    position: absolute;
    top: 80px;
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.725);
    backdrop-filter: blur(4px);
    box-shadow: 0px 5px 20px -15px;
    overflow: hidden;
    overflow-y: scroll;
    backdrop-filter: blur(20px);
} */
 .myprfile {
     width: 450px;
     height: 0VH;
     display: flex;
     background-color: rgba(59, 59, 59, 0.229);
     position: absolute;
     top: 70px;
     left: 0px;
     border-radius: 7px;
     background-color: rgb(255, 255, 255);
     box-shadow: 0px 5px 20px -12px;
     overflow: hidden;
     overflow-y: scroll;
     backdrop-filter: blur(20%);
     transition: 0.5s ease-in-out;
 }

 .myself:hover .myprfile {
     height: 500px;
 }


 .myprfile .clickevent {
     backdrop-filter: blur(20%);
     width: 450px;
     height: 70VH;
     display: flex;
     background-color: rgba(59, 59, 59, 0.229);
     position: absolute;
     top: 70px;
     left: 0px;
     border-radius: 7px;
     background-color: rgb(255, 255, 255);
     box-shadow: 0px 5px 20px -12px;
     overflow: hidden;
     overflow-y: scroll;
 }

 .innerfullcont {
     width: 100%;
     width: 100%;
     display: block;
 }

 .myprfile .upperproficon {
     height: 160px;
     width: 100%;
     /* margin-top: 20px; */
     display: flex;
     justify-content: center;
     align-items: center;
     /* background-color: rgb(70, 70, 12); */
 }

 .myprfile .upperproficon .profile {
     /* display: flex; */
     /* height: 150px; */
     width: 170px;
     display: flex;
     justify-content: center;
     align-items: baseline;
 }

 .myprfile .upperproficon .profile img {
     padding-top: 10px;
     width: 100%;
 }

 .nameandproff {
     width: 60%;
     /* /* background-color: blue; */
     margin: auto 0;
     /* text-align: left;  */
     padding-top: 10px;
 }

 .nameandproff h1 {
     font-family: "Averia Libre", system-ui;
     color: rgb(76, 76, 76);
     color: rgb(105, 108, 255);
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.227);
     font-size: 35px;
     margin: 0;
     line-height: 40px;
 }

 .nameandproff h2 {
     font-family: "Signika Negative", sans-serif;
     color: rgb(97, 97, 97);
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.193);
     font-size: 25px;
     margin: 0;
     line-height: 30px;
 }

 .bio {
     width: 90%;
     margin: 0 auto;
     padding-top: 10px;
     text-align: justify;
     font-family: "Averia Libre", system-ui;
     letter-spacing: 0px;
     text-align: justify;
     font-family: "Salsa", cursive;
     font-size: 17px;
     font-family: "Averia Libre", system-ui;
 }

 .bio1 {
     width: 90%;
     margin: 0 auto;
     padding-top: 5px;
     text-align: justify;
     font-family: "Averia Libre", system-ui;
     letter-spacing: px;
     text-align: justify;
     font-family: "Salsa", cursive;
     font-size: 25px;
     font-family: "Averia Libre", system-ui;
 }

 .skilllsmeter {
     width: 90%;
     height: fit-content;
     /* background-color: cadetblue; */
     padding-top: 20px;
     display: flex;
     flex-direction: column;
     justify-content: right;
     /* margin: 0 auto; */
     align-items: center;
 }

 .box1 {
     width: 90%;
     height: 30px;
     margin-top: 3px;
     margin-bottom: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .skilname h1 {
     font-family: "Averia Libre", system-ui;
     font-size: 18px;
     font-weight: bold;
     margin: 0;
     line-height: 20px;
 }

 .skilname {
     width: 110px;
     height: 30px;
     display: flex;
     justify-content: right;
     align-items: center;

 }

 .skilnamee h1 {
     font-family: "Averia Libre", system-ui;
     font-size: 17px;
     font-weight: 500;
 }

 .skilnamee {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     /* background-color: red; */
     padding-top: 30px;
     width: 90%;
     margin: auto;
 }

 /* 
 ._12655 {
     font-family: "Averia Libre", system-ui;
     font-size: 18px;
     font-weight: bold;
     height: 50px;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     padding-bottom: 500px;
 } */

 .skilnamee {
     text-decoration: none;
     font-family: "daysone", system-ui;
     font-size: 22px;
     justify-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;
     color: rgb(111, 67, 255);
     font-weight: 500;
     width: fit-content;
     height: min-content;
     margin: auto;
     font-weight: bolder;
     margin-bottom: 20px;
     font-family: "Averia Libre", system-ui;
 }

 .skilnameee h1 {
     margin: 0;
     justify-content: center;
     display: flex;
     padding-top: 30px;
 }

 .skilnameee h1 a {
     margin: 0;
     line-height: 20px;
     text-decoration: none;
     font-family: "daysone", system-ui;
     font-size: 22px;
     color: rgb(111, 67, 255);
     font-weight: 500;
     font-weight: bolder;
     font-family: "Averia Libre", system-ui;
     margin: auto 0;
 }

 .skilnameee h1 :hover {
     transition: 1s ease-in-out;
     color: rgb(0, 0, 0);
     font-weight: 600;
 }

 .fulllevel {
     width: 200px;
     margin-left: 30px;
     height: 10px;
     border-radius: 50px;
     background-color: rgb(197, 197, 197);
     display: flex;
 }

 .innerlevel {
     width: 70%;
     height: 100%;
     background-color: rgb(105, 108, 255);
     border-radius: 10px;
 }

 .certicficate {
     width: 91%;
     /* background-color: rgba(152, 255, 120, 0.179); */
     background-color: rgba(105, 108, 255, 0.082);
     height: 100px;
     border-radius: 5px;
     margin: 0 auto;
     margin-top: 20px;
     box-shadow: 0px 5px 20px -15px;
 }

 .certificate11 {
     position: fixed;
     backdrop-filter: blur(10px);
     /* background-image: linear-gradient(red,blue); */
     width: 100%;
     height: 100%;
     z-index: 5;
     filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.366));
     transition: 1s ease-in-out;
     display: none;
 }

 .certificategd {
     width: 91%;
     /* background-color: rgba(152, 255, 120, 0.179); */
     background-color: rgba(105, 108, 255, 0.082);
     height: 100px;
     border-radius: 5px;
     margin: 0 auto;
     margin-top: 20px;
     box-shadow: 0px 5px 20px -15px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
 }

 .logocerificate img {
     height: 65px;
     padding-right: 15px;
     width: fit-content;
 }

 .head {
     font-family: "Signika Negative", sans-serif;
     font-size: 20px;
 }

 .textbox111 {
     font-family: "Averia Libre", system-ui;
     font-size: 17px;
     font-weight: 600;
 }

 #myImage11 {
     position: fixed;
     width: 50vw;
     border-radius: 20px;
     filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.366));
     transition: 1s ease-in-out;
     left: 465px;
     top: 70px;
     width: fit-content;
     height: 68VH;
     border-radius: 7px;
     box-shadow: 0px 5px 20px -12px;

 }

 .hid dendiv11 {
     display: none;
 }

 .certificategd :hover.hiddendiv11 {
     display: flex;
 }

 .myprofileend {
     width: 100%;
     height: 60px;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0;
     line-height: 10px;
 }

 .innerline {
     width: 70%;
     height: 4px;
     background-color: rgb(104, 104, 104);
     border-radius: 50px;
 }

 ::-webkit-scrollbar {
     width: 0px;
 }

 .middlebox {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     /* background-color: rgb(106, 184, 4); */
     width: 52%;
 }

 .middlebox11 {
     display: flex;
     height: 100%;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     /* background-color: rgb(106, 184, 4); */
 }

 .logo {
     display: flex;
     height: 80%;
     padding-right: 30px;
 }

 .middlebox h1 {
     color: rgb(59, 59, 59);
     opacity: 100%;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     font-family: "Margarine", sans-serif;
     font-family: "Averia Libre", system-ui;
     padding: 0;
     line-height: 20px;
     margin: 0;
     font-size: 30px;
 }

 .rightbox {
     height: 100%;
     display: flex;
     justify-content: right;
     padding-right: 30px;
     align-items: center;
     /* background-color: rgb(159, 59, 59); */
     width: 20%;
     font-size: 21px;
 }

 .endmedialink {
     display: flex;
     justify-content: center;
     align-items: center;
     /* background-color: rgb(159, 59, 59); */
     width: 100%;
     height: 60px;
     font-size: 21px;
     display: none;
     padding-bottom: 80px;
     padding-top: 25px;
 }

 .endmedialink img {
     margin-right: 10px;
     width: 30px;
     filter: drop-shadow(0px 4px 4px rgba(30, 30, 30, 0.366));
 }

 .rightbox img {
     width: 30px;
     filter: drop-shadow(0px 4px 4px rgba(30, 30, 30, 0.366));
 }

 .rightbox a {
     margin-left: 10px;
     width: 30PX;
     height: 30px;
 }

 .body0 {
     height: 100%;
 }

 .secbr {
     /* background-color: rgb(255, 90, 90); */
     height: 120px;
 }

 .frontgraphic {
     width: 100%;
     display: flex;
     justify-content: center;
 }

 .frontgraphic img {
     width: 50%;
 }

 .body0 h1 {
     font-size: 69px;
     font-family: "Rubik Moonrocks", sans-serif;
     /* font-family: "Averia Libre", system-ui; */
     text-align: center;
     font-weight: 400;
     color: rgb(76, 76, 76);
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.284);
     cursor: pointer;
     line-height: 70px;
     margin: 0px;
     font-family: "Days One", sans-serif;
     font-family: "Signika Negative", sans-serif;
     font-family: "Averia Libre", system-ui;
 }

 .body0 ul {
     display: flex;
     justify-content: center;
     padding: 0;
     margin: 0;
 }

 .body0 ul li h1 {
     line-height: 60px;
     font-weight: 100;
     color: rgb(105, 108, 255);
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.193);
     font-family: "Averia Libre", system-ui;
     font-size: 20px;
     font-weight: 600;
 }

 .body0 ul li {
     margin-left: 40px;
 }

 .projects {
     display: flex;
     justify-content: center;
     padding-top: 70px;
     padding-right: 50px;
     height: fit-content;
 }

 .leftcontent {
     /* background-color: aqua; */
     width: 500px;
     height: fit-content;
     display: flex;
     justify-content: right;
 }

 .leftprojrct {
     width: 90%;
     /* background-color: rgb(0, 255, 38); */
 }

 .project1 h1 {
     /* background-color: bisque; */
     /* font-family: "Patrick Hand SC", cursive; */
     /* font-family:"Roboto", sans-serif; */
     /* font-family: "Palanquin Dark", sans-serif; */
     font-family: "Signika Negative", sans-serif;
     font-size: 16px;
     color: rgb(50, 50, 50);
     cursor: pointer;
     display: flex;
     text-align: left;
     margin: 40px 0px 40px;
     font-weight: 500;
     font-family: "Averia Libre", system-ui;
 }

 .project1 :hover.appname {
     text-align: left;
     background-color: rgba(255, 255, 255, 0.422);
     height: 50px;
     width: fit-content+50px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0px 5px 25px -15px;
     border-radius: 15px;
     margin: 0px 0px 0px;
 }

 .rightcontent {
     /* background-color: blue; */
     width: 600px;
     height: 660px;
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
 }

 .rightcontent .myinfo {
     box-sizing: border-box;
     justify-content: center;
     /* margin-left: 15px; */
 }

 .rightcontent .myinfo .Name {
     box-sizing: border-box;
     margin-bottom: 0px;
     top: -15px;
     font-weight: 700;
     font-size: 2rem;
     font-family: "Days One", sans-serif;
     color: rgb(76, 76, 76);
     font-family: "Averia Libre", system-ui;
     font-family: "Averia Libre", system-ui;
     margin: 0;
     /* font-weight: 400; */
     font-size: 2rem;
     font-family: "Days One", sans-serif;
     /* color: rgb(226, 226, 226); */
     padding-left: 5px;
     /* color: rgba(222, 219, 255, 0.858); */
     margin: 0;
     font-family: "Averia Libre", system-ui;
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.227);
     line-height: 30px;
 }

 .rightcontent .myinfo .profession {
     line-height: 50px;
     /* font-weight: 400; */
     font-size: 3rem;
     margin-bottom: 0px;
     font-family: "Signika Negative", sans-serif;
     color: rgb(105, 108, 255);
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.193);
 }

 .rightcontent .myinfo ul {
     margin: 0;
     padding: 2px;
     top: 85px;
     line-height: 15px;
 }

 .rightcontent .myinfo ul li {
     display: inline-block;
     padding: 5px;
     margin: 0;
 }

 .rightcontent .myinfo ul li a {
     font-family: "Days One", sans-serif;
     font-family: "Averia Libre", system-ui;
     color: rgb(76, 76, 76);
     text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.067);
     text-decoration: none;
     /* padding-right: 9px; */
     font-size: 1.1rem;
 }

 .rightcontent .myinfo ul li a:hover {
     color: rgba(222, 219, 255, 0.858);
     /* font-weight: 500; */
     color: rgb(0, 0, 0);
     animation: ease-in-out;
     transition: background-color 0.6s ease-in-out;
 }

 .footer {
     height: 00px;
     /* padding-bottom: 20px; */
     /* padding-top: 40px; */
     padding: 0;
     /* background-color: red; */
 }

 .linek {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .line {
     width: 60%;
     height: 7px;
     background-color: rgba(255, 255, 255, 0.712);
     backdrop-filter: blur(4px);
     border-radius: 4px;
     margin: auto 0;
 }

 .end {
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: "Averia Libre", system-ui;
     color: rgb(76, 76, 76);
     /* text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.067); */
     padding-top: 20px;
     padding-bottom: 40px;
     font-size: 15px;
     font-weight: 600;
     height: min-content;
     margin: 0;
     line-height: 20px;
 }

 .designs {
     height: 60px;
     width: 95%;
     display: flex;
     align-items: center;
     margin: 0 auto;
     /* background-color: red;
     animation: appear 1s linear;
     animation-timeline: view();
     animation-range:entry 0% cover 40% ; */
 }

 .designs button {
     width: 100%;
     /* background-color: red; */
     font-size: 16px;
     color: rgb(50, 50, 50);
     cursor: pointer;
     display: flex;
     text-align: left;
     font-weight: 500;
     font-family: "Averia Libre", system-ui;
     background-color: transparent;
     justify-content: center;
 }


 .mobilescreen {
     width: 200px;
     display: none;
     position: absolute;
     top: 110%;
     left: 50%;
     transform: translateX(-50%);
     transition: opacity 0.3s ease;
     /* opacity: 0; */
 }

 .qwsa:hover.mobilescreen {
     display: block;
     opacity: 0.1s;
 }

 .dfdf {
     display: flex;
     width: 80%;
     justify-content: space-between;

 }

 .qwsa:hover {
     width: 100%;
     background-color: rgba(255, 255, 255, 0.273);
     box-shadow: 0px 5px 25px -15px;
     height: 55px;
     display: flex;
     align-items: center;
     border-radius: 18px;
     /* justify-content: center; */
     transition: 0.1s ease-in-out;


 }

 .asasa {
     width: 300px;
     right: 390px;
     /* top: 350px; */
     display: none;
     border-radius: 20px;
     position: absolute;
     z-index: 2;
     /* transition: 0.5s; */
     filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.366));
     transition: 1s ease-in-out;

 }

 /* 
#postion1{
    top: 600px;
}

#postion2{
    top: 670px;
}

#postion3{
    top: 740px;
}

#postion4{
    top: 810px;
}
#postion5{
    top: 880px;
}
#postion6{
    top: 950px;
}
#postion7{
    top: 1030px;
}
#postion8{
    top: 1100px;
}
#postion9{
    top: 1170px;
}
#postion10{
    top: 1240px;
}
#postion11{
    top: 1310px;
}
#postion12{
    top: 810px;
}
#postion13{
    top: 810px;
} */
 .qwsa:hover+.asasa {
     display: flex;
 }

 .asasa {
     animation: appear 0.5s ease-in-out;
     animation-iteration-count: 1;
     position: fixed;
     top: 20vh;
 }

 /* #mobile {
    display: none;
    width: 700px;
    position: absolute;
    text-shadow: 0px 5px 20px -15px;
}

.designs :hover.mobile {
    opacity: 0%;
} */

 .marklindiv {
     display: flex;
     justify-content: center;
     align-items: center;
     padding-top: 20px;
     padding-bottom: 30px;
     display: none;
 }

 .dreakline {
     width: 80%;
     justify-content: center;
     display: flex;
     height: 2px;
     background-color: rgb(118, 118, 118);
 }


 .clicker,
 .hiddendiv {
     display: none;
 }




 * {
     margin: 0;
     padding: 0;
     border: 0;
     text-decoration: none;
     box-sizing: border-box;
 }

 .clicker11 {
     width: 91%;
     /* background-color: rgba(152, 255, 120, 0.179); */
     background-color: rgba(105, 108, 255, 0.082);
     height: 100px;
     border-radius: 5px;
     margin: 0 auto;
     margin-top: 20px;
     box-shadow: 0px 5px 20px -15px;
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
 }

 .clicker11:hover {
     background-color: rgba(105, 108, 255, 0.174);
     box-shadow: 0px 5px 20px -10px;
     transition: 0.5s ease-in-out;

 }

 .logocerificate {
     width: 30%;
     display: flex;
     justify-content: right;
 }

 .logocerificate img {
     height: 65px;
     padding-right: 15px;

 }

 .contentbox {
     width: 70%;
 }

 .head {
     font-family: "Signika Negative", sans-serif;
     font-size: 18px;
     line-height: 30px;
     margin: 0;
     font-weight: 600;
    }
    
    .textbox111 {
        font-family: "Averia Libre", system-ui;
        color: rgb(73, 73, 73);
     line-height: 20px;
     margin: 0;
     font-size: 17px;
     font-weight: 600;
 }

 #myImage11 {
     position: fixed;
     width: 50vw;
     border-radius: 20px;
     filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.366));
     transition: 1s ease-in-out;
     left: 465px;
     top: 50px;
     width: fit-content;
     height: 500px;
     border-radius: 7px;
     box-shadow: 0px 5px 20px -12px;
     box-shadow: 0px 5px 10px -12px;
 }

 .hiddendiv11 {
     display: none;
     z-index: -1;
     left: -22px;
     top: -20px;
     height: 100vh;
     width: 100vw;
     position: fixed;
     /* background-color: rgb(137, 43, 226); */
 }

 .clicker11:focus+.hiddendiv11 {
     display: block;
 }


 @keyframes appear {
     /* from{
        opacity: 0;
        scale: 1;
        filter: blur(2px);
    }
    to{
        opacity: 1;
        scale: 1;
    } */


     0% {
         transform: translate(0, 15px);
         opacity: 0;
         scale: 1;
         filter: blur(2px);
     }

     50% {
         transform: translate(0, 15px);
     }

     100% {
         transform: translate(0, -0px);
         opacity: 1;

     }
 }

 @keyframes floating {
     0% {
         transform: translate(0, 15px);
     }

     50% {
         transform: translate(0, 15px);
     }

     100% {
         transform: translate(0, -0px);
     }
 }


 @media (max-width: 770px) {

     header {
         width: 95%;
         height: 70px;
         margin: 15px 0px 0px 0px;
     }

     .hedderbg {
         height: 70px;
     }

     .myself {
         font-size: 25px;
         padding-left: 0px;
     }

     .myprfile {
         width: 100%;
         top: 80px;
     }

     #myImage11 {
         position: fixed;
         width: 90vw;
         border-radius: 10px;
         filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.366));
         transition: 1s ease-in-out;
         left: 0px;
         top: 60px;
         width: 95vw;
         height: fit-content;
         border-radius: 7px;
         box-shadow: 0px 5px 20px -12px;
         box-shadow: 0px 5px 10px -12px;
     }

     .hiddendiv11 {
         display: none;
         z-index: 5;
         left: -20px;
         top: -20px;
         height: 120vh;
         width: 120vw;
         position: fixed;
         background-color: rgba(33, 33, 33, 0.872);

     }

     .middlebox {
         width: 70%;
     }

     .logo {
         height: 60%;
         padding-right: 10px;
     }

     .leftbox {
         width: 50%;
     }

     .middlebox h1 {
         font-size: 18px;
     }

     .MUNAN {
         font-size: 18px;
     }

     .middlebox11 {
         display: flex;
         justify-content: right;
         width: 100%;
         padding-right: 20px;
     }

     .rightbox {
         display: none;
     }

     .secbr {
         height: 100px;
     }

     .body0 h1 {
         font-size: 210%;
         /* padding-top: 10px; */
         /* font-family: "Signika Negative", sans-serif; */
         font-weight: 900;
         color: rgb(73, 73, 73);
     }

     .frontgraphic img {
         width: 80%;
     }

     .body0 ul {
         width: 95%;
         padding-top: 5px;
         display: none;
     }

     .body0 ul li {
         margin-left: 20px;
     }

     .projects {
         padding-top: 25px;
         padding-right: 0px;
         display: flex;
         flex-direction: column;
     }

     .leftcontent {
         width: 100%;
         display: flex;
         justify-content: center;
     }

     .leftprojrct {
         width: 100%;
     }

     .designs button {
         font-size: 18px;
         font-weight: 610;
         text-align: justify;
     }

     .designs {
         height: 70px;
         display: none;
     }

     .qwsa:hover {
         height: 65Px;
         background-color: rgba(255, 255, 255, 0.53);
     }

     .bio {
         font-family: "McLaren", sans-serif;
         font-family: "Averia Libre", system-ui;
     }

     #postion1,
     #postion2,
     #postion3,
     #postion4,
     #postion5,
     #postion6,
     #postion7,
     #postion8,
     #postion9,
     #postion10,
     #postion11,
     #postion12,
     #postion13 {
         display: none;
         position: fixed;
         top: 150px;
         height: 73vh;
         width: max-content;
     }

     .designsphone {
         height: 60px;
         width: 95%;
         display: flex;
         align-items: center;
         margin: 0 auto;
         /* background-color: red; */
     }

     .designsphone {
         height: 60px;
         width: 95%;
         display: flex;
         align-items: center;
         margin: 0 auto;
         /* background-color: red; */
     }

     .innerphonexox {
         display: flex;
         width: 80%;
         justify-content: space-between;
     }


     .phoneview {
         width: 100%;
         /* background-color: red; */
         font-size: 16px;
         color: rgb(50, 50, 50);
         cursor: pointer;
         display: flex;
         text-align: left;
         font-weight: 500;
         font-family: "Averia Libre", system-ui;
         background-color: transparent;
         justify-content: center;
         font-size: 18px;
         font-weight: 610;
         text-align: justify;
         display: flex;
         align-items: center;
         border-radius: 15px;
         box-shadow: 0px 5px 25px -15px;
     }

     .phoneview:hover {
         height: 65Px;
         background-color: rgba(255, 255, 255, 0.53);
     }

     .imageback {
         display: none;
         position: fixed;
         /* background-color: red; */
         backdrop-filter: blur(4px);
         width: 100vw;
         height: 100vh;
         top: 0;
         left: 0;
         z-index: 2;
     }

     #myImage {
         position: absolute;
         top: 150px;
         height: 73vh;
         width: max-content;
         border-radius: 20px;
         position: absolute;
         z-index: 2;
         /* transition: 0.5s; */
         filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.366));
         transition: 1s ease-in-out;
         left: 50%;
         transform: translate(-50%, 0);
     }

     input[type="checkbox"] {
         display: none;
     }

     input[type="checkbox"]:checked~.imageback {
         display: block;
     }

     input[type="checkbox"]:checked~.button::after {
         content: ' Hide Image';
     }

     .clicker {
         height: 60px;
         width: 95%;
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
         border: none;
         outline: none;
         background-color: transparent;
         /* background-color: rebeccapurple; */
     }

     .qswa {
         width: 100%;
         font-size: 16px;
         color: rgb(50, 50, 50);
         cursor: pointer;
         display: flex;
         text-align: left;
         font-weight: 500;
         justify-content: center;
         font-family: "Averia Libre", system-ui;
         background-color: transparent;
         border: none;
         /* background-color: brown; */
     }

     .dfdf {
         display: flex;
         width: 80%;
         justify-content: space-between;
         font-weight: 700;
     }

     .qswa:hover {
         width: 100%;
         background-color: rgba(255, 255, 255, 0.273);
         box-shadow: 0px 5px 25px -15px;
         height: 55px;
         display: flex;
         align-items: center;
         border-radius: 19px;
         transition: 0.1s ease-in-out;
     }

     .hiddendiv {
         display: none;
         display: none;
         position: fixed;
         /* background-color: red; */
         backdrop-filter: blur(4px);
         width: 100vw;
         height: 100vh;
         top: 0;
         left: 0;
         z-index: 2;
     }

     #myImage {
         position: absolute;
         top: 130px;
         height: 73vh;
         width: max-content;
         border-radius: 20px;
         position: absolute;
         z-index: 2;
         /* transition: 0.5s; */
         filter: drop-shadow(0px 0 13px rgba(30, 30, 30, 0.553));
         transition: 1s ease-in-out;
         left: 50%;
         transform: translate(-50%, 0);
         transition: ease-in-out 1s;
     }

     .clicker:focus+.hiddendiv {
         display: block;
     }

     .button::after {
         content: '';
     }

     .skilnamee {
         font-size: 20px;
     }

     .rightcontent {
         width: 100%;
         height: 130px;
     }

     .footer {
         padding-top: 0px;
     }

     .line {
         width: 80%;
     }

     .marklindiv {
         display: flex;

     }

     .endmedialink {
         display: flex;
     }

     .end {
         display: flex;
         align-items: center;
         justify-content: center;
         font-family: "Averia Libre", system-ui;
         color: rgb(76, 76, 76);
         /* text-shadow: 0px 5px 7px rgba(42, 42, 42, 0.067); */
         padding-top: 15px;
         font-size: 15px;
         font-weight: 600;
         padding-bottom: 0px;
         height: min-content;
         margin: 0;
         line-height: 20px;
     }

     .asasa {
         width: 90vh;
         top: 100px;
         left: 50%;
         position: fixed;
         transform: translate(-50%, 0);
     }

     .rightcontent .myinfo .profession {
         font-size: 2.5rem;
     }

     .nameandproff h1 {
         font-size: 30px;
     }

     .skilnamee {
         padding-top: 10px;
     }

     .skilnameee h1 a {
         font-size: 20px;
     }
 }

 .professionn {
     font-size: 1.5rem;
     text-decoration: none;
     background-color: rebeccapurple;
     height: fit-content;
     font-family: Arial, Helvetica, sans-serif;
 }

 .MUNAN {
     margin: 0;
     padding-left: 10px;
     font-weight: 600;
     cursor: pointer;
     font-family: "Signika Negative", sans-serif;
     color: rgb(92, 77, 255);
     font-family: "Averia Libre", system-ui;

 }

 /* 
	@media (min-width:992px) {
		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40edd"] {
			opacity: 0;
			-webkit-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
			-moz-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
			-ms-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
			transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40ee5"] {
			opacity: 1;
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40edb"] {
			display: none;
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40eda"] {
			opacity: 0;
		}
	}

	@media (max-width:991px) and (min-width:768px) {
		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40edd"] {
			opacity: 0;
			-webkit-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
			-moz-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
			-ms-transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
			transform: translate3d(0, 0, 0) scale3d(0.95, 0.95, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40ee5"] {
			opacity: 1;
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40edb"] {
			display: none;
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40eda"] {
			opacity: 0;
		}
	}

	@media (max-width:767px) and (min-width:480px) {
		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40edb"] {
			opacity: 0;
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40eda"] {
			opacity: 0;
		}
	}

	@media (max-width:479px) {
		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40edb"] {
			opacity: 0;
		}

		html.w-mod-js:not(.w-mod-ix) [data-w-id="e30fc721-3b58-d17e-eeb2-4554dfd40eda"] {
			opacity: 0;
		}
	} */