@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100..900&display=swap";:root{font-family:Noto Sans Thai,sans-serif;--profile-size: 196px}::selection{background-color:#ff8;color:#111}::-moz-selection{background-color:#ff8;color:#111}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#b3b3b3;border-radius:6px}::-webkit-scrollbar-thumb:hover{background-color:gray}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}html{overflow-y:overlay;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff30 #1b1b1b;scroll-behavior:smooth}body{max-width:100vw;max-height:100vh;margin:0;display:flex;flex-direction:column;color:#fff;font-family:Noto Sans Thai,sans-serif}h1{font-size:4em;font-weight:1000;line-height:1em;text-align:center;margin:0 .5em;padding:1em 0 2em}h3{margin:0;padding:0;font-size:1.4em;font-weight:800}h4{margin:0;padding:0;font-size:1em;font-weight:300}.logo{font-weight:1000;-webkit-user-select:none;user-select:none;cursor:pointer;padding:0 16px;color:#ffffff8b;text-decoration:none;transition:all .15s ease-out}.logo:hover{color:#fff}nav{display:flex;justify-content:space-between;align-items:center;background-color:#00000015;color:#fff;position:fixed;top:0;left:0;width:100%;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:#00000010 0 12px 12px;z-index:1000;transition:background-color .2s ease-in-out}nav:hover{background-color:#00000040}.nav-container{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;box-sizing:border-box}.nav-links{color:#ffffffac;text-decoration:none;font-weight:300;position:relative;border-bottom:0 solid transparent;transition:all .15s ease-out}.nav-links:hover{color:#fff;font-weight:800}.nav-links:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background-color:#fff;transform:scaleX(0);transition:transform .15s ease-out}.nav-links:hover:after{transform:scaleX(1)}.nav-links-container{display:flex;align-items:center}.nav-buttons{text-align:center;width:96px}.clock-body{min-height:100vh;max-height:100vh;display:flex;justify-content:center;align-content:center;padding:4em}.clock-container{flex-direction:row;justify-content:center;align-items:center;gap:2em;flex-wrap:wrap;display:flex}.clock-countdown{display:flex;flex-direction:column;justify-content:center;align-items:center}.clock-form{overflow:hidden;display:flex;flex-direction:column;width:min-content;padding:2em;margin:0 auto;border-radius:24px}.time-group{display:flex;align-items:center;gap:.2em;margin-bottom:1.5em}.time-label{font-size:1em;font-weight:400;white-space:nowrap;-ms-user-select:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}.time-colon{font-size:2em}.time-input{color:#fff;font-size:3em;font-weight:700;width:100%;overflow:hidden;text-align:center;margin:none;background:transparent;border:none;border-bottom:1px solid #ffffff59;transition:box-shadow .15s ease-out,border-color .15s ease-out}.time-input:focus{outline:none;border-bottom-color:#fff;box-shadow:0 2px #fff}.inclock-foreign-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}.inclock-top,.inclock-bottom{width:100%;display:flex;flex-direction:column;align-items:center}.inclock-top{height:65%}.inclock-bottom{height:35%;display:flex;justify-content:center;flex-direction:row;gap:10px}.inclock-time{font-size:5em;font-weight:1000;margin:0;padding:2em 0 0}.inclock-current-phase{font-size:1.2em;font-weight:600}.btn-start,.btn-stop,.btn-reset{color:#fff;padding:8px 16px;border-radius:8px;border:none;cursor:pointer}.btn-start{background:transparent;margin-bottom:64px;transition:background-color .15s ease-out}.btn-stop{background:#eab308}.btn-reset{background:#ef4444}.btn-start:hover{background-color:#00000023}.btn-stop:hover{background-color:#ca8a04}.btn-reset:hover{background-color:#b91c1c}.contact-body{background-color:#1b1b1b;min-height:100vh;padding:80px 64px 20px}.contact-header{animation:fadeIn .8s ease-out forwards}.contact-card-container{display:flex;justify-content:center;align-items:stretch;gap:4em;flex-wrap:wrap}.contact-card{border:#ffffff30 2px solid;border-radius:2em;min-width:360px;max-width:480px;flex:1;margin-bottom:4em;padding:0 2em;display:flex;flex-direction:column;align-items:center;text-align:center;box-sizing:border-box;translate:0 32px;opacity:0;box-shadow:#0005 0 12px 12px;transition:background-color 50ms ease-out;animation:fadeIn .8s ease-out forwards}.contact-card:hover{background-color:#ffffff10}.contact-card:nth-child(1){animation-delay:.3s}.contact-card:nth-child(2){animation-delay:.6s}.contact-card-content{translate:0 calc(var(--profile-size) / -2)}.contact-card-text{opacity:.9;transition:opacity 50ms ease-out}.contact-card:hover .contact-card-text{opacity:1}.contact-card-links{display:flex;justify-content:space-between;gap:1em;margin-top:1em}.profile{border-radius:50%;max-width:196px;margin-bottom:1em;-webkit-user-select:none;user-select:none;filter:saturate(.85) brightness(.7) contrast(1.5);border:#888 solid 2px;box-shadow:#0003 0 8px 8px;transition:filter 50ms ease-out,border 50ms ease-out}.contact-card:hover .profile{filter:saturate(1) brightness(1) contrast(1);border:#ddd solid 2px}.contact-card-paragraph{color:#bbb;font-weight:300;margin-bottom:2em}.email,.github,.discord{border-radius:12px;border:none;width:100%;display:flex;justify-content:center;align-items:center;cursor:pointer;text-decoration:none;gap:.5em;transition:translate .15s ease-out,box-shadow .15s ease-out}.email{color:#000;background:#fff}.github{color:#fff;background:#000}.discord{color:#fff;background:#5865f2}.email:hover,.github:hover,.discord:hover{translate:0 -4px;box-shadow:#0003 0 4px 4px}.email:hover .links-icon,.github:hover .links-icon,.discord:hover .links-icon{animation:shake .5s ease-out forwards}.button{font-weight:500}.copied{color:#000;background:#fff;padding:8px 16px;border-radius:8px;position:fixed;bottom:12px;left:24px;z-index:999;opacity:0;-webkit-user-select:none;user-select:none;transition:opacity .3s ease-out,translate .3s ease-out,box-shadow .3s ease-out}.copied.show{opacity:1;translate:0 -12px;box-shadow:#00000015 0 4px 4px}@media (max-width: 1000px){.contact-card-container,.contact-card-links,.clock-container{flex-wrap:wrap}.contact-body{padding:80px 32px 20px}.clock-body{padding:4em}}@media (max-width: 425px){.contact-card-container,.contact-card-links,.clock-container{flex-wrap:wrap}.contact-body,.clock-body{padding:80px 24px 20px}.contact-header{font-size:3em;margin:0 .5em;padding:1em 0 2em}}@keyframes fadeIn{0%{opacity:0;transform:translateY(32px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes shake{0%{transform:rotate(0)}10%{transform:rotate(25deg)}30%{transform:rotate(-12deg)}50%{transform:rotate(8deg)}70%{transform:rotate(-3deg)}to{transform:rotate(0)}}