h1,h2,h3,p{line-height:1.5;margin:0}a,body{color:var(--clr-principal)}.formContainer__label,details,img,main,span{display:block}button,hr,input{overflow:visible}img,legend{max-width:100%}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}.nav,main{overflow:hidden}.footerContent__link,.headerContent{text-transform:uppercase;text-align:center}.button:hover,.contactContentLinks__link:hover,.footerContentParagraph__linkGithub:hover,.footerContent__link:hover,.navList__item .navList__link:hover{color:var(--clr-blue)}:root{--fs-h2-mobile:3rem;--fs-h3-mobile:2.625rem;--fs-text:0.875rem;--fs-footer-mobile:1rem;--ff-title:"Merriweather",serif;--ff-paragraph:"Roboto Mono",monospace;--clr-principal:#000000;--clr-border:#232020;--clr-blue:#26498d;--clr-selected:#ffffff;--clr-body:#f3efee;--transitionClr:.2s color}*,::after,::before{box-sizing:border-box}html{scroll-behavior:smooth;line-height:1.15;-webkit-text-size-adjust:100%}body{max-width:1750px;margin:0 auto;font-size:16px;padding:5px;font-family:var(--ff-paragraph);background-image:url(../image/image/noisebg.webp)}@media screen and (min-width:768px){body{padding:20px}.headerContainer{display:grid;grid-template-columns:20% 60% 20%}}@media screen and (min-width:1024px){body{padding:25px}}::selection{background-color:var(--clr-blue);color:var(--clr-selected)}h2,h3{font-family:var(--ff-title)}h2{font-size:clamp(2.1875rem, 5vw, 6rem)}h3{font-size:clamp(2rem, 3vw, 4.5rem)}img{border-style:none}p{font-family:var(--ff-paragraph);font-weight:400}a{text-decoration:none;background-color:transparent}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}.nav,.navList__item--about{border-bottom:2px solid var(--clr-border)}.nav,.navList__item--about,.navList__item--works{border-left:2px solid var(--clr-border)}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}.formContainer__input:focus,.formContainer__textarea:focus{outline:2px solid var(--clr-blue)}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}.content,.headerSocialMedia,.logo,[hidden],template{display:none}.spinnerContainer{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:var(--clr-blue)}.spinnerContainer__son,.spinnerContainer__son::after,.spinnerContainer__son::before{box-sizing:border-box;width:20px;height:12px;background:currentColor;border-radius:4px}.spinnerContainer__son{display:block;margin:auto;position:relative;color:var(--clr-selected);animation:.6s .3s infinite alternate animloader}.spinnerContainer__son::after,.spinnerContainer__son::before{content:"";position:absolute;top:0;right:110%;animation:.6s infinite alternate animloader}.spinnerContainer__son::after{left:110%;right:auto;animation-delay:.6s}@keyframes animloader{0%{width:20px}100%{width:48px}}.headerContainer{border:2px solid var(--clr-border)}.headerContent{display:flex;flex-direction:column;gap:1rem;padding:1rem 0}.headerContent__title{margin:0;font-weight:700;font-size:clamp(2.5rem, 5vw, 6rem)}.headerContent__span{font-size:clamp(1.3125rem, 1.5vw, 2rem);font-weight:600}.nav{border-right:2px solid var(--clr-border)}.navList{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);grid-template-areas:"navList__item--skills navList__item--about navList__item--works" "navList__item--contact  navList__item--contact navList__item--contact  ";text-align:center;margin:0;padding:0;list-style:none}.contactContent,.navList__item{position:relative}.navList__item--about{grid-area:navList__item--about}@media screen and (min-width:768px){.logo{display:flex;align-items:center;justify-content:center}.logo__link{font-weight:700;font-size:clamp(2.5rem, 5vw, 6rem);transition:var(--transitionClr)}.logo__link:hover{color:var(--clr-blue)}.headerContent{border-right:2px solid var(--clr-border);border-left:2px solid var(--clr-border)}.headerSocialMedia{display:flex;align-items:center;justify-content:center;gap:clamp(1.25rem,1.5vw,2.1875rem);flex-direction:column;font-weight:600}.headerSocialMedia__link{display:inline-block;text-transform:uppercase;font-size:clamp(1rem, 1.25vw, 1.5rem);transition:var(--transitionClr)}.headerSocialMedia__link:hover{color:var(--clr-blue)}.navList__item--about{border-bottom:none}}.navList__item--skills{border-bottom:2px solid var(--clr-border);grid-area:navList__item--skills}@media screen and (min-width:768px){.navList__item--skills{border-bottom:none}}.navList__item--works{border-bottom:2px solid var(--clr-border);grid-area:navList__item--works}.contactContentLinks,.footerContent,.footerContent__link{border-bottom:2px solid var(--clr-border)}.navList__item--contact{grid-area:navList__item--contact}.navList__item .navList__link{display:block;width:100%;padding:16px 0;font-size:clamp(1rem, 1.5vw, 1.25rem);font-weight:600;transition:var(--transitionClr);transition:background-image .4s;z-index:20}.footerContent,.main{border-left:2px solid var(--clr-border);border-right:2px solid var(--clr-border)}.navList--grid{display:initial;justify-content:center}.footerContent__link{display:block;height:clamp(3.125rem,5vw,6.25rem);line-height:clamp(3.125rem, 5vw, 6.25rem);font-weight:700;text-decoration:underline;font-size:clamp(1.3125rem, 3vw, 4rem);transition:var(--transitionClr)}.footerContentParagraph__paragraph{text-align:center;padding:1rem}@media screen and (min-width:768px){.navList__item--works{border-bottom:none}.navList__item--contact{border-left:2px solid var(--clr-border)}.navList{grid-template-areas:"navList__item--skills navList__item--about navList__item--works navList__item--contact";grid-template-rows:1fr;grid-template-columns:repeat(4,1fr)}.navList__itemGrid{border-left:none}.footerContentParagraph__paragraph{padding:0}}.footerContentParagraph__paragraph--border{border-top:2px solid var(--clr-border);padding:1rem}.footerContentParagraph__linkGithub{text-decoration:underline;transition:var(--transitionClr);font-weight:600}.contactContentInfo{display:grid;gap:1rem;padding:clamp(1.25rem,5vw,2.5rem)}.contactContentInfo__paragraph--margin{margin-bottom:55px}.contactContentLinks{position:absolute;width:100%;left:0;bottom:0;display:grid;border-top:2px solid var(--clr-border);grid-template-columns:repeat(2,1fr);text-align:center}.contactContentLinks__link{padding:1rem;font-weight:600;transition:var(--transitionClr)}.contactContentLinks__link--border{border-right:2px solid var(--clr-border)}.form{display:grid;gap:1.5rem;padding:clamp(1.25rem,5vw,2.5rem)}@media screen and (min-width:768px){.footerContentParagraph__paragraph--border{border-top:none;border-left:2px solid var(--clr-border)}.footerContentParagraph{display:grid;grid-template-columns:1fr 1fr;align-items:center}.main{display:grid;grid-template-columns:50% 50%}.contactContentLinks{border-bottom:none}.form{border-left:2px solid var(--clr-border);gap:3rem}}.formContainer__input,.formContainer__textarea{border:none;outline:transparent solid 2px;transition:outline .3s}.formContainer{display:flex;flex-direction:column;gap:.75rem}.formContainer__input{padding:1rem}.formContainer__textarea{padding:1rem 1rem 6rem;resize:vertical;min-height:150.78px;max-height:300px}.button{padding:1rem 3rem;background-color:var(--clr-blue);border:2px solid var(--clr-border);color:var(--clr-selected);justify-self:flex-start;cursor:pointer;transition:background-color .3s,color .3s}@media screen and (min-width:1440px){body{padding:35px}.form{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(3,auto);grid-template-areas:"formName formEmail" "formTextarea formTextarea" "button button"}.formName{grid-area:formName}.formEmail{grid-area:formEmail}.formTextarea{grid-area:formTextarea}.button{grid-area:button}}.button:hover{background-color:transparent}.footerContent__link{border-top:2px solid var(--clr-border)}