header{position:fixed;top:0;width:100%;z-index:1000;background-color:#111;padding:20px}nav ul{list-style-type:none;margin:0;padding:0;display:flex}nav ul li{color:#fff;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;margin-right:20px}ul li a{text-decoration:none;color:#fff;font-weight:700}ul li a:hover{color:#a020f0}.samee-a{color:#a020f0;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;margin-right:30px;text-decoration:none;font-weight:700;font-size:larger}#home{background-color:#181617;padding-top:20vh;padding-bottom:20vh}.title{font-size:3.2em;line-height:0}.icons{display:flex;justify-content:center;margin-top:60px}.icon{width:30px;height:30px;padding:10px}.icon:first-child{margin-right:30px}.icon:last-child{margin-right:0}.arrow-container{display:flex;justify-content:center}.arrow{margin-top:20vh;background-color:#0000;border:none;width:30px;height:30px;animation:bounce .75s infinite alternate}.arrow img{width:30px;height:30px}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-15px)}}ul{list-style:none}.example-2{display:flex;justify-content:center;align-items:center}.example-2 .icon-content{margin:0 10px;position:relative}.example-2 .icon-content .tooltip{position:absolute;top:-30px;left:50%;transform:translate(-50%);color:#fff;padding:6px 10px;border-radius:5px;opacity:0;visibility:hidden;font-size:14px;transition:all .3s ease}.example-2 .icon-content:hover .tooltip{opacity:1;visibility:visible;top:-35px}.example-2 .icon-content a{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;color:#4d4d4d;background-color:#fff;transition:all .3s ease-in-out}.example-2 .icon-content a:hover{box-shadow:3px 2px 45px #0000001f}.example-2 .icon-content a svg{position:relative;z-index:1;width:30px;height:30px}.example-2 .icon-content a:hover{color:#fff}.example-2 .icon-content a .filled{position:absolute;top:auto;bottom:0;left:0;width:100%;height:0;background-color:#000;transition:all .3s ease-in-out}.example-2 .icon-content a:hover .filled{height:100%}.example-2 .icon-content a[data-social=linkedin] .filled,.example-2 .icon-content a[data-social=linkedin]~.tooltip{background-color:#0274b3}.example-2 .icon-content a[data-social=github] .filled,.example-2 .icon-content a[data-social=github]~.tooltip{background-color:#24262a}.example-2 .icon-content a[data-social=instagram] .filled,.example-2 .icon-content a[data-social=instagram]~.tooltip{background:linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f)}.example-2 .icon-content a[data-social=youtube] .filled,.example-2 .icon-content a[data-social=youtube]~.tooltip{background-color:red}#about{padding-top:50px;margin-top:-50px;background-color:#eee}.about-header{height:50px;line-height:2;color:#000;margin-top:100px}.about-text-container{width:90%;max-width:1000px;margin:0 auto}.about-text{text-align:center;line-height:2.5;color:#000;margin-bottom:20px}#projects{padding-top:50px;margin-top:-50px;background-color:#eee}.projects-header{color:#000;line-height:3;margin-top:100px}.cards{display:flex;flex-wrap:wrap;justify-content:center}.card{flex:1 1 calc(25% - 50px);margin-right:50px;margin-left:50px;margin-bottom:50px;min-width:350px;max-width:400px;min-height:400px;max-height:700px;width:100%;padding:50px 20px;border-radius:50px;background-color:#e0e0e0;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff}.projects-subheader{margin-top:30px;padding-inline:15%;text-align:center;line-height:1.25}.projects-list{list-style:disc}.projects-text{color:#000;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:medium;padding-right:15px;padding-bottom:5px}.projects-img-container{width:90%;margin:0 auto}.projects-img-description{color:#666;font-size:small;line-height:0}.sorting-img,.banking-img,.arduino-img{border-radius:10px;max-width:100%}.projects-button-container{display:flex;justify-content:center;margin-top:50px}.projects-button{margin:0 auto;border-radius:8px;border:1px solid transparent;color:#a020f0;border-color:#a020f0;padding:.8em 1.8em;font-size:1em;font-weight:500;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#f9f9f9;cursor:pointer;transition:border-color .25s}.projects-button:hover{border-color:#f9f9f9;color:#000}.projects-button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#skills{padding-top:50px;margin-top:-50px;background-color:#eee;padding-bottom:200px}.skills-header{height:50px;color:#000;margin-top:150px}.bar-card-container{display:flex;justify-content:center}.bar-card{margin-right:50px;margin-left:50px;margin-bottom:50px;min-width:350px;max-width:1000px;min-height:400px;max-height:700px;width:100%;padding:50px 20px;border-radius:50px;background-color:#e0e0e0;box-shadow:20px 20px 60px #bebebe,-20px -20px 60px #fff}.bar-card-header-container{display:flex;justify-content:space-evenly}.bar-card-header{margin-top:60px}.bar-card-header a{text-decoration:none;color:#000}.bar-card-header:hover{color:#a020f0;cursor:pointer}.selected{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;display:flex;justify-content:space-evenly;line-height:0;margin-top:60px;font-size:1.5em;color:#a020f0}.selected:hover{cursor:pointer}.underline{position:absolute;width:10%;height:2px;background-color:#a020f0;transition:left .3s ease,width .3s ease}.bar-line{display:flex;justify-content:space-evenly;margin-top:40px}.bar{display:block;--height-of-loader: 10px;--loader-color: #a020f0;width:30vw;height:var(--height-of-loader);border-radius:30px;background-color:#0003;position:relative}.bar:before{content:"";position:absolute;background:var(--loader-color);top:0;left:0;width:0%;height:100%;border-radius:30px;animation:var(--animation-name) 1s forwards}@keyframes coding-fillbar{to{width:var(--fill-width)}}@keyframes technical-fillbar{to{width:var(--fill-width)}}@keyframes soft-fillbar{to{width:var(--fill-width)}}footer{background-color:#181617;padding-bottom:10px}.footer-container{width:80%;margin:0 auto;max-width:1000px}.footer-header{margin:0;padding-top:50px;line-height:1}.footer-text{text-align:center;display:inline-block}.copyright{display:flex;justify-content:center;color:#ddd;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:small}.footer-text a{margin-left:5px;text-decoration:none;color:#a020f0}.react-img{margin-left:5px;margin-right:5px}body{background-color:#181617;margin:0;padding:0}html{scroll-behavior:smooth}h1{color:#fff;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;display:flex;justify-content:center;line-height:0;margin-top:25vh;font-size:2em}h2{color:#000;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;display:flex;justify-content:center;line-height:0;margin-top:25vh;font-size:1.5em}h3{color:#000;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:0;font-size:1.25em}p{color:#fff;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:medium;display:flex;justify-content:center}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}iframe{padding-top:50px}