@import url("https://fonts.googleapis.com/css2?family=Kodchasan:wght@400;700&family=Roboto&display=swap");@font-face{font-family:Bahnschrift;src:url(/static/font/bahnschrift.ttf)}html{--primary:#5cb0c8;--secondary:#6ed2ef;--background:#fff;--text:#708090;--theme-transition:ease-in-out .3s}html.dark{--primary:#5cb0c8;--secondary:#6ed2ef;--background:#39434d;--text:#708090}*,:after,:before{box-sizing:border-box;padding:0;margin:0;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:none}body{font-family:Kodchasan,sans-serif;font-size:20px;font-weight:lighter;background:var(--background);color:var(--text);position:relative;scroll-behavior:smooth;transition:background-color var(--theme-transition)}html.dark body{color:var(--primary)}.landing-title,h1,h2,h3,h4,h5,h6{font-family:Roboto,sans-serif}h2{font-size:100px}ol,ul{list-style:none}a{text-decoration:none;color:inherit}input::-moz-placeholder,textarea::-moz-placeholder{color:inherit;background:inherit;font:inherit;border:none}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:inherit;background:inherit;font:inherit;border:none}input,input::placeholder,textarea,textarea::placeholder{color:inherit;background:inherit;font:inherit;border:none}html.dark input::-moz-placeholder,html.dark textarea::-moz-placeholder{color:var(--text)}html.dark input:-ms-input-placeholder,html.dark textarea:-ms-input-placeholder{color:var(--text)}html.dark input,html.dark input::placeholder,html.dark textarea,html.dark textarea::placeholder{color:var(--text)}input:focus,textarea:focus{outline:none}fieldset{border:none}main{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden}.bold{font-weight:700}.full-screen{min-height:100vh;min-height:calc(var(--vh, 1vh) * 100)}@media screen and (max-width:570px){body{font-size:15px}h2{font-size:16vw}}@media screen and (max-width:340px){body{font-size:13px}h2{font-size:12vw}}#cursor{width:40px;height:40px;border-radius:100px;border:2px solid var(--primary);position:fixed;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:9999}html.dark #cursor{border-color:var(--secondary)}#cursor:after{content:"";background:none}#cursor.none:after{content:"";width:2px;height:2px;background:var(--text)}#cursor.landing:after{content:"👋"}#cursor.about:after{content:"🤔"}#cursor.skills:after{content:"💪"}#cursor.portfolio:after{content:"👷"}#cursor.contact:after{content:"📝"}#theme{position:fixed;top:25px;right:25px;transition:all .3s ease-in-out;font-size:30px;text-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}#theme:hover{transform:scale(1.8);text-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.sections{width:100%}.sections,section{display:flex;flex-direction:column;align-items:center;justify-content:center}@-webkit-keyframes spinning{0%{transform:rotate(0deg)}65%{transform:rotate(0deg)}75%{transform:rotate(-35deg)}85%{transform:rotate(380deg)}90%{transform:rotate(350deg)}95%{transform:rotate(365deg)}to{transform:rotate(1turn)}}@keyframes spinning{0%{transform:rotate(0deg)}65%{transform:rotate(0deg)}75%{transform:rotate(-35deg)}85%{transform:rotate(380deg)}90%{transform:rotate(350deg)}95%{transform:rotate(365deg)}to{transform:rotate(1turn)}}.spinning{-webkit-animation:spinning 5s ease-in-out infinite;animation:spinning 5s ease-in-out infinite;display:inline-block}#landing{padding:25px;width:100%;position:relative}.landing-title{font-size:150px;color:var(--primary);position:relative;text-align:center}.landing-title:after{content:"";width:100%;height:100%;background:var(--background);position:absolute;right:0;top:0;transition:width 1.5s ease-in-out,background-color var(--theme-transition)}.landing-title.loaded:after{width:0}#scroll{width:50px;height:50px;border:3px solid var(--primary);border-radius:50%;position:absolute;bottom:50px;display:flex;align-items:center;justify-content:center;z-index:99}#scroll:after,#scroll:before{content:"";width:20px;height:3px;background:var(--primary);position:absolute;transform-origin:center}#scroll:before{transform:rotate(45deg);left:6px}#scroll:after{transform:rotate(-45deg);right:6px}@media screen and (max-width:400px){.landing-title{font-size:35vw}}#about{padding:50px 25px;margin:0 25px;border-radius:25px;background:var(--secondary);color:var(--background);width:100%;transition:background-color .3s ease-in-out,color .3s ease-in-out}html.dark #about{background:var(--primary)}#about p{margin:10px 0}#about a{font-weight:700;position:relative}#about a:after{content:"";height:2px;position:absolute;bottom:0;right:0;width:0;background:var(--background);transition:width .3s ease-in-out}#about a:hover:after{width:100%}#portfolio{padding:25px;width:100%;margin-top:500px}.projects{margin-top:50px;width:100%;max-width:1300px;justify-content:space-around}.project,.projects{display:flex;align-items:center}.project{padding:25px;max-width:300px;background:var(--primary);color:var(--background);border-radius:15px;flex-direction:column;justify-content:center;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);position:relative}.project img{width:100%;height:auto}.details{padding:35px;width:100%;height:100%;background:rgba(0,0,0,.85);border-radius:15px;position:absolute;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;transition:all .3s ease-in-out;z-index:9}.details li:before{content:"- "}html.dark .details{background:hsla(0,0%,100%,.9)}.project:hover .details{opacity:1;visibility:visible}.links{display:flex;flex-direction:column;justify-content:flex-start}.links a{position:relative;align-self:flex-start}.links a,.links span{margin-top:25px}.links a:after{content:"";width:0;height:2px;background:var(--secondary);position:absolute;bottom:0;left:0;transition:width .3s ease-in-out}.links a:hover:after{width:100%}@media screen and (max-width:1100px){.projects{flex-direction:column}.project{margin-bottom:50px}}#contact{width:100%;margin-top:500px;padding:25px}.contact-links{margin-top:20px;width:100%;max-width:300px;display:flex;justify-content:space-around;position:relative}.contact-links>a{padding:5px;display:flex;justify-content:center}#telephone{padding:5px 10px;position:absolute;top:100%;border-radius:10px;background:var(--background);box-shadow:0 3px 6px rgb(0 0 0/16%),0 3px 6px rgb(0 0 0/23%);opacity:0;visibility:hidden;transition:all .3s ease-in-out}#telephone:hover,.contact-links>a:hover+#telephone{opacity:1;visibility:visible}form{width:100%;max-width:700px}input,textarea{width:100%;padding:5px 0;border-bottom:2px solid var(--text);transition:border .3s ease-in-out}input:focus,textarea:focus{border-color:var(--secondary)}label{font-weight:700}.field{margin-top:35px;width:100%;display:flex;flex-direction:column;align-items:flex-start}.send-message{margin-top:30px;display:inline-flex;justify-content:flex-start}#send,.send-message{position:relative;align-items:center}#send{padding:10px 20px;width:200px;border:1px solid var(--secondary);background:var(--secondary);color:var(--background);border-radius:5px;display:flex;justify-content:center;transition:all .3s ease-in-out}#send:hover{background:var(--background);color:var(--secondary)}#send.loading{pointer-events:none}#send:after{content:"⌛";width:100%;height:100%;opacity:0;background:rgba(0,0,0,.7);position:absolute;transition:all .3s ease-in-out}#send.loading:after{-webkit-animation:loading 2s ease-in-out infinite;animation:loading 2s ease-in-out infinite;opacity:1}#loading{position:absolute;width:100%;height:100%;border-radius:5px;border:1px solid var(--secondary);background:var(--background);opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:all .2s ease-in-out}#loading.loading{pointer-events:all;opacity:1}#loading.loading>span{-webkit-animation:loading 2s ease-in-out infinite;animation:loading 2s ease-in-out infinite}.message-sent{margin-top:20px;justify-self:flex-start;transition:all .3s ease-in-out}.message-sent.hide{opacity:0;visibility:hidden}@-webkit-keyframes loading{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@keyframes loading{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}to{transform:rotate(1turn)}}@media screen and (max-width:400px){#send{width:100%}}@media screen and (max-width:350px){.contact-links img{width:25px;height:25px}}