@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";:root{--blue-shade: #FF6347;--red-shade: #40E0D0;--borders: #808080}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{color-scheme:dark light}body{min-height:100vh}img,picture,svg,video{display:block}ol,ul{list-style:none}a{text-decoration:none;color:inherit}button{border:none;background:none;cursor:pointer;padding:0;margin:0;font:inherit;color:inherit}.App{font-family:Roboto Mono,monospace;color:#fff;background:#000;display:flex;flex-direction:column;align-items:center;min-height:100vh}.navbar{z-index:100;position:fixed;padding-top:50px;padding-bottom:50px;top:0;right:30px;height:100vh;display:flex;flex-direction:column;justify-content:space-around}.nav-item{color:#fff;font-size:20px;transition:color .3s;padding:5px;border-top-left-radius:8px;border-bottom-right-radius:8px;background-color:#000}@media (max-width: 768px){.navbar{flex-direction:row;width:100%;top:0;right:unset;height:fit-content;align-items:center;padding:15px 20px;background-color:#000}.nav-item{display:flex;flex-direction:row;justify-content:center;padding:3px;font-size:16px}.nav-letter{margin:0;padding:0}}.nav-item:hover{color:var(--red-shade);cursor:pointer}.nav-item-active{color:var(--red-shade);font-weight:700;border:solid 2px var(--borders)}.nav-slider-ctn,.nav-slider-ctn2{width:10px;height:200px;background-color:#000}@media (max-width: 768px){.nav-slider-ctn,.nav-slider-ctn2{width:50px;height:10px}}.nav-slider1,.nav-slider2{position:relative;width:10px;height:10px;background-color:var(--blue-shade);border-radius:50%;opacity:0}.top-to-bottom{animation:topToBottom 1s forwards}.bottom-to-top{animation:bottomToTop 1s forwards}@media (max-width: 768px){.top-to-bottom{animation:leftToRight 1s forwards}.bottom-to-top{animation:rightToLeft 1s forwards}}@keyframes topToBottom{0%{top:0;opacity:1}to{top:calc(100% - 50px);opacity:0}}@keyframes bottomToTop{0%{top:calc(100% - 50px);opacity:1}to{top:0;opacity:0}}@keyframes leftToRight{0%{left:0;opacity:1}to{left:100%;opacity:0}}@keyframes rightToLeft{0%{left:100%;opacity:1}to{left:0;opacity:0}}.hero,.projects,.about{width:90%;min-height:60vh;margin-top:20vh;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero-title{font-size:36px}.hero-subtitle{font-size:26px;margin-top:20px;margin-bottom:70px;color:var(--red-shade)}@media (max-width: 768px){.hero-title{font-size:30px}.hero-subtitle{font-size:24px}}.h1-span{color:var(--blue-shade)}.h2-span{color:#fff}.hero-text{margin-top:30px;font-size:20px}@media (max-width: 768px){.hero-text{font-size:16px}}.red-span{color:var(--blue-shade)}@media (min-width: 768px){.hero,.projects,.about{width:60%}}.projects-title,.about-title{font-size:36px;margin-bottom:50px}.project-nav{display:flex;flex-direction:row;justify-content:space-between;width:100%;margin-top:50px;padding:10px;border:3px solid var(--borders);border-radius:20px}.left-arrow,.right-arrow{height:40px;width:40px;cursor:pointer;transition:all .3s}.left-arrow:hover,.right-arrow:hover{filter:brightness(70%)}.project-nav-btn{height:40px;width:40px;border-radius:40%;background-color:#fff;display:flex;justify-content:center;align-items:center;transition:background-color .3s}.project-nav-btn:hover{background-color:var(--blue-shade);cursor:pointer}.project-nav-btn-active{background-color:var(--blue-shade);border:solid 6px var(--borders)}@media (max-width: 768px){.left-arrow,.right-arrow,.project-nav-btn{height:20px;width:20px}.project-nav-btn-active{border:solid 3px var(--borders)}}.project-scroll{position:relative;min-height:500px;width:100%;display:flex;flex-direction:row;margin-top:50px;overflow-x:hidden}.project{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;flex:0 0 auto;border:3px solid var(--borders);border-radius:20px;padding:10px}.project-title{font-size:30px;margin-bottom:20px;color:var(--blue-shade)}@media (max-width: 768px){.project-title{font-size:24px}}.project-img{width:100%;height:auto;object-fit:cover;border-radius:20px;margin-bottom:20px}.project-address{font-size:20px;text-decoration:none;text-decoration:underline}@media (max-width: 768px){.project-address{font-size:16px}}.project-tech-stack,.project-main-features{font-size:20px;margin-top:20px;max-height:1000px;transition:all 1.5s;overflow:hidden}.project-tech-stack-collapser{padding-bottom:10px}.project-main-features{max-height:2800px;margin-bottom:20px;position:relative}.project-column{display:flex;margin-bottom:20px;flex-direction:column;justify-content:center;align-items:center;width:100%}.collapsed{max-height:0;overflow:hidden;padding:0;margin:0;transition:all .5s}.collapser{width:100%;margin-top:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;padding-left:20%;padding-right:20%}.collapser-arrow{height:40px;width:40px}.collapser-text{font-size:20px;color:var(--blue-shade)}.project-text{font-size:20px;color:#fff}@media (max-width: 768px){.project-text{font-size:16px}}.project-text-span{color:var(--red-shade);font-size:16px}.project-text-subtitle{color:var(--blue-shade);text-decoration:underline;margin-bottom:20px;margin-top:20px}.separator{width:100%;height:3px;background-color:var(--borders)}.project-screenshots-ctn{position:relative;display:flex;flex-direction:row;width:100%;margin-top:20px;margin-bottom:20px;justify-content:space-around;flex-wrap:wrap}.project-screenshot{width:45%;height:auto;border-radius:20px;margin-bottom:20px;border:3px solid var(--borders);cursor:pointer}.img-displayer{position:fixed;display:flex;align-items:center;justify-content:center;z-index:101;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000000e6;cursor:pointer}.displayed-img{max-width:100%;max-height:100%;object-fit:contain;width:80%;height:auto;border:3px solid var(--borders);border-radius:20px}.about{margin-bottom:100px}.about-choice-nav{display:flex;flex-direction:row;justify-content:space-around;align-items:center;width:100%;height:100px;margin-top:50px;padding:10px 40px;border:3px solid var(--borders);border-radius:20px}.about-choice-nav-separator{width:3px;height:90%;background-color:var(--borders)}.about-choice{font-size:20px;padding:10px;transition:background-color .3s;cursor:pointer}@media (max-width: 768px){.about-choice-nav{padding-left:0;padding-right:0}.about-choice{font-size:16px}}.about-choice-active{color:var(--blue-shade)}.cv-download{margin-top:50px;padding:10px;border:3px solid var(--borders);border-radius:20px;display:flex;flex-direction:column;justify-content:center;align-items:center}.cv-download:hover{color:var(--red-shade)}.about-text-ctn{width:100%;margin-top:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:3px solid var(--borders);border-radius:20px;padding:10px}.about-text{margin-top:8px;margin-bottom:8px}.about-text-span{color:var(--red-shade)}.pdf-doc{margin-bottom:20px}.footer{z-index:102;width:60%;height:100px;display:flex;flex-direction:row;justify-content:space-around;align-items:center;margin-top:50px;padding:10px;border-top:3px solid var(--borders);border-left:3px solid var(--borders);border-right:3px solid var(--borders);border-top-left-radius:8px;border-top-right-radius:8px;background-color:#fff}@media (max-width: 768px){.footer{flex-direction:column;height:300px;padding:20px;width:90%;border-bottom:3px solid var(--borders);margin-bottom:20px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}}#phone-1-wrapper,#phone-2-wrapper,#email-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer}.footer-text{font-size:16px;font-weight:700;color:#000}.footer-icon{height:40px;width:40px;margin-right:20px;cursor:pointer;transition:all .3s}:root{--react-pdf-annotation-layer: 1;--annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color: Highlight;--input-focus-outline: 1px solid Canvas;--input-unfocused-border-color: transparent;--input-disabled-border-color: transparent;--input-hover-border-color: black;--link-outline: none}@media screen and (forced-colors: active){:root{--input-focus-border-color: CanvasText;--input-unfocused-border-color: ActiveText;--input-disabled-border-color: GrayText;--input-hover-border-color: Highlight;--link-outline: 1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert(100%);backdrop-filter:invert(100%)}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0;z-index:3}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer canvas{position:absolute;width:100%;height:100%}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;margin:0;transform-origin:0 0}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{background:none;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{background:none;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;height:50%;left:30%;top:20%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .popupTriggerArea{height:100%;width:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{position:absolute;font-size:calc(9px * var(--scale-factor));width:100%;min-width:calc(180px * var(--scale-factor));pointer-events:none}.annotationLayer .popup{position:absolute;max-width:calc(180px * var(--scale-factor));background-color:#ff9;box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888;border-radius:calc(2px * var(--scale-factor));padding:calc(6px * var(--scale-factor));margin-left:calc(5px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popup>*{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{display:inline-block;margin-left:calc(5px * var(--scale-factor))}.annotationLayer .popupContent{border-top:1px solid rgba(51,51,51,1);margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;user-select:none;pointer-events:none}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer: 1;--highlight-bg-color: rgba(180, 0, 170, 1);--highlight-selected-bg-color: rgba(0, 100, 0, 1)}@media screen and (forced-colors: active){:root{--highlight-bg-color: Highlight;--highlight-selected-bg-color: ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translate(-100%)}.textLayer{position:absolute;text-align:initial;top:0;right:0;bottom:0;left:0;overflow:hidden;line-height:1;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2}.textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;margin:0;transform-origin:0 0}.textLayer span.markedContent{top:0;height:0}.textLayer .highlight{margin:-1px;padding:1px;background-color:var(--highlight-bg-color);border-radius:4px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:transparent}.textLayer .endOfContent{display:block;position:absolute;top:100%;right:0;bottom:0;left:0;z-index:-1;cursor:default;-webkit-user-select:none;user-select:none}.textLayer .endOfContent.active{top:0}