:root{--font-default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--color-default-one: #03045E;--color-default-two: #023E8A;--color-default-three: #0077B6;--color-default-four: #0096C7;--color-default-five: #00B4D8;--color-default-six: #48CAE4;--color-default-seven: #90E0EF;--color-default-eight: #CAF0F8}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;font-size:62.5%;font-family:var(--font-default)}html{scroll-behavior:smooth}@keyframes hireMe{from{transform:scale(0.7)}to{transform:scale(1)}}@keyframes changeText{1%{opacity:1;transform:scale(0.6)}3%{transform:scale(1)}5%{transform:scale(1.3)}7%{transform:scale(1)}45%{opacity:1}50%{opacity:0}100%{opacity:0}}.flex{display:flex}.header{width:20%;height:100%;background-color:var(--color-default-two);position:fixed;top:0;border-right:1px solid var(--color-default-three)}.header__title{color:var(--color-default-eight);text-align:center;font-weight:bold;margin-top:4rem;font-size:2.4rem;font-weight:normal}.header__nav{font-weight:600;font-size:1.8rem;font-weight:normal;width:100%;height:80%;display:flex;flex-direction:column;justify-content:center;align-items:center}.header__item{margin:1.5rem 0;display:flex;align-items:center;cursor:pointer}.header__item div,.header__item svg{transition:all .3s}.header__item:last-child{margin-bottom:10rem}.header__item:hover div{color:var(--color-default-one)}.header__item:hover svg{fill:var(--color-default-one)}.header__item--active div{color:var(--color-default-one)}.header__item--active svg{fill:var(--color-default-one)}.header__icon{fill:var(--color-default-seven);width:2rem;height:2rem}.header__link{color:var(--color-default-seven);text-decoration:none;margin-left:1rem}.header__copy{font-size:1.4rem;font-weight:normal;font-weight:bold;color:var(--color-default-eight);bottom:1rem;text-align:center;margin-top:2rem}.home{width:80%;height:100%;margin-left:20%}.intro{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--color-default-two);opacity:.95}.intro__avatar{width:13rem;height:13rem;border-radius:50%;background-position:center;background-size:cover;background-image:url("/image/avatar.jpg")}.intro__social{display:flex;margin:1rem 0}.intro__name{color:var(--color-default-eight);font-size:2.4rem;font-weight:normal}.intro__nick{font-size:1.6rem;font-weight:normal;color:var(--color-default-six)}.intro__animation{font-size:1.8rem;font-weight:normal;font-weight:bold;color:var(--color-default-eight);margin:1.5rem 0;position:relative;margin-right:15rem;z-index:1}.intro__animation span{position:absolute;margin-left:.5rem;width:30rem;animation:changeText 10s linear infinite;opacity:0;color:var(--color-default-one);z-index:111}.intro__animation span:nth-child(1){animation-delay:0s}.intro__animation span:nth-child(2){animation-delay:5s}.intro__item{margin:0 1rem;text-decoration:none;font-size:1.8rem;font-weight:normal}.intro__item:hover svg{fill:var(--color-default-one)}.intro__hire-me{color:var(--color-default-eight);font-weight:bold;padding:1rem 1.5rem;background-color:#ff3539f2;border-radius:30px;margin:2rem 0;cursor:pointer;font-size:1.8rem;font-weight:normal}.intro__hire-me:hover{animation-name:hireMe;animation-duration:.7s}.intro__svg{width:20px;height:20px;fill:var(--color-default-seven);transition:fill .4s}.about{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:0 3rem;background-color:var(--color-default-eight)}.about__main{font-size:2.4rem;font-weight:800;color:var(--color-default-one);margin:3rem 0}.about__content{display:flex}.about__avatar{width:10rem;height:10rem;background-image:url("/image/avatar.jpg");background-position:center;background-size:cover;border-radius:50%;margin-right:10rem}.about__me{font-size:1.8rem;font-weight:normal;width:40%;color:var(--color-default-three)}.about__skill{width:40%}.about__skill-item{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:1rem 0}.about__skill-name{font-size:1.6rem;font-weight:bold;color:var(--color-default-four)}.about__skill-icon{width:3rem;height:3rem;margin-right:10rem}.about__title{font-size:1.8rem;font-weight:bold;color:var(--color-default-two);margin-bottom:1rem}.about__programming{padding-left:3rem}
