@import"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500&display=swap";:root{--font-family: "Noto Sans JP", sans-serif}html,body{width:100vw;min-height:100vh}*{box-sizing:border-box;padding:0;margin:0;scroll-behavior:smooth}::selection{color:#fff;background-color:#000}body{background:linear-gradient(360deg,#6fff6a,#007dff)}@-webkit-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@-moz-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@-webkit-keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@keyframes jello-horizontal{0%{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scale3d(1,1,1);transform:scaleZ(1)}}@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes color-change{0%{color:red}50%{color:#00ff37}to{color:#ea00ff}}.site__padding{padding:1.5rem 10%}.site__margin{margin:4rem 6rem}@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}to{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}to{-webkit-transform:translate(0);transform:translate(0)}}a{color:#cc1495;text-decoration:none;font-weight:800}a:hover{color:#fff}@-webkit-keyframes shadow-drop-2-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,0);box-shadow:0 0 #0000}to{-webkit-transform:translateZ(50px);transform:translateZ(50px);-webkit-box-shadow:0 0 20px 0px rgba(0,0,0,.35);box-shadow:0 0 20px #00000059}}@keyframes shadow-drop-2-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-box-shadow:0 0 0 0 rgba(0,0,0,0);box-shadow:0 0 #0000}to{-webkit-transform:translateZ(50px);transform:translateZ(50px);-webkit-box-shadow:0 0 20px 0px rgba(0,0,0,.35);box-shadow:0 0 20px #00000059}}.site__separator{border-color:#000;height:15px;border-radius:10px;border-width:4px;margin:1rem 0}.site__main{margin-top:2rem}.site__about{margin:0 2rem;display:flex;flex-direction:column;align-items:flex-start;-webkit-animation:fade-in-fwd 1.4s cubic-bezier(.39,.575,.565,1) both;animation:fade-in-fwd 1.4s cubic-bezier(.39,.575,.565,1) both}.site__about h3,.site__about p{font-family:var(--font-family)}.site__about h3{margin:.5rem 0 0 .5rem;font-size:25px}.site__about p{margin:.5rem 0 0 .5rem;font-size:18px}.site__about-text{padding:1rem}.site__about-imgcontainer{display:flex;flex-direction:row;justify-content:space-around}.site__about-imgcontainer img{width:50%}.me{animation:color-change 3s infinite;cursor:default}@media only screen and (max-width: 768px){.site__about{margin:0 0rem}}.site__projects{margin:0;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;-webkit-animation:fade-in-fwd 1.4s cubic-bezier(.39,.575,.565,1) both;animation:fade-in-fwd 1.4s cubic-bezier(.39,.575,.565,1) both}.site__projects h2,h3{font-family:var(--font-family)}.site__projects-text{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;flex-direction:row}.project__cart{background:linear-gradient(30deg,#6fff6a,#007dff);mix-blend-mode:overlay;border-radius:.5rem;border:3px solid black;transition:color .3s,box-shadow .3s;position:relative;padding:.8rem;height:200px;width:300px}.project__cart__text p{font-family:var(--font-family);font-size:1em}.project__cart__text h3{font-size:1.3em}.project__cart__git{position:absolute;top:145px;left:20px;float:left;box-shadow:0 5px 0 3px #000;border:3px solid black;border-radius:.4rem;transition:color .2s,box-shadow .2s;cursor:pointer}.project__cart__git:hover{box-shadow:0 0 #000;border:3px solid black;border-radius:.4rem}.project__cart__git img{width:30px;display:block}.project__cart__img{position:absolute;top:150px;left:240px;float:left}.project__cart__img img{width:30px;display:block}@media only screen and (max-width: 420px){.project__cart{margin:1rem 0}.project__cart__git{box-shadow:0 3px 0 2px #000;border:1px solid black;border-radius:.4rem}}@media only screen and (max-width: 576px){.project__cart{margin:1rem 0}.project__cart__git{box-shadow:0 3px 0 2px #000;border:1px solid black;border-radius:.4rem}}@media only screen and (min-width: 576px){.project__cart{margin:1rem}.project__cart__git{box-shadow:0 4px 0 2px #000;border:2px solid black;border-radius:.4rem}}@media only screen and (min-width: 992px){.project__cart{margin:2rem;height:240px;width:400px}.project__cart__git{top:157px;left:20px;box-shadow:0 5px 0 3px #000;border:3px solid black;border-radius:.4rem}.project__cart__git img{width:60px}.project__cart__img{top:164px;left:320px}.project__cart__img img{width:60px}}.site__contact{margin:0 2rem;display:flex;flex-direction:column;align-items:flex-start;animation:fade-in-fwd 1.4s cubic-bezier(.39,.575,.565,1) both}.site__contact h3,.site__contact p{font-family:var(--font-family)}.site__contact h3{margin:.5rem 0 0 .5rem;font-size:25px}.site__contact p{font-size:18px}.site__contact-text{padding:.5rem 0 1rem 2rem;margin-top:1rem}.site__contact-content{display:flex;flex-direction:row;align-items:center}.cv>img{width:40px;margin:0 5px}a{color:#9d00ff}@media only screen and (max-width: 992px){.site__contact{margin:0}.site__contact p{font-size:15px}.site__contact span{display:none}}.site__header{display:flex;flex-direction:column}.site__header-title{margin:0;font-family:var(--font-family)}.site__header-title-h1:hover{-webkit-animation:vibrate-1 .3s linear both;animation:vibrate-1 .3s linear both;cursor:default}.site__header-categorybar{display:flex;flex:1;align-items:center;justify-content:center}.site__header-button-inactive{background:#fff}.site__header-button-active{background:#7f8aff;-webkit-animation:shadow-drop-2-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:shadow-drop-2-center .4s cubic-bezier(.25,.46,.45,.94) both}.site__header-button{font-weight:500;color:#000;margin:.5rem;padding:.5rem 1rem;font-family:var(--font-family);cursor:pointer;border:none;outline:none;font-size:.8rem;line-height:25px;transition:color .2s,box-shadow .2s;box-shadow:0 2px 0 3px #000;border:3px solid black;border-radius:.6rem;max-height:62px}.site__header-button:hover{box-shadow:none}@media only screen and (max-width: 420px){.site__header-button{width:120px;border:2px solid black;font-size:.7rem;margin:.3rem}}@media only screen and (max-width: 576px){.site__header-button{width:120px}}@media only screen and (min-width: 576px){.site__header-button{width:120px}}@media only screen and (min-width: 768px){.site__header-button{width:140px}}@media only screen and (min-width: 992px){.site__header-button{margin:1rem;font-size:1.4rem;width:160px}}