*{padding:0;margin:0;box-sizing:border-box;font-family:Kanit,serif}:root{--white: #FFFFFF;--white-secondary:#DDDDDD;--white-faded-1: #6E6E6E;--white-faded-2: #c0c0c0;--black: #111111;--black-fade: #212529;--black-fade-alternative: #333333;--light_blue: #6bcbff;--navbar-black: #222526c2}html{font-family:sans-serif;scroll-behavior:smooth;scroll-padding-top:70px}.NavBar{position:sticky;top:0;z-index:100}.NavBar-content{width:100%;min-height:70px;background-color:var(--navbar-black);display:flex;flex-direction:row;justify-content:space-between;align-items:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.NavBar-logo{padding-left:20px;height:50px;transition:filter .1s ease-out}.NavBar-logo:hover{filter:drop-shadow(0 0 10px var(--white))}.NavBar-items{display:flex;flex-direction:row;justify-content:space-around;align-items:center;padding:10px}.btn{text-decoration:none;margin-right:10px;padding:10px;background-color:transparent;color:var(--white);border:1px solid var(--white);border-radius:5px}.btn-glow{text-decoration:none;margin-right:10px;padding:10px;background-color:transparent;color:var(--white);border:1px solid var(--white);border-radius:5px;transition-duration:.1s}.btn-glow:hover{box-shadow:0 0 5px var(--white);text-shadow:0 0 5px var(--white)}.card-container{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;width:90vw}.card-items{background-color:var(--navbar-black);border:1px solid var(--white-faded-1);border-radius:5px;width:300px;padding:20px;text-align:left;transition:border .1s ease-out,box-shadow .1s ease-out,transform .1s ease-out;display:flex;flex-direction:column;justify-content:space-between}.card-items:hover{border:1px solid var(--white-faded-2);box-shadow:0 0 8px var(--white-faded-1);transform:translateY(-2px)}.card-items h3{font-size:1.5rem;margin-bottom:10px;color:var(--white)}.card-items p{font-size:1rem;margin-bottom:15px;color:var(--white-secondary)}.card-items ul{list-style:none;padding:0;margin-bottom:15px}.card-items ul li{margin-bottom:8px;font-size:.9rem;color:var(--white-faded-2)}.bubble-icons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px}.bubble-icons span{background-color:var(--black-fade-alternative);padding:5px 10px;border-radius:20px;font-size:.85rem;color:var(--white-faded-2)}body{background-color:var(--black)}.main{position:relative;top:0;min-height:1000px;width:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;background-color:var(--black);color:var(--white)}.hero-section{display:flex;flex-direction:column;margin-top:100px;height:90vh}.hero-section-content{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center;padding:20px 0 100px}.hero-section-img{background-repeat:no-repeat;width:480px;background-position:center;background-size:contain;margin-top:10px;user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;transition:transform .5s cubic-bezier(.37,.3,.23,.83)}.hero-section-img:hover{transform:scale(1.01) rotate(.5deg)}@media (max-width:900px){.hero-section-img{max-width:90vw;margin-top:70px}.hero-section-text span{font-size:1.7em}.profile-name{font-size:2.7em}}@media (max-width:390px){.NavBar-items{align-self:center}.NavBar-content{overflow:hidden;flex-direction:column;align-items:stretch}.NavBar-logo{align-self:center}.paragraph p{font-size:.7em}}@media (max-height:600px){.hero-section,.about-section{height:100%}}@media (max-width:620px){.hit-area,.button-wrapper{display:none}.about-section-content{width:100%}}.hero-section-text{display:flex;flex-direction:column;align-items:start;margin-left:20px}.hero-section-discription{margin-bottom:10px}span{color:silver;font-size:2em}.profile-name{color:var(--white);font-size:3em;font-weight:700;transition:letter-spacing .5s cubic-bezier(.37,.3,.23,.83)}.profile-name:hover{letter-spacing:.03em}.about-section{height:100vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (max-width:900px){.about-section{height:100%}}.about-section-content{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:10px 0;width:100%;line-height:1.5}.about-section-content .about-title{color:var(--white);font-weight:700;text-decoration:underline}.about-section-content .paragraph{color:var(--white-secondary);padding:10px 0;font-size:1.2em;max-width:80%;text-decoration:none;font-weight:350;text-align:justify;text-indent:2rem;transition:color .2s ease;letter-spacing:.01rem}strong{transition:color .2s ease}.paragraph p{margin-bottom:10px}body:has(strong:hover) .paragraph{color:var(--white-faded-1)}strong:hover{color:var(--white)}.skill-section{min-height:100vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.skill-section-content{min-height:100vh;width:90%;display:flex;flex-direction:column;justify-content:center;align-items:center}.skill-section-content span{color:var(--white);font-weight:700;text-decoration:underline}.project-section,.project-section-content{min-height:100vh;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.project-section-content #span{color:var(--white);font-weight:700;text-decoration:underline;margin-bottom:20px}.skill-container{width:90%;display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin:20px}.card{background:var(--black);border:1px solid var(--white);border-radius:6px;width:200px;padding:20px;transition:transform .3s ease,box-shadow .3s ease;max-width:calc(50% - 16px);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.card:hover{transform:translateY(-2px);box-shadow:0 2px 10px var(--white-faded-1)}.card h3{margin:0;font-size:1.5rem;color:var(--white)}.card .skill-logo{max-width:50%;-webkit-user-select:none;user-select:none;filter:drop-shadow(0 0 20px var(--white-faded-1)) saturate(100%) brightness(100%);transition:filter .1s ease-out}.card:not(:hover) .skill-logo{filter:drop-shadow(0 0 0 #000) saturate(65%) brightness(75%)}.card p{margin:10px 0;color:var(--white-faded-2)}.form-container{background-color:var(--black);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:30px 30px 10px}.form-container h1{color:var(--white);font-weight:700;display:inline-block;margin:20px 0;width:200px}form{display:flex;flex-direction:column;margin:10px;min-width:300px}@media (min-width:580px){form{min-width:300px}}@media (min-width:900px){form{min-width:800px}}.formInput{padding-top:10px;margin-top:10px;color:#fff;background:transparent;border-top:none;border-left:none;border-right:none;border-bottom:2px solid #ccc;padding-bottom:10px;outline:none;font-weight:600}.formInput:focus{border-bottom:2px solid var(--white)}.formInput::placeholder{color:var(--white-faded-2)}.formInput:focus::placeholder{color:var(--white)}.form-back-btn{display:flex;justify-content:start;width:100%}.formBtnDiv{display:flex;justify-content:end;margin-top:20px}.formBtnDiv input{min-width:60px;font-size:1.1rem;letter-spacing:.2rem}.recaptcha{margin-top:15px}footer{display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:var(--navbar-black);width:100%;bottom:0;margin-top:20px;padding-top:20px}footer .footer-content{display:flex;flex-direction:row;justify-content:space-around;padding:10px;min-width:75%}@media (max-width:900px){footer .footer-content{display:flex;flex-direction:column;align-items:center}}footer .footer-btn{padding:20px;display:flex;flex-direction:column;align-items:flex-start}footer .quote{color:var(--white-faded-2);margin:20px 0;font-size:1.2em;font-family:cursive;transition:text-shadow .1s ease-out}footer .quote:hover{text-shadow:0 0 10px var(--white)}footer .link-container{padding:10px;position:relative}footer .link-container:before{content:"";border:1px solid var(--white-faded-1);display:block;position:absolute;top:10px;bottom:10px;left:-10px}footer .link-container span{color:var(--white)}footer ul{list-style:none}footer li{padding:15px 0}footer .link-container .links{position:relative}footer .link-container a{color:var(--white);text-decoration:none}footer .link-container img{width:40px;margin-right:10px;vertical-align:middle}footer .copyright{margin:20px 0;color:var(--white-faded-1)}footer .copyright a{text-decoration:none;color:var(--white-faded-1);transition:color .1s ease-out,text-shadow .1s ease-out}footer .copyright a:hover{color:var(--light_blue);text-shadow:0 0 10px var(--white-faded-2)}.error-container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Kanit,serif}.error-main{color:var(--white);font-size:2.3rem;font-weight:900}.error-message{color:var(--white-faded-1);padding:10px;max-width:50rem;margin-bottom:10px}.success-container{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}.success-main{color:var(--white);font-size:2.3rem;font-weight:900;margin-bottom:0}.success-message{color:var(--white-faded-1);padding:10px;max-width:50rem;margin-top:0;margin-bottom:10px}@media (hover: none) and (pointer: coarse){.custom-cursor{display:none!important}}.custom-cursor{position:fixed;top:0;left:0;width:30px;height:30px;background-color:#ffffff8d;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:background-color .3s ease,transform .2s ease,opacity .2s}.hovering{background-color:#a0d7ffcc;transform:translate(-50%,-50%) scale(1.4)}.hidden{opacity:0;color:transparent}.magnet{transition:transform .3s}.hover-target{color:#00f}.cursor-hide{margin:50px;padding:10px}@keyframes appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.scrollAppear{animation:appear 2s linear;animation-timeline:view();animation-range:entry 0% COVER 45%}.scroll-progress{position:fixed;bottom:0;left:0;width:100%;height:5px;background:#ffffff0d;z-index:1000}.scroll-progress-bar{height:100%;background:linear-gradient(90deg,#ffffff1f,#fff9);width:0%;transition:width .1s ease-out;box-shadow:0 0 10px #ffffff4d}.button-wrapper{position:relative;display:inline-block}.hit-area{position:absolute;top:-70px;left:-48px;right:-48px;bottom:-70px;background:transparent;z-index:1;border-radius:80px;color:transparent}.hr-container{width:80%;max-width:600px;margin:0 auto;display:flex;justify-content:center;align-items:center;min-height:80px;position:relative}@keyframes hrAnimation{0%,to{background-position:right}50%{background-position:left}}hr{border:none;width:95%;height:2px;background:linear-gradient(to right,var(--black-fade) 0%,var(--white-secondary) 25%,var(--black-fade) 50%,var(--white-secondary) 75%,var(--black-fade) 100%);background-size:400%;animation:hrAnimation 15s ease infinite}