@import "https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=DM+Serif+Display&display=swap";@import "https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&family=Montserrat:wght@400;500&display=swap";:root{--biggest-font-size:2.5rem;--h1-font-size:1.5rem;--h2-font-size:1.25rem;--h3-font-size:1rem;--normal-font-size:.938rem;--small-font-size:.813rem;--smaller-font-size:.75rem;--nav-font:"Montserrat";--header-font:"Kanit";--brightest:#fff;--brighter:#f8f8f8;--bright:gray;--mid-color:#404040;--dim:#202020;--dimmer:#101010;--dimmest:#000;--brightest-rgb:255, 204, 0}*{box-sizing:border-box;margin:0;padding:0}html{background-color:var(--brightest);scroll-behavior:smooth;height:100%}body{background-color:var(--brighter)}.navbar{font-family:var(--nav-font);width:45%;display:flex}#home{background:radial-gradient(circle at 20% 20%,#ffffff1f 0%,#0000 35%),linear-gradient(#181818 0%,#252525 25%,#3a3a3a 50%,#555 75%,gray 100%);flex-direction:column;min-height:100vh;margin:auto;padding:0 1rem -25vh;display:flex;position:relative;overflow:hidden}#home:before{content:"";opacity:.04;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}#home:after{background:radial-gradient(circle at 20% 20%,#ffffff14,#0000 40%)}.homeContainer{flex-direction:column;gap:25px;margin:auto;display:flex}.hero-portrait-wrap{opacity:0;z-index:3;transition:opacity .8s,transform .8s;position:relative;left:50%;transform:translate(-50%)}#home.visible .hero-portrait-wrap{opacity:1;transform:translate(-50%)translateY(0)}.hero-portrait-shell{aspect-ratio:1;background:linear-gradient(145deg,#fff3,#00000026);border:2px solid #ffffff8c;border-radius:50%;width:300px;margin:auto;position:relative;overflow:hidden;box-shadow:0 20px 45px #00000059}.hero-portrait{object-fit:cover;z-index:1;filter:grayscale()contrast(1.05);width:100%;height:100%;display:block;position:relative}.descContainer{text-shadow:2px 2px 20px #000000b3;flex-direction:column;justify-content:center;align-items:center;gap:5px;display:flex;position:relative;bottom:auto}.homeName{letter-spacing:.1em;white-space:nowrap;cursor:default;color:#fff;margin-bottom:10px;font-family:IBM Plex Mono,monospace;font-size:1.75rem;font-weight:500}.homeLabels{font-family:var(--nav-font);cursor:default;color:#fff;white-space:nowrap;text-align:center;margin-bottom:10px;font-size:.75rem}#viewWork{appearance:none;cursor:pointer;font-family:var(--nav-font);color:#fff;letter-spacing:.15em;text-transform:uppercase;z-index:1;border:none;justify-content:center;align-items:center;padding:.75rem 1rem;font-size:.75rem;font-weight:700;text-decoration:none;transition:color .3s,transform .3s,text-shadow .3s;display:inline-flex;position:relative;overflow:visible}#viewWork:before,#viewWork:after{content:"";opacity:0;background:linear-gradient(90deg,#fff0 0%,#fffffff2 50%,#fff0 100%);width:0;height:2px;transition:width .45s,opacity .25s;position:absolute;top:50%;transform:translateY(-50%)}#viewWork:before{left:-1.25rem}#viewWork:after{right:-1.25rem}#viewWork:hover:before,#viewWork:hover:after{opacity:1;width:1.5rem}#viewWork:hover{color:#fff;text-shadow:0 0 10px #ffffff59;transform:translateY(-2px)}.socialswrap{flex-direction:row;justify-content:space-around;gap:20px;list-style-type:none;display:flex}.socialswrap img{width:2rem;transition:opacity .3s}.socialswrap img:hover{opacity:.3}.imageContainer{justify-content:center;margin:auto auto 1%;display:flex}.imageContainer img{max-width:100%;display:block}.homeDesc{background-color:var(--dimmest);font-family:var(--header-font);color:var(--brightest);text-align:center;align-content:center;width:26rem;height:auto;margin:auto;padding:5%;font-size:x-large;font-weight:300;line-height:.9;box-shadow:.2rem .2rem 1rem #000}.descHeader{color:#fff;padding-bottom:8vh;font-size:large;line-height:2}.desc{font-family:var(--nav-font);color:#fff;font-size:small}.work-section{max-width:1100px;min-height:100vh;font-family:var(--nav-font);margin:auto;padding:4rem 1.5rem}.work-header{margin-bottom:2.5rem}.work-eyebrow{font-family:var(--nav-font);letter-spacing:.12em;text-transform:uppercase;color:var(--mid-color);margin:0 0 .5rem;font-size:.75rem;font-weight:500}.work-title{font-family:var(--header-font);color:var(--dimmest);margin:0 0 .75rem;font-size:2rem;font-weight:500;line-height:1.2}.work-subtitle{color:var(--dim);max-width:560px;margin:0;font-size:.938rem;line-height:1.7}.work-divider{background:var(--bright);border-radius:2px;width:48px;height:2px;margin:1.25rem 0 0}.work-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.75rem;display:grid}.project-card{border:.5px solid var(--dimmest);opacity:0;background:#fff;border-radius:14px;transition:opacity .3s,transform .3s,box-shadow .3s;overflow:hidden;transform:translateY(28px);box-shadow:0 0 #0000}.project-card.visible{opacity:1;transform:translateY(0)}.project-card:hover{box-shadow:0 15px 24px #6666664d}.video-wrapper{background:var(--dimmest);cursor:pointer;outline:none;width:100%;padding-top:56.25%;transition:blur .3s;position:relative}.video-wrapper:hover .video-thumbnail,.video-wrapper:focus-visible .video-thumbnail{filter:blur(1px)}.video-wrapper iframe{border:none;width:100%;height:100%;display:none;position:absolute;inset:0}.video-wrapper.playing iframe{display:block}.video-thumbnail{object-fit:cover;width:100%;height:100%;transition:filter .3s;display:block;position:absolute;inset:0}.play-btn{background:#28241c61;justify-content:center;align-items:center;transition:background .2s;display:flex;position:absolute;inset:0}.video-wrapper:hover .play-btn{background:#28241c8c}.play-circle{background:var(--brightest);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;transition:transform .2s,box-shadow .2s,background .2s;display:flex;box-shadow:0 8px 20px #0003}.video-wrapper:hover .play-circle{background:#f5f5f5;transform:scale(1.06);box-shadow:0 10px 24px #00000047}.play-circle svg{width:20px;height:20px;fill:var(--dimmer);margin-left:3px;transition:transform .2s}.video-wrapper:hover .play-circle svg{transform:scale(1.05)}.card-body{padding:1.1rem 1.25rem 1.3rem}.card-tags{flex-wrap:wrap;gap:10px 6px;margin-bottom:.65rem;display:flex}.tag{font-size:.7rem;font-weight:500;font-family:var(--nav-font);letter-spacing:.04em;background:var(--brightest);cursor:default;color:var(--dimmer);border:.5px solid var(--dimmest);border-radius:20px;padding:3px 9px}.card-title{font-family:var(--header-font);color:var(--dimmest);margin:0 0 .4rem;font-size:1.05rem;font-weight:500;line-height:1.3}.card-desc{color:var(--dim);margin:0 0 1rem;font-size:.825rem;line-height:1.65}.card-footer{align-items:center;gap:10px;display:flex}.btn-github{font-size:.78rem;font-family:var(--nav-font);color:var(--dimmer);border:.5px solid var(--dimmest);background-color:var(--brighter);border-radius:6px;align-items:center;gap:6px;padding:5px 12px;font-weight:500;text-decoration:none;transition:all .2s;display:inline-flex;box-shadow:0 1px 2px #0000000f}.btn-github:hover{border-color:var(--dimmest);color:var(--dimmest);background-color:#f2f2f2;transform:translateY(-1px);box-shadow:0 6px 12px #0000001f}.btn-github:hover svg{fill:var(--dimmest)}.btn-github svg{width:14px;height:14px;fill:var(--mid-color)}.stagger-1{transition-delay:50ms}.stagger-2{transition-delay:.15s}.stagger-3{transition-delay:.25s}.stagger-4{transition-delay:.35s}#proficiencies{justify-content:center;min-height:100vh;margin:8rem 0;display:flex}.prof-section{flex-direction:column;justify-content:flex-start;height:100%;padding:48px 32px;font-family:IBM Plex Mono,monospace;display:flex}.prof-header-row{align-items:baseline;gap:16px;display:flex}.prof-title{color:var(--dimmest);letter-spacing:-.5px;font-family:DM Serif Display,serif;font-size:2.5rem;font-weight:400}.prof-rule{background:linear-gradient(to right, var(--dimmest), transparent);opacity:.4;flex:1;height:1px}.prof-grid{grid-template-columns:repeat(2,20rem);gap:20px;margin-top:3rem;margin-bottom:auto;display:grid}.prof-card{background:var(--brightest);border:1px solid var(--dimmest);border-radius:8px;padding:18px 20px 20px;transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.prof-card:before{content:"";background:var(--dimmest);opacity:0;height:2px;transition:opacity .5s,box-shadow .5s;position:absolute;top:0;left:0;right:0;box-shadow:0 0 #0000}.prof-card:hover{border-color:var(--dimmest);box-shadow:0 2px 12px #9898984d}.prof-card:hover:before{opacity:1}.card-top{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.card-icon-name{align-items:center;gap:10px;display:flex}.card-icon{object-fit:contain;opacity:.85;width:28px;height:28px}.card-icon-group{align-items:center;gap:6px;display:flex}.card-icon-group .card-icon{width:22px;height:22px}.card-name{color:#2a1f14;letter-spacing:.02em;text-transform:uppercase;font-size:11px;font-weight:500}.card-pct{color:var(--dimmest);letter-spacing:-1px;font-family:DM Serif Display,serif;font-size:22px}.bar-track{background:#d3d3d3;border-radius:2px;height:4px;overflow:hidden}.bar-fill{background:#d3d3d3;border-radius:2px;width:0%;height:100%;transition:width .9s cubic-bezier(.25,.46,.45,.94)}.bar-fill.animated{width:var(--target-width)}.bar-fill.high,.bar-fill.mid,.bar-fill.low{background:var(--dimmest)}.card-category{color:var(--dimmest);text-transform:uppercase;letter-spacing:.1em;margin-top:8px;font-size:9px}#contact{justify-content:center;align-items:center;min-height:100vh;margin:15rem 0;display:flex}.contactContainer{background-color:var(--dimmer);color:var(--brightest);border-color:#472700;border-radius:10px;width:100%;max-width:23rem;padding-bottom:1%;box-shadow:.2rem .2rem 1rem #000}#contactForm{place-items:center;gap:1rem;margin:0 1.5rem;padding-top:2rem;display:grid}#contact h1{font-family:var(--header-font);text-align:center;color:#fff;padding-top:15px;font-weight:400}#contact label{font-family:var(--nav-font)}#contact input{background-color:#fff;border-radius:10px;width:60%;padding:16px;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:.9rem;display:block}#contact textarea{resize:vertical;border-radius:10px;width:100%;max-height:200px;margin-bottom:10px;padding:2%;font-family:Verdana,Geneva,Tahoma,sans-serif;font-size:.85rem;display:block}#contact input:focus,#contact textarea:focus{border:2px solid var(--dimmest);box-shadow:.2rem .2rem .8rem color-mix(in srgb, var(--brightest) 30%, transparent);outline:#000}#contact button{background-color:var(--dimmest);background-image:linear-gradient(45deg, var(--brightest) 50%, transparent 50%);border-color:var(--brightest);border:2px solid var(--bright);color:var(--brightest);background-position:100% 0;background-repeat:no-repeat;background-size:400% 100%;margin-bottom:10px;padding:10px 18px;font-size:1rem;transition:background-position .5s ease-in-out,color .5s;display:flex}#contact button:hover{cursor:pointer;color:#000;background-position:0 0}section{opacity:0;transition:opacity .6s ease-out,transform .6s ease-out;transform:translateY(20px)}section:first-of-type,section:last-of-type{opacity:1;transform:none}section.visible{opacity:1}@media (width<=1500px){#home{padding:0 1rem 25vh}}@media (width<=768px){.descContainer,.hero-portrait-wrap{bottom:auto}.homeLabels{display:none}.hamburger{display:block}.navbar li{display:none}#proficiencies{padding:0}.prof-card{width:95%;max-width:20rem;margin:auto}.prof-grid{grid-template-columns:1fr}.prof-section{box-sizing:border-box;width:100%;max-width:100%;padding:0 .5rem}.sidebar li{text-align:left;flex-direction:column;margin-bottom:1.5rem;padding:0;display:flex}.sidebar a{color:var(--dimmest);font-weight:600}.imageContainer{box-sizing:border-box;width:100%;max-width:21rem}.contactContainer,.profTable{box-sizing:border-box;width:100%;max-width:20rem}footer{box-sizing:border-box;width:100%;max-width:18rem}}@media (width<=450px){.homeName{font-size:1.5rem}#viewWork{font-size:.7rem}.socialswrap{gap:.75rem}.socialswrap img{width:2rem;height:2rem}.work-grid{gap:2rem}}.errorBox{background-color:var(--dimmest);max-width:600px;height:250px;font-family:var(--header-font);color:var(--brightest);text-align:center;border-radius:1rem;flex-direction:column;justify-content:center;padding:2%;font-weight:500;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.header{font-size:x-large}.reconnect{font-family:var(--nav-font);color:var(--dimmest);border:none;border-radius:5px;width:100px;height:50px;margin-top:2rem;margin-bottom:3vh;text-decoration:none;transition:background .3s;box-shadow:.2rem .2rem 1rem #000}.reconnect:hover{background-color:var(--mid-color);cursor:pointer;color:var(--brightest)}.reconnect a{color:var(--dimmest);text-decoration:none;list-style-type:none}@media (width<=750px){.errorBox{font-size:.75rem}.header{font-size:1rem}}