body{background-color:#020c1b;margin:0;overflow-x:hidden;font-family:"Noto Sans TC",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.App{text-align:center;scroll-behavior:smooth}.App,section{transition:all .1s ease}section{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;position:relative;z-index:1;padding:0 4%;content-visibility:auto}.mouse-icon{position:absolute;bottom:1%;left:49%;width:3px;padding:10px 15px;height:35px;border:2px solid #f49f1c;border-radius:25px;opacity:.75;box-sizing:content-box;z-index:1}.scrollicon{width:3px;height:10px;border-radius:25%;background-color:#f49f1c;-webkit-animation-name:scroll;animation-name:scroll;-webkit-animation-duration:2.2s;animation-duration:2.2s;-webkit-animation-timing-function:cubic-bezier(.15,.41,.69,.94);animation-timing-function:cubic-bezier(.15,.41,.69,.94);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.BackgroundText{position:absolute;top:-10%;font-weight:700!important;color:hsla(0,0%,100%,.08);text-transform:uppercase;left:5%;font-size:8em;margin:5% 0;text-align:left}.MobileView{display:none;visibility:hidden}.MobileView #overlay-button{position:fixed;right:2em;top:3em;z-index:5;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.MobileView #overlay-button span{height:4px;width:35px;border-radius:2px;background-color:#f49f1c;position:relative;display:block;transition:all .2s ease-in-out}.MobileView #overlay-button span:before{top:-10px;visibility:visible}.MobileView #overlay-button span:after{top:10px}#overlay-button span:after,.MobileView #overlay-button span:before{height:4px;width:35px;border-radius:2px;background-color:#f49f1c;position:absolute;content:"";transition:all .2s ease-in-out}#overlay-button:hover span:after,#overlay-button:hover span:before,.MobileView #overlay-button:hover span{background:#f49f1c}.MobileView input[type=checkbox]{display:none}.MobileView input[type=checkbox]:checked~#overlay{visibility:visible}.MobileView input[type=checkbox]:checked~#overlay-button:hover span,input[type=checkbox]:checked~#overlay-button span{background:transparent}.MobileView input[type=checkbox]:checked~#overlay-button span:before{transform:rotate(45deg) translate(7px,7px);opacity:1;background:#fff}.MobileView input[type=checkbox]:checked~#overlay-button span:after{transform:rotate(-45deg) translate(7px,-7px);background:#fff}.MobileView #overlay{height:100vh;width:100vw;background:#f49f1c;z-index:2;visibility:hidden;position:fixed}.MobileView #overlay.active{visibility:visible}.MobileView #overlay ul{display:flex;justify-content:center;flex-direction:column;height:100vh;list-style-type:none;padding:0;width:100vw}.MobileView #overlay ul li{padding:1em;text-align:left}.MobileView #overlay ul li a{color:#fff;text-decoration:none;width:100%;font-size:1.5em;float:left}.MobileView #overlay ul li a svg{margin-right:10%}.DefaultMenu.menu{background:transparent;position:fixed;right:0;height:100vh;z-index:9999;border-left:5px solid #f49f1c}.DefaultMenu.menu:after{content:"";display:block;position:absolute;height:15vh;width:10%;top:-50%;right:100%;background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff 75%,#fff);-webkit-animation:run 7s 0s infinite;animation:run 7s 0s infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(.4,.26,0,.97);animation-timing-function:cubic-bezier(.4,.26,0,.97)}.DefaultMenu .menu-items{position:relative;width:50px}.DefaultMenu .menu-item:hover,.sharing-menu .social-item:hover{background:#f49f1c;color:#fff}.DefaultMenu .menu-item:hover:before{content:attr(data-heading);position:absolute;left:-105px;text-align:center;display:flex;justify-content:center;vertical-align:middle;align-items:center;color:#f49f1c;width:100px;font-size:15px;text-transform:uppercase}.DefaultMenu .menu-item{color:#ededed;cursor:pointer;height:60px;display:flex;align-items:center;justify-content:center;flex:auto;transition:all .3s ease-in-out;padding-bottom:5px;font-size:20px;z-index:9999999}.DefaultMenu .menu-item svg{position:absolute}.DefaultMenu .menu-item.active{transform:scale(1.2);color:#f49f1c}.DefaultMenu .menu-item.active:hover{color:#fff}.DefaultMenu a.menu-link{color:unset;text-align:center;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.sharing-menu{background:transparent;position:fixed;left:0;height:100vh;z-index:9999;border-right:5px solid #f49f1c;top:0;display:flex;justify-content:flex-end;flex-direction:column}.sharing-menu:after{content:"";display:block;position:absolute;height:15vh;width:10%;top:-50%;right:-10%;background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff 75%,#fff);-webkit-animation:run 7s 0s infinite;animation:run 7s 0s infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(.4,.26,0,.97);animation-timing-function:cubic-bezier(.4,.26,0,.97)}.menu-item.social-item{color:#ededed;cursor:pointer;height:60px;flex:auto;transition:all .3s ease-in-out;padding-bottom:5px;font-size:20px;display:flex;justify-content:center;align-items:center;width:50px}.sharing-menu .menu-item.social-item:hover:before{content:attr(data-heading);position:absolute;left:50px;text-align:center;display:flex;justify-content:center;vertical-align:middle;align-items:center;color:#f49f1c;width:100px;font-size:15px;text-transform:uppercase}.lines{position:fixed;right:0;margin:auto;width:90vw;opacity:.5}.line,.lines{top:0;left:0;height:100%}.line{position:absolute;width:1px;background:hsla(0,0%,100%,.1);overflow:hidden}.line:after{content:"";display:block;position:absolute;height:15vh;width:100%;top:-50%;left:0;background:linear-gradient(0deg,hsla(0,0%,100%,0) 0,#f49f1c 75%,#f49f1c);-webkit-animation:reverseRun 7s 0s infinite;animation:reverseRun 7s 0s infinite;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(.4,.26,0,.97);animation-timing-function:cubic-bezier(.4,.26,0,.97)}.line:first-child{left:17%}.line:nth-child(2){left:39%}.line:nth-child(3){left:62%}.line:nth-child(4){left:84%}.App-logo{font-family:"Warnes",cursive;float:left;color:#f49f1c;font-size:20px;border:5px outset #f49f1c;height:40px;width:40px;text-align:center;line-height:40px;position:absolute;left:48%;top:0}#HomePage h1{font-size:5vw;font-family:"CoreCircus",sans-serif;line-height:1;margin:0;color:#ecf0f1;letter-spacing:.5rem;text-transform:uppercase}#HomePage h1 span:before{content:attr(data-heading);position:absolute;overflow:hidden;color:#f49f1c;z-index:5;left:auto;text-align:left;-webkit-animation:flicker 2s linear infinite;animation:flicker 2s linear infinite;border-color:#f49f1c}.positionContainer{font-weight:600;overflow:hidden;height:50px;position:relative;padding:0 20px}.positionlist{margin-top:5px;text-align:left;list-style:none;-webkit-animation-name:change;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;animation-name:change;animation-duration:10s;animation-iteration-count:infinite;padding-left:30px;color:#f49f1c}.positionlist .position{line-height:40px;margin:0}.main_help_text{font-size:15px;text-align:left;font-weight:900;letter-spacing:2.1px;text-transform:none}.help_text{float:left;margin:0;line-height:50px}#AboutMePage{justify-content:unset;display:grid;grid-gap:10px;grid-template-areas:"content picture";align-items:unset}#AboutMePage .Aboutme-content{position:relative;grid-area:content}.Aboutme-content .about-content{height:74vh;padding:10%;width:42vw;text-align:left;float:left}.Aboutme-content .about-content h2.aboutme-name{font-size:30px;letter-spacing:3px;font-weight:500;color:#f49f1c}.ButtonGroup{height:70px;line-height:70px;text-align:left}.ButtonGroup button{height:50px;width:150px;font-size:20px;background:transparent;box-shadow:unset;border:5px solid #f49f1c;color:#fff;cursor:pointer;border-radius:30px;margin-right:10px}.ButtonGroup button:focus{outline:unset}.ButtonGroup button:hover{border:5px solid #fff;color:#f49f1c}#AboutMePage .Aboutme-Picuter{position:relative;grid-area:picture;display:flex;justify-content:center;align-items:center;padding-right:6.5%}#AboutMePage #design{position:relative;width:300px;height:300px;margin-top:100px}#AboutMePage #blend>*,#AboutMePage #design>*{position:absolute;height:100%;width:100%}#AboutMePage #rotatedBorder{box-sizing:border-box;border:10px solid #f49f1c;transform:rotate(45deg)}#AboutMePage .grid{display:grid;grid:repeat(2,1fr)/repeat(2,1fr);-webkit-filter:grayscale(1);filter:grayscale(1)}#AboutMePage [data-white]{background-color:#fff}#AboutMePage #blend{mix-blend-mode:multiply}#AboutMePage img{left:0;-webkit-filter:drop-shadow(2px 4px 6px #000);filter:drop-shadow(2px 4px 6px black);-webkit-filter:grayscale(1);filter:grayscale(1)}.SkillsTag{height:70vh;width:100%;margin-top:15%;line-height:5;position:relative}.SkillsTag .SkillNames{width:50vw;float:right}.SkillsTag p.SkillName{width:auto;float:left;padding:1%;margin:1%;color:#8a2be2;text-align:center;line-height:normal;font-size:40px;font-weight:bolder}.SkillsTag img{height:100%;width:auto;-webkit-filter:grayscale(1);filter:grayscale(1)}.SkillsTag img:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.experienceTag{width:100%;float:left}.experience{width:47%;float:left;height:120px;margin:15px;border:3px double #f49f1b}.experienceImage{width:20%;height:92%;float:left;padding:5px}.experienceImage img{height:100%}.experienceDescription{width:78%;float:right;text-align:left;position:relative;height:100%}.experienceDescription h2{font-size:25px;letter-spacing:2px;font-weight:500;color:#f49f1c;margin:0}.experienceDescription small{position:absolute;bottom:5px}.experienceDescription small.date{left:0;color:#dcdcdc}.experienceDescription small.description{right:20px;color:#f49f1c;border-bottom:1px solid #f49f1c;cursor:pointer}.descriptionView.hide{display:none;visibility:hidden}.descriptionView{position:fixed;top:10%;left:5%;background-color:#020c1b;width:87vw;height:80vh;z-index:999;border:5px solid #f49f1c;border-radius:20px;padding:15px}.descriptionView h2{border-bottom:5px solid #f49f1c;text-align:center;padding-bottom:10px}.descriptionView .ButtonGroup{position:absolute;bottom:0;right:0}.portfolioTag{width:100%;height:75vh;margin-top:25vh}.portfolio_labels a{margin:15px;font-size:20px;text-decoration:none;color:#fff}.portfolio_labels a.active{color:#f49f1c}.portfolio{width:47%;float:left;height:120px;margin:15px;border:3px double #f49f1b}.portfolioImage{width:20%;height:92%;float:left;padding:5px}.portfolioImage img{height:100%}.portfolioDescription{width:78%;float:right;text-align:left;position:relative;height:100%}.portfolioDescription h2{font-size:25px;letter-spacing:2px;font-weight:500;color:#f49f1c;margin:0}.portfolioDescription small{position:absolute;bottom:5px}.portfolioDescription small.platform{right:20px}.portfolioDescription small.platform a{font-size:15px;color:#f49f1c;right:20px}.portfolioDescription small.description{color:#fff;border-bottom:1px solid #fff;cursor:pointer}.certificatesTag{width:100%;float:left}.certificate{width:47%;float:left;height:120px;margin:15px;border:3px double #f49f1b}.certificateImage{width:20%;height:92%;float:left;padding:5px}.certificateImage img{height:100%}.certificateDescription{width:78%;float:right;text-align:left;position:relative;height:100%}.certificateDescription h2{font-size:25px;letter-spacing:2px;font-weight:500;color:#f49f1c;margin:0}.certificateDescription small{position:absolute;bottom:5px}.certificateDescription small.platform{font-size:15px}.certificateDescription small.date{right:20px;color:#dcdcdc}.contactMeTag{width:100%;height:100%;margin-top:5%}.contactMeForm{width:50%;height:100%;float:left;padding:5%}.contactMeData{width:35%;height:100%;float:right;margin-top:5%;margin-right:5%}.contactMeForm form{text-align:left}.form-group input,.form-group label,.form-group textarea{width:80%;float:left}.form-group label{font-size:12px}.form-group input,.form-group textarea{padding:10px;color:#f49f1c;margin:5px 0 10px;background:transparent;border-radius:20px;border:5px solid #f49f1c}.form-group input:focus,.form-group textarea:focus{border-radius:20px!important;outline:unset;border:3px solid #f49f1c}.contactMeData .title{font-size:30px;letter-spacing:3px;font-weight:500;color:#f49f1c;margin:0}.contactMeData p{margin-top:0}@media (min-width:768px) and (max-width:1024px){.App-logo{left:3.5%}.mouse-icon{left:45.5%}.MobileView{display:block;visibility:visible}.DefaultMenu,.sharing-menu{display:none;visibility:hidden}.BackgroundText{top:0;font-size:10vw}#AboutMePage{grid-template-areas:"picture content"}#AboutMePage .Aboutme-content{grid-row-start:2;grid-column-start:1;grid-column-end:3;grid-row-end:2}#AboutMePage .Aboutme-Picuter{grid-row-start:1;grid-column-start:1;grid-column-end:3;grid-row-end:1;padding:unset}#AboutMePage #design{position:relative;width:200px;height:200px}.Aboutme-content .about-content{width:auto;padding:unset;height:auto}.SkillsTag img{display:none}.SkillsTag .SkillNames{float:left;width:100%}.SkillsTag p.SkillName{font-size:7vw}.contactMeForm{width:86vw;margin-top:5%}.contactMeData{width:86vw;float:left;margin-top:15%}.certificatesTag,.experienceTag,.portfolioTag{margin-top:15%}.certificate,.experience,.portfolio{width:90%;height:95px}.certificateImage img,.experienceImage img,.portfolioImage img{height:100%;width:100%}.certificateDescription,.experienceDescription,.portfolioDescription{width:75%}.certificateDescription h2,.experienceDescription h2,.portfolioDescription h2{font-size:20px}}@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){.App-logo{left:3.5%}.mouse-icon{left:45.5%}.MobileView{display:block;visibility:visible}.DefaultMenu,.sharing-menu{display:none;visibility:hidden}.BackgroundText{top:0;font-size:10vw}#AboutMePage{grid-template-areas:"picture content"}#AboutMePage .Aboutme-content{grid-row-start:2;grid-column-start:1;grid-column-end:3;grid-row-end:2}#AboutMePage .Aboutme-Picuter{grid-row-start:1;grid-column-start:1;grid-column-end:3;grid-row-end:1;padding:unset}#AboutMePage #design{position:relative;width:200px;height:200px}.Aboutme-content .about-content{width:auto;padding:unset;height:auto}.SkillsTag img{display:none}.SkillsTag .SkillNames{float:left;width:100%}.SkillsTag p.SkillName{font-size:7vw}.contactMeForm{width:86vw;margin-top:5%}.contactMeData{width:86vw;float:left;margin-top:15%}.certificatesTag,.experienceTag,.portfolioTag{margin-top:15%}.certificate,.experience,.portfolio{width:90%;height:95px}.certificateImage img,.experienceImage img,.portfolioImage img{height:100%;width:100%}.certificateDescription,.experienceDescription,.portfolioDescription{width:75%}.certificateDescription h2,.experienceDescription h2,.portfolioDescription h2{font-size:20px}}@media (min-width:481px) and (max-width:767px){.App-logo{left:3.5%}.mouse-icon{left:45.5%}.MobileView{display:block;visibility:visible}.DefaultMenu,.sharing-menu{display:none;visibility:hidden}.BackgroundText{top:0;font-size:10vw}#AboutMePage{grid-template-areas:"picture content"}#AboutMePage .Aboutme-content{grid-row-start:2;grid-column-start:1;grid-column-end:3;grid-row-end:2}#AboutMePage .Aboutme-Picuter{grid-row-start:1;grid-column-start:1;grid-column-end:3;grid-row-end:1;padding:unset}#AboutMePage #design{position:relative;width:200px;height:200px}.Aboutme-content .about-content{width:auto;padding:unset;height:auto}.SkillsTag img{display:none}.SkillsTag .SkillNames{float:left;width:100%}.SkillsTag p.SkillName{font-size:7vw}.contactMeForm{width:86vw;margin-top:5%}.contactMeData{width:86vw;float:left;margin-top:15%}.certificatesTag,.experienceTag,.portfolioTag{margin-top:15%}.certificate,.experience,.portfolio{width:90%;height:95px}.certificateImage img,.experienceImage img,.portfolioImage img{height:100%;width:100%}.certificateDescription,.experienceDescription,.portfolioDescription{width:75%}.certificateDescription h2,.experienceDescription h2,.portfolioDescription h2{font-size:20px}}@media (min-width:320px) and (max-width:480px){.App-logo{left:3.5%}.mouse-icon{left:45.5%}.MobileView{display:block;visibility:visible}.DefaultMenu,.sharing-menu{display:none;visibility:hidden}.BackgroundText{top:0;font-size:10vw}#AboutMePage{grid-template-areas:"picture content"}#AboutMePage .Aboutme-content{grid-row-start:2;grid-column-start:1;grid-column-end:3;grid-row-end:2}#AboutMePage .Aboutme-Picuter{grid-row-start:1;grid-column-start:1;grid-column-end:3;grid-row-end:1;padding:unset}#AboutMePage #design{position:relative;width:200px;height:200px}.Aboutme-content .about-content{width:auto;padding:unset;height:auto}.SkillsTag img{display:none}.SkillsTag .SkillNames{float:left;width:100%}.SkillsTag p.SkillName{font-size:7vw}.contactMeForm{width:86vw;margin-top:5%}.contactMeData{width:86vw;float:left;margin-top:15%}.certificatesTag,.experienceTag,.portfolioTag{margin-top:15%}.certificate,.experience,.portfolio{width:90%;height:95px}.certificateImage img,.experienceImage img,.portfolioImage img{height:100%;width:100%}.certificateDescription,.experienceDescription,.portfolioDescription{width:75%}.certificateDescription h2,.experienceDescription h2,.portfolioDescription h2{font-size:20px}}@-webkit-keyframes scroll{0%{opacity:0}10%{transform:translateY(0);opacity:1}to{transform:translateY(15px);opacity:0}}@keyframes scroll{0%{opacity:0}10%{transform:translateY(0);opacity:1}to{transform:translateY(15px);opacity:0}}@-webkit-keyframes opacity{0%,to{opacity:0}50%{opacity:1}}@keyframes opacity{0%,to{opacity:0}50%{opacity:1}}@-webkit-keyframes change{0%,12.66%,to{transform:translateZ(0)}16.66%,29.32%{transform:translate3d(0,-25%,0)}33.32%,45.98%{transform:translate3d(0,-50%,0)}49.98%,62.64%{transform:translate3d(0,-75%,0)}66.64%,79.3%{transform:translate3d(0,-50%,0)}83.3%,95.96%{transform:translate3d(0,-25%,0)}}@keyframes change{0%,12.66%,to{transform:translateZ(0)}16.66%,29.32%{transform:translate3d(0,-25%,0)}33.32%,45.98%{transform:translate3d(0,-50%,0)}49.98%,62.64%{transform:translate3d(0,-75%,0)}66.64%,79.3%{transform:translate3d(0,-50%,0)}83.3%,95.96%{transform:translate3d(0,-25%,0)}}@-webkit-keyframes flicker{0%,19.999%,22%,62.999%,64%,64.999%,70%,to{opacity:.99;text-shadow:0 0 3px #f49f1c}20%,21.999%,63%,63.999%,65%,69.999%{opacity:.4;text-shadow:none}}@keyframes flicker{0%,19.999%,22%,62.999%,64%,64.999%,70%,to{opacity:.99;text-shadow:0 0 3px #f49f1c}20%,21.999%,63%,63.999%,65%,69.999%{opacity:.4;text-shadow:none}}@-webkit-keyframes run{0%{top:-50%}to{top:100%}}@keyframes run{0%{top:-50%}to{top:100%}}@-webkit-keyframes reverseRun{0%{top:100%}to{top:-50%}}@keyframes reverseRun{0%{top:100%}to{top:-50%}}body::-webkit-scrollbar{width:0}
/*# sourceMappingURL=main.244df7d4.chunk.css.map */