*{ scroll-behavior:smooth; margin: 0; padding: 0; box-sizing: border-box; } @media (max-width:400px){ .aboutMe{ flex-direction: column; } } .dsa{ display: flex; gap: 10px; } .dsaProfile{ width: 100px; height: 100px; } .container { width:100%; font-family:arial; display: flex; flex-direction: column; gap: 5px; } .container:hover{ cursor: pointer; } .title{ display:flex; align-items:center; background: #ffffff; height:40px; padding-left:20px; color:black; border:1px solid rgb(122, 116, 116); border-radius: 20px; } .myImg{ border-radius: 10%; width: 100rem; } .lastmyImg{ border-radius: 10%; width: 15em; } .content { padding:10px; display:none; } .item.active .content { display:block; } .aboutMe{ display:flex; gap: 10px; } .titleHead{ font-weight:bold; } .problemList { padding: 0; margin: 0; max-width: 700px; position: relative; } .problemList::before { content: ''; width: 0.5rem; position: absolute; top: 0; left: 8%; background: peachpuff; z-index: -1; } .prbmName { padding: 0.5rem 1.5rem 1rem; border-radius: 1rem; background: peachpuff; } .problemList{ display: flex; flex-direction: column; gap: 5px; } .prbmName a{ color: black; } /* ----------------------------------------status bar css ----------------------------------*/ @keyframes progress { 0% { --percentage: 0; } 100% { --percentage: var(--value); } } @property --percentage { syntax: ''; inherits: true; initial-value: 0; } [role="progressbar"] { --percentage: var(--value); --primary: #369; --secondary: #adf; --size: 100px; top: -40px; animation: progress 2s 0.5s forwards; width: var(--size); aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; -webkit-animation: progress 2s 0.5s forwards; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } [role="progressbar"]::before { content: ""; position: absolute; top: 14px; left: 15px; width: 70%; height: 70%; border-radius: 40px; background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0); mask: radial-gradient(white 55%, transparent 0); mask-mode: alpha; -webkit-mask: radial-gradient(#0000 55%, #000 0); -webkit-mask-mode: alpha; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; } [role="progressbar"]::after { counter-reset: percentage var(--value); content: counter(percentage) '%'; font-family: Helvetica, Arial, sans-serif; font-size: calc(var(--size) / 5); color: var(--primary); } /* ---------------------------- bar 2 ----------------------------- */ [role="progressbar1"] { --percentage: var(--value); --primary: #ff070798; --secondary: #adf; --size: 100px; top: -40px; animation: progress 2s 0.5s forwards; width: var(--size); aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; display: grid; place-items: center; -webkit-animation: progress 2s 0.5s forwards; } [role="progressbar1"]::before { content: ""; position: absolute; top: 14px; left: 15px; width: 70%; height: 70%; border-radius: 40px; background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0); mask: radial-gradient(white 55%, transparent 0); mask-mode: alpha; -webkit-mask: radial-gradient(#0000 55%, #000 0); -webkit-mask-mode: alpha; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; } [role="progressbar1"]::after { counter-reset: percentage var(--value); content: counter(percentage) '%'; font-family: Helvetica, Arial, sans-serif; font-size: calc(var(--size) / 5); color: var(--primary); } /* --------------------------------------------------------------- */ .statusBar{ display: flex; } .QuestionStatus{ color: #ff070798; } .InterviewImp{ color: rgba(0, 128, 0, 0.747); } /* --------------------------------------------------------------------- */ .dsaHeading{ gap: 50px; } /* ------------------------------------------------------ completion baar Mai File ------------------------- */ .statusBarHai{ display: flex; width: 80px; margin-top: -60px; margin-left: 160px; } .circular-progress{ position: relative; height: 80px; width: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .circular-progress::before{ content: ""; position: absolute; height: 60px; width: 60px; border-radius: 50%; background-color: #fff; } .progress-value{ position: relative; font-size: 20px; font-weight: 1000; color: #ff070798; } .RecursionMainDiv{ margin-top: -30px; } .DPmainDiv{ margin-top: -30px; } .btandbstMainDiv{ margin-top: -30px; } .stackQueuueMainDiv{ margin-top: -30px; } .binarySearchMainDiv{ margin-top: -30px; } .graphMainDiv{ margin-top: -30px; } .linkedlistMainDiv{ margin-top: -30px; } .greadyMainDiv{ margin-top: -30px; } .triesMainDiv{ margin-top: -30px; } .swMai{ margin-top: -30px; } .bitManuMainDiv{ margin-top: -30px; } .heapsMainDiv{ margin-top: -30px; } /* -------------------------------------------------------------------------------- */ center{ font-size: 18px; font-weight: 1000; } /* ---------------------------------------------------------------------------------- */ .mainBar{ position: relative; top: 10px; min-height: 20px; max-height: 50px; min-width: 150px; max-width: 150px; /* background: #000; */ } .nameTag{ position: relative; top: 8px; } /* ------------------------------------------------------------------- */ .bannerVideo{ display:flex; gap: 10px; } #myVideo{ border-radius: 2%; width: 500rem; } /* ----------------------------------------------------------- */ .secHeader1{ background: rgb(238,174,202); background: linear-gradient(90deg, rgba(238,174,202,1) 7%, rgba(220,177,208,1) 48%, rgba(148,187,233,1) 100%); height: 50px; border-radius: 100px; } .secHeader2{ background: rgb(238,174,202); background: linear-gradient(90deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); height: 50px; border-radius: 100px; } .secHeader3{ background: rgb(238,174,202); background: linear-gradient(90deg, rgba(230,159,66,1) 0%, rgba(114,171,237,1) 100%); height: 50px; border-radius: 100px; } .secHeader4{ background: rgb(232,233,230); background: linear-gradient(90deg, rgba(232,233,230,1) 51%, rgba(175,83,41,0.6054621677772671) 95%); height: 50px; border-radius: 100px; } .tagSec{ display: flex; justify-content: center; justify-items: center; margin-top: 11px; } .tagSec p{ font-size: large; font-weight: bold; color: rgba(51, 48, 48, 0.692); } /* --------------------------------------------------------------------------------------------- */ #AdvancedTitle{ background: linear-gradient(100deg, rgba(25,241,104,0.4) 0%, rgba(191,142,115,0.4) 79%); border: none; } #SecondAdvancedTitle{ border: none; background: linear-gradient(90deg, rgba(0,212,255,0.4514005431274072) 0%, rgba(115,115,191,0.4654061453683036) 56%); } #ThirdAdvancedTitle{ border: none; background: linear-gradient(90deg, rgba(223,238,255,1) 0%, rgba(216,233,253,1) 10%, rgba(148,186,231,1) 61%); } #fourthAdvancedTitle{ border: none; background: linear-gradient(90deg, rgba(155,201,253,1) 0%, rgba(239,240,37,0.6054621677772671) 100%); } .bannerImg{ margin-bottom: 20px; } .bannerImg img{ border-radius: 10px; } .headTag{ font-size: 20px; } body { --wp--preset--color--black: #001d30; --wp--preset--color--cyan-bluish-gray: #abb8c3; --wp--preset--color--white: #ffffff; --wp--preset--color--pale-pink: #f78da7; --wp--preset--color--vivid-red: #cf2e2e; --wp--preset--color--luminous-vivid-orange: #ff6900; --wp--preset--color--luminous-vivid-amber: #fcb900; --wp--preset--color--light-green-cyan: #7bdcb5; --wp--preset--color--vivid-green-cyan: #00d084; --wp--preset--color--pale-cyan-blue: #8ed1fc; --wp--preset--color--vivid-cyan-blue: #0693e3; --wp--preset--color--vivid-purple: #9b51e0; --wp--preset--color--nebula: #ff5233; --wp--preset--color--mars: #da3400; --wp--preset--color--orion: #ffe7e3; --wp--preset--color--cosmos: #012d4a; --wp--preset--color--galaxy: #002b7d; --wp--preset--color--nova: #0058ff; --wp--preset--color--comet: #8ab2ff; --wp--preset--color--zinc-600: #52525a; --wp--preset--color--zinc-500: #717179; --wp--preset--color--zinc-400: #a1a1a9; --wp--preset--color--zinc-300: #d4d4d8; --wp--preset--color--zinc-200: #e4e4e7; --wp--preset--color--zinc-100: #f4f4f5; --wp--preset--color--zinc-50: #fafafa; --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient( 135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100% ); --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient( 135deg, rgb(122, 220, 180) 0%, rgb(0, 208, 130) 100% ); --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient( 135deg, rgba(252, 185, 0, 1) 0%, rgba(255, 105, 0, 1) 100% ); --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient( 135deg, rgba(255, 105, 0, 1) 0%, rgb(207, 46, 46) 100% ); --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient( 135deg, rgb(238, 238, 238) 0%, rgb(169, 184, 195) 100% ); --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient( 135deg, rgb(74, 234, 220) 0%, rgb(151, 120, 209) 20%, rgb(207, 42, 186) 40%, rgb(238, 44, 130) 60%, rgb(251, 105, 98) 80%, rgb(254, 248, 76) 100% ); --wp--preset--gradient--blush-light-purple: linear-gradient( 135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100% ); --wp--preset--gradient--blush-bordeaux: linear-gradient( 135deg, rgb(254, 205, 165) 0%, rgb(254, 45, 45) 50%, rgb(107, 0, 62) 100% ); --wp--preset--gradient--luminous-dusk: linear-gradient( 135deg, rgb(255, 203, 112) 0%, rgb(199, 81, 192) 50%, rgb(65, 88, 208) 100% ); --wp--preset--gradient--pale-ocean: linear-gradient( 135deg, rgb(255, 245, 203) 0%, rgb(182, 227, 212) 50%, rgb(51, 167, 181) 100% ); --wp--preset--gradient--electric-grass: linear-gradient( 135deg, rgb(202, 248, 128) 0%, rgb(113, 206, 126) 100% ); --wp--preset--gradient--midnight: linear-gradient( 135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100% ); --wp--preset--duotone--dark-grayscale: url("#wp-duotone-dark-grayscale"); --wp--preset--duotone--grayscale: url("#wp-duotone-grayscale"); --wp--preset--duotone--purple-yellow: url("#wp-duotone-purple-yellow"); --wp--preset--duotone--blue-red: url("#wp-duotone-blue-red"); --wp--preset--duotone--midnight: url("#wp-duotone-midnight"); --wp--preset--duotone--magenta-yellow: url("#wp-duotone-magenta-yellow"); --wp--preset--duotone--purple-green: url("#wp-duotone-purple-green"); --wp--preset--duotone--blue-orange: url("#wp-duotone-blue-orange"); --wp--preset--font-size--small: 13px; --wp--preset--font-size--medium: 20px; --wp--preset--font-size--large: 36px; --wp--preset--font-size--x-large: 42px; --wp--preset--font-size--normal: 16px; --wp--preset--font-size--h-4: 18px; --wp--preset--font-size--h-6: 20px; --wp--preset--font-size--h-3: 28px; --wp--preset--font-size--h-2: 45px; --wp--preset--font-size--h-1: 60px; } body { margin: 0; } .wp-site-blocks > .alignleft { float: left; margin-right: 2em; } .wp-site-blocks > .alignright { float: right; margin-left: 2em; } .wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; } .has-black-color { color: var(--wp--preset--color--black) !important; } .has-cyan-bluish-gray-color { color: var(--wp--preset--color--cyan-bluish-gray) !important; } .has-white-color { color: var(--wp--preset--color--white) !important; } .has-pale-pink-color { color: var(--wp--preset--color--pale-pink) !important; } .has-vivid-red-color { color: var(--wp--preset--color--vivid-red) !important; } .has-luminous-vivid-orange-color { color: var(--wp--preset--color--luminous-vivid-orange) !important; } .has-luminous-vivid-amber-color { color: var(--wp--preset--color--luminous-vivid-amber) !important; } .has-light-green-cyan-color { color: var(--wp--preset--color--light-green-cyan) !important; } .has-vivid-green-cyan-color { color: var(--wp--preset--color--vivid-green-cyan) !important; } .has-pale-cyan-blue-color { color: var(--wp--preset--color--pale-cyan-blue) !important; } .has-vivid-cyan-blue-color { color: var(--wp--preset--color--vivid-cyan-blue) !important; } .has-vivid-purple-color { color: var(--wp--preset--color--vivid-purple) !important; } .has-nebula-color { color: var(--wp--preset--color--nebula) !important; } .has-mars-color { color: var(--wp--preset--color--mars) !important; } .has-orion-color { color: var(--wp--preset--color--orion) !important; } .has-cosmos-color { color: var(--wp--preset--color--cosmos) !important; } .has-galaxy-color { color: var(--wp--preset--color--galaxy) !important; } .has-nova-color { color: var(--wp--preset--color--nova) !important; } .has-comet-color { color: var(--wp--preset--color--comet) !important; } .has-zinc-600-color { color: var(--wp--preset--color--zinc-600) !important; } .has-zinc-500-color { color: var(--wp--preset--color--zinc-500) !important; } .has-zinc-400-color { color: var(--wp--preset--color--zinc-400) !important; } .has-zinc-300-color { color: var(--wp--preset--color--zinc-300) !important; } .has-zinc-200-color { color: var(--wp--preset--color--zinc-200) !important; } .has-zinc-100-color { color: var(--wp--preset--color--zinc-100) !important; } .has-zinc-50-color { color: var(--wp--preset--color--zinc-50) !important; } .has-black-background-color { background-color: var(--wp--preset--color--black) !important; } .has-cyan-bluish-gray-background-color { background-color: var(--wp--preset--color--cyan-bluish-gray) !important; } .has-white-background-color { background-color: var(--wp--preset--color--white) !important; } .has-pale-pink-background-color { background-color: var(--wp--preset--color--pale-pink) !important; } .has-vivid-red-background-color { background-color: var(--wp--preset--color--vivid-red) !important; } .has-luminous-vivid-orange-background-color { background-color: var( --wp--preset--color--luminous-vivid-orange ) !important; } .has-luminous-vivid-amber-background-color { background-color: var( --wp--preset--color--luminous-vivid-amber ) !important; } .has-light-green-cyan-background-color { background-color: var(--wp--preset--color--light-green-cyan) !important; } .has-vivid-green-cyan-background-color { background-color: var(--wp--preset--color--vivid-green-cyan) !important; } .has-pale-cyan-blue-background-color { background-color: var(--wp--preset--color--pale-cyan-blue) !important; } .has-vivid-cyan-blue-background-color { background-color: var(--wp--preset--color--vivid-cyan-blue) !important; } .has-vivid-purple-background-color { background-color: var(--wp--preset--color--vivid-purple) !important; } .has-nebula-background-color { background-color: var(--wp--preset--color--nebula) !important; } .has-mars-background-color { background-color: var(--wp--preset--color--mars) !important; } .has-orion-background-color { background-color: var(--wp--preset--color--orion) !important; } .has-cosmos-background-color { background-color: var(--wp--preset--color--cosmos) !important; } .has-galaxy-background-color { background-color: var(--wp--preset--color--galaxy) !important; } .has-nova-background-color { background-color: var(--wp--preset--color--nova) !important; } .has-comet-background-color { background-color: var(--wp--preset--color--comet) !important; } .has-zinc-600-background-color { background-color: var(--wp--preset--color--zinc-600) !important; } .has-zinc-500-background-color { background-color: var(--wp--preset--color--zinc-500) !important; } .has-zinc-400-background-color { background-color: var(--wp--preset--color--zinc-400) !important; } .has-zinc-300-background-color { background-color: var(--wp--preset--color--zinc-300) !important; } .has-zinc-200-background-color { background-color: var(--wp--preset--color--zinc-200) !important; } .has-zinc-100-background-color { background-color: var(--wp--preset--color--zinc-100) !important; } .has-zinc-50-background-color { background-color: var(--wp--preset--color--zinc-50) !important; } .has-black-border-color { border-color: var(--wp--preset--color--black) !important; } .has-cyan-bluish-gray-border-color { border-color: var(--wp--preset--color--cyan-bluish-gray) !important; } .has-white-border-color { border-color: var(--wp--preset--color--white) !important; } .has-pale-pink-border-color { border-color: var(--wp--preset--color--pale-pink) !important; } .has-vivid-red-border-color { border-color: var(--wp--preset--color--vivid-red) !important; } .has-luminous-vivid-orange-border-color { border-color: var( --wp--preset--color--luminous-vivid-orange ) !important; } .has-luminous-vivid-amber-border-color { border-color: var(--wp--preset--color--luminous-vivid-amber) !important; } .has-light-green-cyan-border-color { border-color: var(--wp--preset--color--light-green-cyan) !important; } .has-vivid-green-cyan-border-color { border-color: var(--wp--preset--color--vivid-green-cyan) !important; } .has-pale-cyan-blue-border-color { border-color: var(--wp--preset--color--pale-cyan-blue) !important; } .has-vivid-cyan-blue-border-color { border-color: var(--wp--preset--color--vivid-cyan-blue) !important; } .has-vivid-purple-border-color { border-color: var(--wp--preset--color--vivid-purple) !important; } .has-nebula-border-color { border-color: var(--wp--preset--color--nebula) !important; } .has-mars-border-color { border-color: var(--wp--preset--color--mars) !important; } .has-orion-border-color { border-color: var(--wp--preset--color--orion) !important; } .has-cosmos-border-color { border-color: var(--wp--preset--color--cosmos) !important; } .has-galaxy-border-color { border-color: var(--wp--preset--color--galaxy) !important; } .has-nova-border-color { border-color: var(--wp--preset--color--nova) !important; } .has-comet-border-color { border-color: var(--wp--preset--color--comet) !important; } .has-zinc-600-border-color { border-color: var(--wp--preset--color--zinc-600) !important; } .has-zinc-500-border-color { border-color: var(--wp--preset--color--zinc-500) !important; } .has-zinc-400-border-color { border-color: var(--wp--preset--color--zinc-400) !important; } .has-zinc-300-border-color { border-color: var(--wp--preset--color--zinc-300) !important; } .has-zinc-200-border-color { border-color: var(--wp--preset--color--zinc-200) !important; } .has-zinc-100-border-color { border-color: var(--wp--preset--color--zinc-100) !important; } .has-zinc-50-border-color { border-color: var(--wp--preset--color--zinc-50) !important; } .has-vivid-cyan-blue-to-vivid-purple-gradient-background { background: var( --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple ) !important; } .has-light-green-cyan-to-vivid-green-cyan-gradient-background { background: var( --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan ) !important; } .has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background { background: var( --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange ) !important; } .has-luminous-vivid-orange-to-vivid-red-gradient-background { background: var( --wp--preset--gradient--luminous-vivid-orange-to-vivid-red ) !important; } .has-very-light-gray-to-cyan-bluish-gray-gradient-background { background: var( --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray ) !important; } .has-cool-to-warm-spectrum-gradient-background { background: var( --wp--preset--gradient--cool-to-warm-spectrum ) !important; } .has-blush-light-purple-gradient-background { background: var(--wp--preset--gradient--blush-light-purple) !important; } .has-blush-bordeaux-gradient-background { background: var(--wp--preset--gradient--blush-bordeaux) !important; } .has-luminous-dusk-gradient-background { background: var(--wp--preset--gradient--luminous-dusk) !important; } .has-pale-ocean-gradient-background { background: var(--wp--preset--gradient--pale-ocean) !important; } .has-electric-grass-gradient-background { background: var(--wp--preset--gradient--electric-grass) !important; } .has-midnight-gradient-background { background: var(--wp--preset--gradient--midnight) !important; } .has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; } .has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; } .has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; } .has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; } .has-normal-font-size { font-size: var(--wp--preset--font-size--normal) !important; } .has-h-4-font-size { font-size: var(--wp--preset--font-size--h-4) !important; } .has-h-6-font-size { font-size: var(--wp--preset--font-size--h-6) !important; } .has-h-3-font-size { font-size: var(--wp--preset--font-size--h-3) !important; } .has-h-2-font-size { font-size: var(--wp--preset--font-size--h-2) !important; } .has-h-1-font-size { font-size: var(--wp--preset--font-size--h-1) !important; }