@import"https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap";*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:Roboto,sans-serif;min-height:100vh;scroll-behavior:smooth;overflow-x:hidden}.bg{position:absolute;width:100%;height:100vh;overflow:hidden}.bg__bubbles{position:relative;display:flex}.bg span{position:relative;width:30px;height:30px;margin:0 4px;border-radius:40% 60% 40% 60%/64% 33% 67% 36%;box-shadow:0 0 0 10px rgba(18,0,26,.267),0 0 50px #12001a,0 0 100px #12001a;animation:animate 15s linear infinite;animation-duration:calc(150s/var(--i))}.bg span:nth-child(2n){box-shadow:0 0 0 10px hsla(0,0%,100%,.267),0 0 50px #fff,0 0 100px #fff}@keyframes animate{0%{transform:translateY(-10vh) scale(0)}to{transform:translateY(100vh) scale(1)}}@media(max-width:530px){.bg span{height:.5px}}.bg2 .lines2{background-color:#12001a;left:0;right:0;bottom:0}.bg2 .lines2,.bg2 .lines2 .line2{min-height:100vh;position:absolute;top:0}.bg2 .lines2 .line2{width:3px;left:50%;background:hsla(0,0%,100%,.2);overflow:hidden}.bg2 .lines2 .line2:after{content:"";display:block;position:absolute;min-height:15vh;width:100%;top:-50%;left:0;background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#90749c 75%,#90749c);animation:drop 5s infinite;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.25,.55,.55,.55)}.bg2 .lines2 .line2:first-child{margin-left:-25%}.bg2 .lines2 .line2:first-child:after{animation-delay:2s}.bg2 .lines2 .line2:nth-child(3){margin-left:25%}.bg2 .lines2 .line2:nth-child(3):after{animation-delay:2.5s}@keyframes drop{0%{top:-50%}to{top:110%}}.bg3 .lines3{background-color:#5c4964;left:0;right:0;bottom:0}.bg3 .lines3,.bg3 .lines3 .line3{min-height:100vh;position:absolute;top:0}.bg3 .lines3 .line3{width:3px;left:50%;background:hsla(0,0%,100%,.2);overflow:hidden}.bg3 .lines3 .line3:after{content:"";display:block;position:absolute;min-height:15vh;width:100%;top:-50%;left:0;background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#12001a 75%,#12001a);animation:drop2 5s infinite;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.55,.55,.55,.25)}.bg3 .lines3 .line3:first-child{margin-left:-25%}.bg3 .lines3 .line3:first-child:after{animation-delay:2s}.bg3 .lines3 .line3:nth-child(3){margin-left:25%}.bg3 .lines3 .line3:nth-child(3):after{animation-delay:2.5s}@keyframes drop2{0%{top:110%}to{top:-50%}}.bg4{position:absolute;width:100%;height:100vh;overflow:hidden}.bg4__bubbles{position:relative;display:flex}.bg4 span{position:relative;width:30px;height:30px;margin:0 4px;border-radius:40% 60% 40% 60%/64% 33% 67% 36%;box-shadow:0 0 0 10px rgba(92,73,100,.267),0 0 50px #5c4964,0 0 100px #5c4964;animation:animate2 15s linear infinite;animation-duration:calc(150s/var(--i))}.bg4 span:nth-child(2n){box-shadow:0 0 0 10px hsla(0,0%,100%,.267),0 0 50px #fff,0 0 100px #fff}@keyframes animate2{0%{transform:translateY(100vh) scale(0)}to{transform:translateY(-10vh) scale(1)}}@media(max-width:530px){.bg4 span{height:.5px}}.navBar{width:100%;position:fixed;background-color:transparent;z-index:10000;color:#f5f5f5;font-weight:700;transition:background-color .75s}.navBar__flex{display:flex;justify-content:space-around;align-items:center}.navBar__nav{width:40%}.navBar ul{display:flex;flex-direction:row;justify-content:space-between;list-style-type:none}.navBar ul li{cursor:pointer}.navBar.active{background-color:rgba(0,0,0,.588);transition:background-color .75s}@media(max-width:760px){.navBar{display:none}}.slick-dots li button:before{color:#90749c!important;font-size:10px!important}.slick-dots li.slick-active button:before{color:#90749c!important}.intro{background-color:#5c4964}.intro__content{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:50px;align-items:center;text-align:center;color:#12001a;z-index:1}.intro__title{font-size:3em;color:#f5f5f5}.intro__subtitle{font-size:1.5em;color:#f5f5f5}.intro__btn{align-items:center;background-color:#12001a;border:2px solid #12001a;color:#fff;cursor:pointer;font-size:1em;font-weight:700;height:48px;justify-content:center;letter-spacing:-.8px;line-height:24px;min-width:140px;outline:0;padding:0 17px;text-align:center;text-decoration:none;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;font-family:sans-serif;text-transform:uppercase}.intro__btn:hover{background-color:rgba(18,0,26,.58);border-color:rgba(18,0,26,.58);fill:#12001a}.intro__btn:active{background-color:#12001a;border-color:#12001a;fill:#12001a}@media(min-width:768px){.intro__btn{min-width:170px}}.about,.about__content{min-height:100vh;position:relative}.about__content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#90749c;z-index:1}.about__title{font-size:2.5em;background-color:#12001a}.about__description{width:70%;margin-top:50px;font-size:1.5em;text-align:start;background-color:#12001a}@media(max-width:760px){.about{padding:60px 0}}@media(max-width:530px){.about__description{font-size:1.2em}}.myProjects,.myProjects__content{min-height:100vh;position:relative}.myProjects__content{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:70px;color:#f5f5f5;z-index:1}.myProjects__title{position:relative;font-size:2.5em;background-color:#5c4964;color:#f5f5f5}.myProjects__cards--flex{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;gap:50px}.myProjects__cards{gap:20px;width:500px;padding:10px 0 30px;background-color:#12001a}.myProjects h3{margin-bottom:10px;text-align:center}.myProjects h3 a{text-decoration:none;color:#f5f5f5}.myProjects__img{width:100%;object-fit:cover;object-position:top;transition:object-position 2s ease}.myProjects__img:hover{object-position:bottom}.myProjects__description{padding:0 40px;font-size:.9em;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:left;line-height:25px;height:200px;width:100%}.myProjects__DescriptionBtn{margin-top:5px;align-items:center;background-color:#12001a;border:2px solid #12001a;color:#fff;cursor:pointer;font-size:1em;font-weight:700;height:48px;justify-content:center;letter-spacing:-.8px;line-height:24px;min-width:140px;outline:0;padding:0 17px;text-align:center;text-decoration:none;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;font-family:sans-serif;text-transform:uppercase}.myProjects__DescriptionBtn:hover{background-color:rgba(18,0,26,.58);border-color:rgba(18,0,26,.58);fill:#12001a}.myProjects__DescriptionBtn:active{background-color:#12001a;border-color:#12001a;fill:#12001a}@media(max-width:760px){.myProjects{padding:60px 0}}@media(max-width:530px){.myProjects__cards{width:300px}.myProjects__description{padding:0 20px;width:300px;font-size:.8em;line-height:normal}.myProjects__DescriptionBtn{width:300px;height:70px}}.contact{background-color:#12001a}.contact__content{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:50px;align-items:center;text-align:center;color:#12001a;z-index:100}.contact__title{font-size:2.5em;color:#f5f5f5}.contact__subtitle{font-size:1.5em;color:#f5f5f5}.contact__mail{font-size:2em;padding:5px;text-decoration:none;color:#90749c;font-weight:700;position:relative;transition:color .5s ease;cursor:pointer}.contact__mail:hover{color:#fff}.contact__mail:before{content:"";position:absolute;right:0;top:0;height:100%;background:#5c4964;transition:max-width .5s ease;width:100%;max-width:0;z-index:-1}.contact__mail:hover:before{max-width:100%;right:unset;left:0}.contact__links--flex{width:500px;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.contact__links{padding:5px;font-size:1em;font-weight:700;text-decoration:none;color:#90749c;position:relative;transition:color .5s ease;cursor:pointer}.contact__links:hover{color:#fff}.contact__links:before{content:"";position:absolute;right:0;top:0;height:100%;background:#5c4964;transition:max-width .5s ease;width:100%;max-width:0;z-index:-1}.contact__links:hover:before{max-width:100%;right:unset;left:0}.contact__btn{align-items:center;background-color:#5c4964;border:2px solid #5c4964;cursor:pointer;font-size:1em;font-weight:700;height:48px;justify-content:center;letter-spacing:-.8px;line-height:24px;min-width:140px;outline:0;padding:0 17px;text-align:center;transition:all .5s;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;font-family:sans-serif;text-transform:uppercase}.contact__btn,.contact__btnLink{color:#fff;text-decoration:none}.contact__btn:hover{background-color:rgba(92,73,100,.58);border-color:rgba(92,73,100,.58);fill:#5c4964}.contact__btn:active{background-color:#5c4964;border-color:#5c4964;fill:#5c4964}@media(min-width:768px){.contact__btn{min-width:170px}}@media(max-width:530px){.contact__content{padding:20px}.contact__mail{font-size:1.8em}.contact__links--flex{flex-direction:column;gap:10px}}