@import"https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&display=swap";@import"https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Atkinson Hyperlegible Next,serif;font-optical-sizing:auto;font-weight:300;font-style:normal}canvas{position:fixed;top:0;left:0}main{position:fixed;padding:0;top:0;left:0;width:100%;height:100%;background-color:#00000040}main .main-menu{transition:all .5s;transform:translate(-100%);width:100%;height:100%;display:flex;justify-content:center;align-items:center}main .main-menu .chips{display:grid;grid-template-rows:repeat(2,1fr) repeat(3,.6fr);grid-template-columns:1fr;grid-template-areas:"name" "." "about" "work" "contact";row-gap:15px;width:80%}@media only screen and (min-width: 1200px){main .main-menu .chips{width:40%}}main .main-menu .chips span{color:#fff;text-align:center;background-color:#00000080;border-radius:20px;width:100%}main .main-menu .chips .button{transition:all .4s}main .main-menu .chips .button:hover{background-color:#0006}main .main-menu .chips .name{grid-area:name;font-size:50px;padding:10px}main .main-menu .chips .about{grid-area:about;font-size:30px;padding:10px}main .main-menu .chips .work{grid-area:work;font-size:30px;padding:10px}main .main-menu .chips .contact{grid-area:contact;font-size:30px;padding:10px}main .section{transition:all .5s;height:100%;width:100%;background-color:#00000080;color:#fff;font-size:20px;padding:15px}@media only screen and (min-width: 768px){main .section{font-size:25px;padding:30px}}@media only screen and (min-width: 1200px){main .section{font-size:20px;height:80%;width:60%;border-radius:50px;margin:auto}}main .section .back{display:flex;justify-content:center}main .section .back i{position:absolute;font-size:40px;top:10px}main .section .back-bottom{display:flex;justify-content:center}main .section .back-bottom i{font-size:40px}main .about-section{transform:translate(100%) translateY(-112.5%)}@media only screen and (min-width: 1200px){main .about-section{transform:translate(200%) translateY(-112.5%)}}@media only screen and (min-width: 768px){main .about-section{display:flex;flex-direction:column;justify-content:center}}main .about-section .text{margin-top:35px}main .about-section .text p a{color:#fff}main .about-section .text p em{font-style:italic}@media only screen and (min-width: 768px){main .about-section .text{margin-top:0}}main .work-section{transform:translate(100%) translateY(-200%);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}@media only screen and (min-width: 1200px){main .work-section{transform:translate(200%) translateY(-212.5%)}}main .work-section .text{margin-top:35px}main .work-section .text h3{font-weight:500;font-size:30px;margin-bottom:10px}main .work-section .text em{font-style:italic}main .work-section .text p{white-space:pre-line;margin-bottom:5px}main .work-section .text p b{font-weight:500}main .work-section .text a{display:inline-block;color:#fff;margin-bottom:10px}main .work-section::-webkit-scrollbar{display:none}main .contact-section{transform:translate(100%) translateY(-300%);display:flex;flex-direction:column;justify-content:center}@media only screen and (min-width: 1200px){main .contact-section{transform:translate(200%) translateY(-312.5%)}}main .contact-section .links{display:flex;flex-direction:column;justify-content:center;width:fit-content;margin-left:auto;margin-right:auto}main .contact-section .links .link{display:block;font-size:30px}main .contact-section .links .link i{margin-right:6px}main .contact-section .links .link .fa-linkedin{margin-right:9px}main .contact-section .links .link a{color:#fff;text-decoration:underline}@media only screen and (min-width: 768px){main .contact-section .links .link{font-size:40px}}main .main-menu.active{transform:translate(0)}main .about-section.active{transform:translate(0) translateY(-100%)}@media only screen and (min-width: 1200px){main .about-section.active{transform:translate(0) translateY(-112.5%)}}main .work-section.active{transform:translate(0) translateY(-200%)}@media only screen and (min-width: 1200px){main .work-section.active{transform:translate(0) translateY(-212.5%)}}main .contact-section.active{transform:translate(0) translateY(-300%)}@media only screen and (min-width: 1200px){main .contact-section.active{transform:translate(0) translateY(-312.5%)}}