@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap";:root{--color-bg: #111111;--color-text: #ffffff;--color-text-accent: #666666;--color-accent: #378EFF}.slide-in{position:fixed;top:0;left:0;width:100%;height:100vh;background:#fff;transform-origin:top}.slide-out{position:fixed;top:0;left:0;width:100%;height:100vh;background:#fff;transform-origin:bottom}a.active{color:var(--color-accent);text-decoration:none;width:100%;height:100%;background:var(--color-bg);border-radius:10px 10px 0 0;border-left:3px var(--color-text-accent) solid;border-right:3px var(--color-text-accent) solid;border-top:3px var(--color-text-accent) solid;margin:-1px;display:flex;position:relative;align-items:center}link{color:var(--color-text-accent);text-decoration:none;width:100%;height:100%}.nav__list{margin:0;display:flex;width:40vw}.nav-links{display:flex;justify-content:center;align-items:center;width:100%;height:6vh}.nav-links:hover{filter:brightness(125%);border-radius:5px 5px 0 0}.nav-tabs{font-family:Arial,Helvetica,sans-serif;color:var(--color-text-accent);font-size:1.5rem}.header-container a{color:var(--color-text-accent);text-decoration:none;width:100%;height:100%}body{margin:0;padding:0;font-family:Inter,sans-serif;background:var(--color-bg);display:block;width:100vw;height:100vh;overflow-y:hidden}.header-container{margin-top:2vh;background:var(--color-bg);height:6vh;width:100%;display:grid;grid-template-columns:15% 10% 10% 10% 10%;border-bottom:var(--color-text-accent) solid 3px;gap:15px}.title{display:flex;background:var(--color-bg);width:100%;height:6vh;justify-content:center;align-items:center;text-transform:uppercase}.title p,.navlink-home{font-family:Arial,Helvetica,sans-serif;color:var(--color-text-accent);font-size:1.5rem}.content-container{margin:auto;width:95vw;height:94vh;display:grid;grid-template-rows:10% 40% 10% 5% 20%;grid-template-columns:50% 50%;grid-template-areas:"main-top-text main-top-text" "main-myname main-myimage" ". main-myimage" "main-currentprjct main-myimage" "main-aboutme main-myimage"}.main-top-text{grid-area:main-top-text;display:flex}.main-top-left{width:50%;height:100%;text-transform:uppercase;color:var(--color-text-accent);font-size:1.5rem}.main-top-left span{background:linear-gradient(92.25deg,#7c4fc9,#7e94f0 56.77%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:1.5rem}.main-top-right{width:50%;height:100%;display:flex;justify-content:flex-end}.main-top-right p{font-size:1.5rem;padding-left:35%;color:var(--color-text-accent)}.main-myname{grid-area:main-myname;display:flex}.main-myname p{font-size:8vw;margin:0;color:#fff;position:relative}.main-myname p:after{content:"";position:absolute;bottom:0;left:0;width:80%;height:10px;border-radius:20px;background:var(--color-accent)}.main-myimage{grid-area:main-myimage;display:flex;justify-content:center;align-items:start}.main-myimage img{margin-left:30%;width:50%;height:80%;object-fit:cover;border-radius:5px}.main-currentprjct{grid-area:main-currentprjct;display:flex;align-items:center}.main-currentprjct p{color:var(--color-text-accent);font-size:2rem;font-weight:400;text-transform:uppercase}.main-currentprjct span{color:var(--color-accent)}.main-aboutme{grid-area:main-aboutme}.main-aboutme p{color:var(--color-text);font-size:1.5rem;line-height:1.5;padding-right:20%}.mywork-content-container{display:grid;width:95vw;height:94vh;grid-template-rows:10% 35% 55%;grid-template-columns:50% 50%;grid-template-areas:"mywork-top-text mywork-top-text" "mywork-center-text ." "div3 div3";margin:auto;align-items:center;height:100vh}.mywork-top-text{grid-area:mywork-top-text;width:100%;height:100%;display:flex;-webkit-user-select:none;user-select:none}.mywork-top-left{width:100%;height:100%;text-transform:uppercase;color:var(--color-text-accent);font-size:2rem;display:flex;align-items:center}.mywork-top-left a{color:var(--color-text-accent);margin:15px}.mywork-top-right{width:100%;height:100%;display:flex;justify-content:flex-end}.mywork-center-text{grid-area:mywork-center-text;width:100%;height:100%}.mywork-center-text p{font-size:8vw;margin:0;color:#fff;position:relative}.mywork-center-text p:after{content:"";position:absolute;bottom:0;left:0;width:80%;height:10px;border-radius:20px;background:var(--color-accent)}.div3{grid-area:div3;background-color:green;width:100%;height:100%}