@import"https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Bai Jamjuree,sans-serif}#root{max-width:100vw;min-height:100vh;background-color:#111317}.page_description{margin:2rem 0;padding:0 2rem;font-size:1.4rem;color:#fff}.projects_grid{padding:0 2rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));gap:2rem}.project_card{width:100%;height:30rem;background-color:#21242c;border:1px solid hsl(221,16%,20%);border-radius:.8rem;overflow:hidden}.project_card:hover{background-color:#272c35}.project_thumbnail{position:relative;transition:.4s ease scale}.project_thumbnail:hover{scale:1.05}.project_thumbnail:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;background:linear-gradient(to top,#00000073,#00000026,#0000)}.project_thumbnail img{width:100%;height:12.5rem;object-fit:cover}.project_badges{margin-top:1rem;display:flex;flex-wrap:wrap;gap:1rem}.project_content{height:calc(100% - 12.5rem);padding:1rem;display:flex;flex-direction:column;justify-content:space-between}.project_actions{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.project_actions a{flex:1;padding:.6rem 4rem;text-align:center;text-decoration:none;border-radius:.4rem;transition:.4s ease background-color}.repo_btn{border:1px solid hsl(0,0%,7%);color:#fff}.repo_btn:hover{background-color:#303541}.live_btn{background-color:#272c35;color:#e0e0e0;border:1px solid hsl(220,15%,28%)}.live_btn:hover{background-color:#303541;border-color:#4c5567}.live_btn:active{background-color:#363d49}.project_content h3{max-width:100%;color:#fff;word-break:break-all}@media screen and (max-width:616px){.project_card{height:32.5rem!important}}.badge{padding:.4rem 1rem;font-size:.9rem;font-weight:600;color:#fff;border-radius:.2rem;display:flex;gap:.4rem;align-items:center}.css{background-color:#3c71dd}.html{background-color:#dd5c3c}.scss{background-color:#d7428c}.javascript{background-color:#eebd2b}.api{background-color:#34b288}.react{background-color:#30c9e8}.json{background-color:#626c84}.newbie{background-color:#39c639}.junior{background-color:#eebd2b}.intermediate{background-color:#ee8c2b}.advanced{background-color:#e23636}.popular{background-color:#eebd2b;color:#16181d}header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#fff;background:#1a1d23;padding:2rem;text-align:center}.user_area{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:2rem}.git_img_container{text-align:center}.user_area img{border-radius:50%}@media screen and (max-width:616px){header{justify-content:center}}