*{scroll-behavior:smooth;margin:0;padding:0;box-sizing:border-box}* ::-webkit-scrollbar{display:none}html{background-color:#000}nav{width:100%;height:80px;background-color:#12121200;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2c2c2cfa;overflow:hidden;position:fixed;z-index:2;top:0;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(5px)}.logo{display:flex;align-items:center;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:25px;padding-left:20px}.logo img{width:60px;height:50px;padding-right:10px}.links{padding-right:20px}.links a{list-style:none;text-decoration:none;color:#fff;padding-left:15px;font-size:15px;font-family:Arial,Helvetica,sans-serif}@media only screen and (max-width: 550px){.links{display:none}}.intro-body{height:500px;background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:center;align-items:center}.intro{display:flex;justify-content:center;align-items:center;flex-direction:column}.projects-body{background-color:#000;display:flex;color:#fff;align-items:center;font-family:Arial,Helvetica,sans-serif;font-size:20px;flex-direction:column;width:100%;overflow:hidden;position:relative}.card-holder{min-height:550px;display:flex;gap:50px;align-items:center;overflow-x:auto;width:80%;scroll-behavior:smooth;scroll-snap-type:x mandatory;white-space:nowrap}.card-body{min-width:340px;max-width:340px;height:420px;background-color:#121212;border:1.5px solid #3f3f3f;border-radius:20px;position:relative;top:0;transition:top ease .5s,background-color ease-in-out 1s;scroll-snap-align:start;padding:30px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px}@media (max-width: 950px){.card-body{min-width:300px;max-height:420px}}.card-body p{color:#b2b2b2;font-size:16px;white-space:pre-line;line-height:1.5;min-height:100px}.card-body h1{font-size:clamp(14px,5vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}textarea{resize:none}.card-body:hover{top:-15px;background-color:#131313;border-color:#004e3c}.card-controller{display:flex;justify-content:space-between;position:absolute;top:50%;width:95%;z-index:1}.card-controller button{border:none;background-color:#1b1b1b;width:40px;height:40px;border-radius:100%;display:flex;justify-content:center;align-items:center}button img{width:50%;height:50%;object-fit:contain;filter:invert(100%) sepia(100%) saturate(100%) hue-rotate(201deg)}.card-controller button:hover{background-color:#004e3c}.icons{margin-top:10px;display:flex;gap:10px}.icons img{width:50px;height:50px}.buttons{width:165px;height:60px;background-color:#151515;display:flex;justify-content:center;align-items:center;border-radius:10px;border:1px solid rgb(0,204,255);margin-top:25px}.buttons a{text-decoration:none;color:#0cf}.experience-body{width:100vw;padding-top:50px;color:#fff;font-family:Arial,Helvetica,sans-serif;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:50px;padding-bottom:50px}.experience-cards{width:100%;display:flex;justify-content:center;align-items:center;gap:25px}@media (max-width: 980px){.experience-cards{flex-direction:column}}.card{width:350px;height:450px;border-radius:20px;border:1px solid #292929;background-color:#141414;padding:25px;display:flex;flex-direction:column}.card h2{color:#858585;padding-top:5px;padding-bottom:15px}.card p{font-size:large;font-size:15px}.card .footer{color:#0cf;height:100%;display:flex;justify-content:end;align-items:end}.contact-body{height:600px;background-color:#181818;color:#fff;font-family:Arial,Helvetica,sans-serif;display:flex;align-items:center;flex-direction:column;justify-content:space-evenly}.contact-input{width:500px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px}@media (max-width: 980px){.contact-input{width:100%}}.contact-body input,textarea{width:100%;height:60px;border:1px solid rgb(0,204,255);border-radius:10px;padding-left:10px;font-size:20px;color:#fff;background-color:transparent}.contact-input input:focus,textarea:focus{border:none;border-style:none}.contact-input :nth-child(3){height:160px}.contact-input textarea{padding-top:10px}.contact-input button{height:60px;width:100%;background-color:#0cf;border:none;border-radius:10px;font-size:20px;color:#fff;font-weight:700}footer{height:200px;background-color:#000;display:flex;justify-content:center;align-items:center}footer a{padding-left:10px;text-decoration:none;color:#fff;font-family:Arial,Helvetica,sans-serif}.cv a{font-size:20px}*{color:#fff;font-family:Arial,Helvetica,sans-serif;box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.title p{font-weight:lighter;color:#9b9b9b}.testme-body{width:100vw;display:flex;justify-content:center;align-items:center;padding-top:10px;gap:50px;flex-direction:column}.uploadimage-body{width:80%;height:600px;border-width:4px;border-style:dashed;border-color:#cb9aff;border-radius:20px;display:flex;justify-content:center;align-items:center}.uploadimage-body img{width:80px;height:80px}.uploadimage-body input{display:none}.uploadimage-body:hover{background-color:#bb7cff3d}.uploded-body{width:80%;display:flex;flex-flow:column;align-items:center;gap:10px}.uploded-body img{width:100%;height:auto;max-height:800px;-webkit-user-drag:none;border:2px solid white;border-radius:20px}.re-upload{width:100%;height:150px;border-width:4px;border-style:dashed;border-color:#cb9aff;border-radius:20px;display:flex;justify-content:center;align-items:center;margin-top:50px}.re-upload img{width:50px;height:50px;border:none}.re-upload:hover{background-color:#bb7cff3d}.rectangle{border-radius:2px;background-color:#fd5d5d;transition:opacity .2s ease}.rectangle:hover{opacity:.4}nav{padding:0 10px;width:100%}nav img{width:50px}nav .new-logo{text-decoration:none;display:flex;justify-content:center;align-items:center;cursor:pointer;font-weight:700;font-size:20px;gap:10px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.main{height:100%;background-color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column}.main .title{width:100%;height:45px;display:flex;align-items:center;padding-left:20px}.main .title h1{color:#000}.main .title span{color:#ff4f4f}.main img{border:1px solid grey;width:330px;height:360px;border-radius:5px}.main #obj{display:flex;flex-direction:column;gap:10px;width:340px;height:100vh}.main #obj .input-box{display:flex;gap:5px}.main #obj .input-box input{width:70%;height:50px;border:1px solid black;display:block;border-radius:10px 0 0 10px/10px 0px 0px 10px;color:#000;padding:5px;font-size:20px}.main #obj .input-box button{width:26%;border:1px solid black;background-color:#ffe063;border-radius:0 10px 10px 0/0px 10px 10px 0px;font-size:20px}.main #obj .input-box button:hover{background-color:#fad542}.main #obj .input-box button:active{background-color:#e3c651}.main #obj .guess-box{width:98%;height:48px;gap:5px;border:1px solid black;border-radius:10px;color:#000;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:20px}.main #obj .guess-box h1{color:#fff;font-size:20px}.main #obj .guess-box p{font-size:15px}.main #obj .lower{background-color:#e84949}.main #obj .correct{background-color:#46d05f}.main #obj .close{background-color:#fd0}.main #obj .lost{background-color:gray}*{font-family:Arial,Helvetica,sans-serif}.invoice-container{display:flex;flex-direction:column;gap:10px}.invoice-container input{width:170px;height:25px;color:#191919;border-radius:5px;border:2px dashed rgb(35,149,255)}.invoice-container .title{padding-top:5px;width:100%;display:flex;flex-direction:column;align-items:center}.invoice-container .title p{color:#9b9b9b}.invoice-container .main-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.invoice-container .main-container .outline{width:804px;height:1132px;border:5px solid rgb(104,210,255);border-style:dashed;border-radius:15px}.invoice-container .main-container #invoice-preview{display:flex;flex-direction:column;width:794px;height:1122px;border-radius:10px;background:#fff;padding:50px 20px}.invoice-container .main-container #invoice-preview .headers{display:flex;align-items:end;flex-direction:column;gap:0px}.invoice-container .main-container #invoice-preview .headers h1{color:#191919;font-weight:550;font-size:40px;padding-bottom:20px}.invoice-container .main-container #invoice-preview hr{border:1px solid #191919;margin:20px 0}.invoice-container .main-container #invoice-preview .invoice-info{width:100%;display:flex;justify-content:space-between}.invoice-container .main-container #invoice-preview .invoice-info .company{width:30%;display:flex;flex-direction:column;gap:5px}.invoice-container .main-container #invoice-preview .invoice-info .company input:nth-child(2){width:250px}.invoice-container .main-container #invoice-preview .invoice-info .invoice-details{display:flex;flex-direction:column;gap:0px}.invoice-container .main-container #invoice-preview .invoice-info .invoice-details div{display:flex;align-items:center;justify-content:space-between}.invoice-container .main-container #invoice-preview .invoice-info .invoice-details div h2{font-size:15px;color:#000}.invoice-container .main-container #invoice-preview .invoice-info .invoice-details div p{color:#000;padding-right:40px}.invoice-container .main-container #invoice-preview #work-info{display:flex;flex-direction:column;width:100%}.invoice-container .main-container #invoice-preview #work-info hr{border:.5px solid black}.invoice-container .main-container #invoice-preview #work-info .headings{display:flex}.invoice-container .main-container #invoice-preview #work-info .headings h2{color:#191919;font-size:15px;padding-left:50px}.invoice-container .main-container #invoice-preview #work-info .headings h2:nth-child(1){width:265px;padding-left:0}.invoice-container .main-container #invoice-preview #work-info .items{display:flex}.invoice-container .main-container #invoice-preview #work-info .items p{color:#000;width:50px;margin-left:45px}.invoice-container .main-container #invoice-preview #work-info .items p:nth-child(1){width:265px;margin-left:0}.invoice-container .main-container #invoice-preview #work-info .items input{width:50px;margin-left:45px}.invoice-container .main-container #invoice-preview #work-info .items input:nth-child(1){width:265px;margin-left:0}.invoice-container .main-container #invoice-preview .footer-info{width:100%;display:flex;justify-content:end}.invoice-container .main-container #invoice-preview .footer-info p{color:#000}.invoice-container .main-container #invoice-preview .footer-info h4{color:#000;padding-right:100px}.invoice-container .main-container #invoice-preview .bottom-container{flex-grow:1;display:flex;align-items:end}.invoice-container .main-container #invoice-preview .bottom-container .bank-details h2,.invoice-container .main-container #invoice-preview .bottom-container .bank-details div p{color:#191919}.invoice-container .main-container .button-container{width:100%;height:100px;display:flex;justify-content:center;gap:10px}.invoice-container .main-container .button-container button{width:150px;height:60px;border-radius:10px;border:2px solid white;background:#ff3f3f;display:flex;justify-content:center;align-items:center;box-shadow:0 4px #ff3f3fcc;font-size:20px;font-weight:700}.invoice-container .main-container .button-container button img{width:40px;height:40px;filter:none}.invoice-container .main-container .button-container button:nth-child(2){width:60px;background:#ffe23f;box-shadow:0 4px #ffe23fcc}.invoice-container .main-container .button-container button:nth-child(2) img{filter:brightness(10)}.invoice-container .main-container .button-container button:nth-child(2):hover{background:#ffe761}.invoice-container .main-container .button-container button:active{background-color:red}.invoice-container .main-container .button-container button:hover{background:#ff5f5f}#add-item{width:40px;height:40px;background:none;border:none;align-self:end}#add-item img{filter:none;object-fit:fill;width:40px;height:40px}#add-item img:hover{filter:invert(.5) sepia(1) saturate(3) hue-rotate(60deg) brightness(1.2);cursor:pointer}#add-item:active img{filter:invert(.5) sepia(1) saturate(3) hue-rotate(60deg)}