@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap);*{margin:0;padding:0;box-sizing:border-box;max-width:100%}html{font-size:62.5%}body{background:linear-gradient(45deg,ivory,#789,ivory);font-family:"Noto Sans JP",sans-serif}body #root{font-size:1.6rem}body h1,body h2,body h3{width:100%;text-align:center}body h1{font-size:4rem;transition:all .5s ease}body h1.preload{opacity:0;transform:translateY(-50px)}body h2{margin:0 auto 3%;font-size:2.4rem}body h3{margin:1rem auto;font-size:1.6rem}body ul{list-style:none;text-align:center}body ul li{display:inline-block;margin:2%}body .section-description{width:90%;margin:5% auto 0}section{margin:5% auto 7%}main{transition:all .5s ease}main.preload{opacity:0;transform:translateY(150px)}footer,header{background:linear-gradient(45deg,#789,#2f4f4f);color:#f5f5f5}footer{padding:2rem}@media screen and (min-width:800px){footer{text-align:center}}.nav-links{margin:1rem auto}.nav-links li{transition:all .5s ease}.nav-links li.preload{opacity:0;transform:translateX(150px)}.nav-links a{position:relative;text-decoration:none;color:#f5f5f5}.nav-links a:after{content:"";display:block;width:0;height:2px;position:absolute;left:50%;bottom:-6px;background:#f5f5f5;transition:width .3s ease 0s,left .3s ease 0s}.nav-links a:hover:after{width:100%;left:0}.header-subtitle{text-align:center}.header-subtitle h2{display:inline-block;width:auto;margin:0;font-size:1.6rem;transition:all .5s ease}@media screen and (min-width:800px){.header-subtitle h2{font-size:2.2rem}}.header-subtitle #laptop,.header-subtitle #rocket{position:relative;width:4.8rem;cursor:pointer}.header-subtitle .fire:before{content:"🔥";position:absolute;bottom:.6rem;left:1.2rem;opacity:.6;-webkit-animation:wiggle .8s infinite;animation:wiggle .8s infinite}.header-subtitle .launch{transform:translate(500px,-500px)}.header-subtitle .clickme:after{content:"(click me)";position:absolute;bottom:-1.5rem;left:0;font-size:1rem}.header-subtitle .hide{display:none}@media screen and (min-width:800px){#build-week,#projects{display:flex;flex-wrap:wrap;justify-content:space-evenly}}.project-card{position:relative;margin:5%;padding:5%;box-shadow:3px 3px 6px #292929;background:ivory;font-family:monospace}@media screen and (min-width:800px){.project-card{width:30%;margin:1.5% 0;padding:1%}}.project-card h4{margin:1% auto 3%;font-size:2rem;font-weight:100;text-align:center}.project-card .img-container{display:flex;justify-content:center}.project-card .img-container img{border:2px solid #292929;max-height:200px;min-height:200px}.project-card .exit-icon,.project-card .info-icon{position:absolute;top:10px;z-index:10;width:20px;text-align:center}.project-card .exit-icon{right:10px;color:ivory}.project-card .info-icon{left:10px}.project-card .info-icon:hover{color:#f5f5f5}.project-card .info-icon:hover~div.description-overlay{height:100%;opacity:.9}.project-card .description-overlay{display:flex;flex-wrap:wrap;align-content:center;position:absolute;top:0;left:0;width:100%;height:0;overflow:hidden;padding:2rem;background:#292929;color:#f5f5f5;opacity:0;transition:all .5s ease}.project-card .description-overlay .tech-stack{width:100%;margin:1.6rem auto;font-size:1.4rem;text-align:center}.project-card .description-overlay .feature-list{width:80%;margin:0 auto;text-align:left;list-style:circle}.project-card .description-overlay .feature-list li{display:list-item}.project-card .link-btns{display:flex;justify-content:space-between;margin:7% 0 0}.project-card .link-btns a{display:inline-block;width:35%;margin:auto;border:1px solid #292929;border-radius:7px;padding:1%;background:linear-gradient(45deg,#789,#2f4f4f,#789);color:#f5f5f5;text-align:center;text-decoration:none;transition:all .3s ease}.project-card .link-btns a:hover{background:linear-gradient(45deg,#d3d3d3,grey,#d3d3d3);color:#292929}#skills li{display:inline-block;margin:8px;border:1px solid #292929;border-radius:7px;padding:1rem 1.6rem;text-align:center;cursor:pointer;transition:all .5s ease}#skills li:nth-child(odd){background:linear-gradient(45deg,#789,#2f4f4f,#789);color:#f5f5f5}#skills li:nth-child(2n){background:linear-gradient(45deg,#d3d3d3,grey,#d3d3d3);color:#292929}#skills li span{font-family:monospace;font-size:2.4rem;font-weight:700}#skills li.wiggle{box-shadow:3px 3px 3px #292929}#contact{display:flex;justify-content:center;flex-wrap:wrap}#contact ul li{display:inline-block;margin:8px;border:1px solid #292929;border-radius:7px;padding:1rem 1.6rem;text-align:center;box-shadow:3px 3px 3px #292929;background:linear-gradient(45deg,#d3d3d3,grey,#d3d3d3)}#contact ul li a{font-size:2.4rem;font-weight:700;font-family:monospace;text-decoration:none;color:#292929}#back-to-top{position:fixed;bottom:.5rem;right:.5rem;font-size:4rem;color:#292929;opacity:.5;transition:all .3s ease-in-out}#back-to-top:hover{opacity:1}#back-to-top svg{width:44px;border:1px solid #292929;border-radius:7px;background:linear-gradient(45deg,#d3d3d3,grey,#d3d3d3);box-shadow:1px 1px 2px #292929}.wiggle{-webkit-animation:wiggle .8s infinite;animation:wiggle .8s infinite}@-webkit-keyframes wiggle{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translateY(2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(2px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(2px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}@keyframes wiggle{0%{transform:translate(2px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translateY(2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(2px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(2px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}.shake{-webkit-animation:shake 2.5s infinite;animation:shake 2.5s infinite}@-webkit-keyframes shake{0%,80%,to{transform:rotate(0deg)}85%{transform:rotate(7deg)}95%{transform:rotate(-7deg)}}@keyframes shake{0%,80%,to{transform:rotate(0deg)}85%{transform:rotate(7deg)}95%{transform:rotate(-7deg)}}
/*# sourceMappingURL=main.35618750.chunk.css.map */