html{scroll-behavior:smooth}.body{background-color:var(--main-bg-color);color:var(--main-text-color);font-family:var(--main-font-family);font-size:1.2rem}.sectionSubHeading{font-family:var(--secondary-font-family);font-size:calc(2rem + 1vw)}.header{background-color:var(--secondary-bg-color);display:flex;font-family:var(--secondary-font-family);height:3.5rem;width:100%;.headerNav{align-items:center;display:flex;justify-content:space-around;width:100%}.headerName{font-weight:700}.headerLinksList{align-items:center;display:flex}.headerLink,.headerName{color:var(--main-text-color);padding-right:.75rem;text-decoration:none;&:hover{text-decoration:underline;text-underline-offset:3px}}}.main{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:0 2rem}.scrollWrapper{max-width:95vw;position:relative;width:100%}.scrollWrapper:after,.scrollWrapper:before{content:"";height:100%;pointer-events:none;position:absolute;top:0;width:60px;z-index:1;@media (min-width:600px){width:150px}}.scrollWrapper:before{background:linear-gradient(to right,var(--main-bg-color) 0,var(--main-bg-color) 50%,transparent 100%);left:0}.scrollWrapper:after{background:linear-gradient(to left,var(--main-bg-color) 0,var(--main-bg-color) 50%,transparent 100%);right:0}.scrollContainer{height:80px;overflow-x:auto;overflow-y:hidden;position:relative;scroll-behavior:auto;scrollbar-width:thin;scrollbar-width:none;white-space:nowrap;width:100%;&::-webkit-scrollbar{display:none}}.technologiesTitle{color:var(--secondary-text-color);font-size:calc(1.5vw + 1rem);font-variant:small-caps;font-weight:600;margin-bottom:1rem;text-align:center}.technologiesList{display:inline-flex;gap:1rem;list-style:none;margin:0;min-width:max-content;padding:0;width:max-content}.technologiesList li{background:var(--secondary-bg-color);border-radius:8px;color:var(--main-text-color);flex-shrink:0;font-family:var(--secondary-font-family);font-size:18px;min-width:150px;padding:.5rem;text-align:center}.hero{border-bottom:1px solid var(--secondary-text-color);margin-bottom:2rem;padding-bottom:1rem}.mainTitle{align-items:center;display:flex;font-family:var(--secondary-font-family);font-size:calc(1.75rem + 3vw);height:60vh;justify-content:center;text-align:center;@media (min-width:600px){font-size:clamp(1.5rem,2vw + 3rem,6rem)}}.aboutAndExpertise{border-bottom:1px solid var(--secondary-text-color);display:flex;flex-direction:column;justify-content:space-between;margin-bottom:2rem;@media (min-width:600px){flex-direction:row}}.about{@media (min-width:600px){padding-right:2rem}}.about,.expertise{width:100%;.sectionSubHeading{margin:1rem 0}@media (min-width:600px){width:48%}}.expertiseList{padding:0}.expertiseItem{align-items:flex-start;display:flex;flex-direction:row;gap:1rem;margin-bottom:2rem;padding-bottom:2rem;&:not(:last-child){border-bottom:1px solid var(--secondary-text-color)}img{flex-shrink:0;height:3rem;width:3rem}.text-content{display:flex;flex:1;flex-direction:column}.expertiseItemTitle{font-family:var(--secondary-font-family);font-size:1.5rem;margin:0 0 .5rem}p{line-height:1.5;margin:0}}.contactForm{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:2rem;@media (min-width:600px){flex-direction:row}}.contactFormFields,.contactFormPrompt{width:100%;@media (min-width:600px){width:48%}}.contactFormPrompt{margin-bottom:2rem;@media (min-width:600px){margin-bottom:0}}.contactFormFields{border:1px solid var(--secondary-text-color);border-radius:.5rem;padding:1rem}.formField{background-color:hsla(0,0%,100%,.95);border:none;border-radius:.5rem;margin-bottom:1rem;padding:.35rem;width:100%}.textArea{margin-bottom:0}.charCount{float:right;transition:color .3s ease-in-out;&.limit-near{color:var(--warning-text-color);&:before{content:"🟠 "}}&.limit-exceeded{color:var(--error-text-color);&:before{content:"🚨 "}}}.formButton{background-image:linear-gradient(90deg,#da22ff 0,#9733ee 51%,#da22ff);background-size:200% auto;border:none;border-radius:.5rem;box-shadow:0 0 3px #eee;color:var(--main-text-color);cursor:pointer;margin-top:1rem;padding:1rem;transition:.5s ease-in-out;width:100%;&:disabled{cursor:not-allowed;filter:grayscale(100%);opacity:.5;text-decoration:none}}.formButton:hover{background-position:100%;text-decoration:underline;text-underline-offset:3px}.status{font-weight:700;height:2rem;margin-top:1rem;opacity:0;text-align:center;transition:opacity 1s ease-in-out;&.visible{opacity:1}&.fade-out{opacity:0}}