header{margin:0;padding:0;background-color:#fff}body{font-family:Roboto;margin:0;padding:0;background-color:#fff;overflow-x:hidden}h1,h2,h3{margin-top:0;padding-left:20px}h4{padding:0;margin:15px 0}p{font-size:18px}li{font-family:Roboto;color:#272932;text-decoration:none;padding:0 5px}.RouterLink,.SmoothLink,a{font-family:Roboto;color:#fff;text-decoration:none;cursor:pointer;text-emphasis:none}.RouterLink:hover,.SmoothLink:hover,a:hover{text-decoration:underline}.headerBackground{display:flex;position:fixed;justify-content:space-between;align-items:center;height:80px;width:100%;background-color:#fff;box-shadow:0 1px 2px #00000040;z-index:5}.logo{height:60px;margin:30px}.headerList{display:flex;flex-direction:row;width:350px;padding-right:20px;justify-content:space-around;list-style:none}.sideMenu{height:auto;width:50px;margin:0 10px}.sideMenuContainer{position:fixed;width:100%;height:100vh;background-color:#032944;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;transform:translate(100%);transition:transform .3s;padding:10px 15px;animation-name:slideIn;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;overflow-y:auto;top:0;right:0}.sideMenuContainer:active{transform:translate(0)}.sideMenuUl{height:70%;display:flex;flex-direction:column;justify-content:space-evenly}.RouterLinkSideMenu,.SmoothLinkSideMenu{font-size:40px;color:#fff}.hero{background:#054d80;height:100vh;color:#fff;font-size:40px}.heroH1{font-size:75px;margin:0;padding:0;display:inline-block;white-space:nowrap;color:#fff;letter-spacing:.125em}.heroP{margin:0;font-size:30px;font-weight:300}.subtext{font-size:15px;font-weight:300}.hero-area{display:flex;height:100vh;justify-content:space-between;align-items:center}.hero-text{margin-left:80px}.socials{padding:0 40px}.social{margin:20px}.btn{top:0;left:0;transition:all .15s linear 0s;position:relative;display:inline-block;padding:15px 45px;background-color:#fff;color:#000;font-family:arial;letter-spacing:1px;box-shadow:-8px 8px #03375c;text-decoration:none;margin-top:25px}.btn a{color:#000}.heroSmoothLink{font-size:25px}.heroSmoothLink:hover{text-decoration:none}.btn:hover{top:3px;left:-3px;box-shadow:-3px 3px #03375c;text-decoration:none}.btn:hover:after{top:1px;left:-2px;width:4px;height:4px}.btn:hover:before{bottom:-2px;right:1px;width:4px;height:4px}.btn:after{transition:all .15s linear 0s;content:"";position:absolute;top:2px;left:-4px;width:8px;height:8px;background-color:#03375c;transform:rotate(45deg);z-index:-1}.btn:before{transition:all .15s linear 0s;content:"";position:absolute;bottom:-4px;right:2px;width:8px;height:8px;background-color:#03375c;transform:rotate(45deg);z-index:-1}a.btn{position:relative}a:active.btn{top:6px;left:-6px;box-shadow:none}a:active.btn:before{bottom:1px;right:1px}a:active.btn:after{top:1px;left:1px}@media (max-width: 950px){.heroH1{font-size:50px;white-space:normal;margin-top:75px}.hero-area{flex-wrap:wrap}.socials{display:flex;justify-content:space-evenly}}.aboutMeWrapper{display:flex;justify-content:center}.aboutMeContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:1000px;margin-top:100px}.aboutMeTitle{padding-left:0;margin-bottom:0}.aboutMeIntro{display:flex;flex-direction:row;align-items:center;justify-content:center}.aboutMeTextWrapper{display:flex;flex-direction:column}.doodle,img.doodle{width:225px;height:auto;margin-right:50px}.aboutMeText{max-width:80%;white-space:pre-wrap;word-spacing:normal;padding-left:25px;padding-top:25px;border-top-left-radius:300px 15px;border-top-right-radius:250px 5px;border-bottom-left-radius:5px 355px;border-left:solid 2px #41403e;border-top:solid 2px #41403e}.techStack{display:flex;align-items:center;justify-content:space-evenly;width:80%;list-style:none;margin:35px 0}.icon{height:auto;max-width:50px}.aboutMeBtn{top:0;left:0;transition:all .15s linear 0s;position:relative;display:inline-block;padding:15px 45px;background-color:#e64a6c;color:#fff;font-family:arial;letter-spacing:1px;text-decoration:none;margin-top:25px}.aboutMeBtn:hover{background-color:#9b384e;text-decoration:none}@media (max-width: 950px){.aboutMeIntro{flex-direction:column;align-items:center;justify-content:center}.aboutMeTextWrapper{align-items:center;justify-content:center}.doodle{display:none}}.projectsWrapper{display:flex;position:relative;flex-direction:column;justify-content:center;align-items:center;margin:75px 0;padding:50px 0;background:linear-gradient(180deg,rgba(5,77,128,.9192051820728291) 21%,rgba(230,74,108,.6671043417366946) 100%)}.projectsTitle{margin-bottom:50px;color:#fff}.projectsContainer{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-auto-rows:auto;grid-gap:20px;position:relative;z-index:1;max-width:60%}.item-1{grid-area:1 / 1 / 3 / 2}.item-2{grid-area:2 / 2 / 4 / 3}.item-3{grid-area:3 / 1 / 5 / 2}.item-4{grid-area:4 / 2 / 6 / 3}.item-5{grid-area:5 / 1 / 7 / 2}@media (max-width: 1100px){.projectsContainer{max-width:80%}}@media (max-width: 950px){.projectsWrapper{margin-bottom:20px}.projectsContainer{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:20px;max-width:80%}.projectsTitle{margin-bottom:10px}}.image-container{position:relative;display:grid;border-radius:20px}.image-container:hover{cursor:pointer}.projectImg{grid-area:1 / 1;width:100%;height:100%;object-fit:cover;border-radius:20px}.imgOverlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;content:"";background:rgb(0,0,0);background:linear-gradient(180deg,rgba(0,0,0,.1741071428571429) 35%,rgba(0,0,0,.9192051820728291) 100%);opacity:0;transition:opacity .3s ease-in-out;z-index:1;animation:fadeIn .3s ease-in}.image-container:hover .imgOverlay{opacity:1}.overlayContainer{position:absolute;bottom:20px;left:20px;width:calc(100% - 30px);padding:20px;box-sizing:border-box;color:#fff;opacity:0;transition:opacity .3s ease-in-out;z-index:2}.image-container:hover .overlayContainer{opacity:1}.projectTitle{margin:0;padding:0;font-weight:800}.projectSubtitle{margin-top:5px;margin-bottom:10px;font-weight:100}.tagContainer{display:flex;flex-wrap:wrap}.tag{background:#e64a6c;padding:4px 10px;border-radius:50px;text-transform:capitalize;font-size:15px;margin-right:10px;margin-bottom:5px;color:#fff}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 950px){.projectsContainer{grid-template-columns:1fr}.overlayContainer{font-size:14px;bottom:10px;padding:10px}.imgOverlay{background-color:#000c}.projectTitle{font-size:24px}.projectSubtitle{font-size:18px}.tag{font-size:14px}}.projectPuContainer{position:fixed;top:0;right:0;width:500px;height:100%;max-height:calc(100% - 100px);background-color:#032944;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;z-index:9;transform:translate(100%);transition:transform .3s;padding:10px 15px;margin-top:80px;animation-name:slideIn;animation-duration:.3s;animation-timing-function:ease-in-out;animation-fill-mode:forwards;overflow-y:auto}.projectPuContainer.active{transform:translate(0);overflow-y:auto}.disable-scroll{overflow:hidden}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.puWrapper{display:flex;flex-direction:column;align-content:center;background-color:#fff}.popUpHeader{display:flex;justify-content:space-between;align-items:center;width:100%;height:50px;border-bottom:1px solid white;margin-bottom:15px}.arrow{position:relative;width:30px;height:30px;cursor:pointer;transition:.5s;overflow:hidden}.arrow:hover{border:solid 2px white;border-radius:50%}.arrow:after{position:absolute;display:block;content:"";color:#fff;width:20px;height:15px;top:-1px;border-bottom:solid 2px;transform:translate(4px)}.arrow:before{position:absolute;display:block;content:"";color:#fff;width:8px;height:8px;border-top:solid 2px;border-left:solid 2px;top:50%;left:2px;transform-origin:0% 0%;transform:rotate(-45deg)}.arrow:hover:before{animation:aniArrow01 1s cubic-bezier(0,.6,1,.4) infinite .5s}.arrow:hover:after{animation:aniArrow02 1s cubic-bezier(0,.6,1,.4) infinite .5s}@keyframes aniArrow01{0%{transform:rotate(-45deg) translateY(30px) translate(30px)}to{transform:rotate(-45deg) translateY(-35px) translate(-35px)}}@keyframes aniArrow02{0%{transform:translate(45px)}to{transform:translate(-44px)}}@keyframes borderAni{0%{border:solid 2px white}to{border:solid 2px white;border-radius:50%}}.backButton{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:none;padding:0;margin:0;font-family:inherit;font-size:inherit;cursor:pointer;outline:none;font-weight:700;color:#fff}.backButton:hover{text-decoration:underline}.imageContainer{width:100%;height:300px}.projectPuImg{width:100%;height:100%;object-fit:cover;border-radius:20px}.projectTitle,.projectSubtitle,.fullDescription,.liveDemo,.github{color:#fff}.aboutPu{color:#fff;margin:10px 0;padding:0}.fullDescription{margin-top:10px;margin-bottom:10px;font-weight:100}.technolgiesPu,.linkTitle{color:#fff;margin:10px 0;padding:0}.linka{color:#fff;margin:5px 0 10px;padding:0;font-weight:100}.darkOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000e6;display:none;z-index:2}.darkOverlay.active{display:block}@media (max-width: 950px){.projectPuContainer{width:100%}.puWrapper{width:80%;margin-bottom:20px}}.contactContainer{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;margin-bottom:100px;margin-left:20px;margin-right:40px;background-color:#fff}.contactWrapper{display:flex;align-items:flex-start;flex-direction:column}.connectTitle{padding:0;margin:0}form{font-size:16px}input{width:100%;height:35px;padding:7px;outline:none;border-radius:5px;border:1px solid #054d80;font-family:Roboto;margin-bottom:10px}input:focus{border:2px solid #032944}textarea{width:100%;height:100px;padding:7px;outline:none;border-radius:5px;border:1px solid #054d80;font-family:Roboto}textarea:focus{border:2px solid #032944}label{margin-top:1rem;font-family:Roboto}.contactButton{transition:all .15s linear 0s;padding:15px 45px;background-color:#e64a6c;color:#fff;font-family:Roboto;letter-spacing:1px;text-decoration:none;margin-top:25px;text-align:center;border:none}.contactButton:hover{background-color:#9b384e;text-decoration:none}@media (max-width: 768px){.contactContainer{margin-bottom:50px}}