h1,h2,h3,p{line-height:1.5;margin:0}a,body{color:var(--clr-principal)}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}.footerContentParagraph__linkGithub,.footerContent__link{text-decoration:underline;transition:var(--transitionClr)}.footerContentParagraph__linkGithub:hover,.footerContent__link:hover,.navList__item .navList__link:hover{color:var(--clr-blue)}.footerContent__link,.headerContent,.navList,.skillBox{text-align:center}: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}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;text-transform:uppercase;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  ";margin:0;padding:0;list-style:none}.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}.contentMain,.footerContent,.footerContent__link,.skills{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-right:2px solid var(--clr-border);border-left: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);text-transform:uppercase;font-weight:700;font-size:clamp(1.3125rem, 3vw, 4rem)}.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{font-weight:600}@media screen and (min-width:1440px){body{padding:35px}.paragraph{max-width:90%}}.contentMain,.skills{display:flex;flex-direction:column;gap:1rem;padding:clamp(1.25rem,5vw,2.5rem)}.contentMain__span{font-size:clamp(1.3125rem, 1.5vw, 2rem);text-transform:uppercase;font-weight:600}.contentImg{display:flex;flex-direction:column;gap:1rem}.skillsContainer{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}@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:55% 45%}.contentMain{gap:2rem}.skills{border-left:2px solid var(--clr-border)}.skillsContainer{grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1024px){.contentImg{display:grid;gap:30px;grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(2,1fr)}.skillsContainer{grid-template-columns:repeat(3,1fr);gap:60px}}.skillBox__img{width:clamp(3.125rem,3.5vw,4.6875rem);height:clamp(3.125rem,3.5vw,4.6875rem)}.skillBox__img--prepros{margin:0 auto}.skillBox__span{display:block;font-weight:600;font-size:clamp(1rem, 1.15vw, 1.25rem)}.st0{fill:#c1272d}.st1{fill:#efcca3}.st2{fill:#ed1c24}.st3{fill:#ccac8d}.st4{fill:#fff}.st5{fill:#ff931e}.st6{fill:#ffb81e}.st7{fill:#56332b}.st8{fill:#442823}.st9{fill:#7f4a41}.st10{fill:#331712}.st11{fill:#fc6}.st12{fill:#ccc}.st13{fill:#b3b3b3}.st14{fill:#989898}.st15{fill:#323232}.st16{fill:#1e1e1e}.st17{fill:#4c4c4c}.st18{fill:#e6e6e6}.st19{fill:#606060}