.about-me-container{width:100dvw;height:100dvh;display:grid;grid-template-columns:1fr 6fr;column-gap:10px;position:absolute;left:0;top:0;padding-left:1rem;padding-right:1rem;z-index:4}@media screen and (max-width: 800px){.about-me-container{grid-template-columns:1fr;padding-left:0;padding-right:0}}.border-t-b{border-bottom:solid 2px rgba(255,255,255,.4);border-top:solid 2px rgba(255,255,255,.4);box-shadow:1px 1px 10px #2e4460b3}@keyframes content-appear{0%{opacity:0}to{opacity:1}}.side-bar{height:100dvh;min-width:180px;display:grid;grid-template-rows:1fr 1fr 10fr;padding-top:4.2rem;padding-bottom:1rem;overflow-y:auto;overflow:visible}.profile-container{width:100%;height:120px;display:flex;flex-direction:column;align-items:center;padding:10px 6px;margin-bottom:1rem;border-bottom:solid 2px rgba(255,255,255,.4);border-top:solid 2px rgba(255,255,255,.4);transition:all .2s;box-shadow:1px 1px 10px #2e4460b3}.profile-img{position:absolute;width:110px;height:110px;margin-bottom:12px;border-radius:10px;transform:translateY(-10px);transform-origin:50% 50%;transition:all .3s}.profile-links{position:relative;top:7rem;list-style:none;display:flex;gap:10px;transform-origin:100% 0%;transform:scaleY(0);transition:all 0s}.profile-container:hover{height:220px}.profile-container:hover .profile-img{transform:scale(1.2) translateY(10px)}.profile-container:hover .profile-links{transform:scaleY(1);transition:all .3s}@media screen and (max-width: 800px){.side-bar{display:none}}.good-music{height:70px;border-bottom:solid 2px rgba(255,255,255,.4);border-top:solid 2px rgba(255,255,255,.4);margin-bottom:1rem;padding:.6rem;overflow:hidden;transition:all .2s;box-shadow:1px 1px 10px #2e4460b3}.good-music:hover{height:180px}.music-container{display:flex;overflow:hidden;max-height:80px;background-repeat:no-repeat;border-radius:2px;border:solid 1px white;background-size:300% 100%}.music-container a{animation:next 10s infinite}@keyframes next{0%{transform:translate(0)}10%{transform:translate(-100%)}25%{transform:translate(-100%)}35%{transform:translate(-200%)}50%{transform:translate(-200%)}60%{transform:translate(-300%)}75%{transform:translate(-300%)}85%{transform:translate(-400%)}to{transform:translate(-400%)}}@keyframes next-music{0%{background-position:160% center}25%{background-position:0% center}50%{background-position:-200% center}to{background-position:-200% center}}.contents-table{width:100%;padding:.6rem;border-bottom:solid 2px rgba(255,255,255,.4);border-top:solid 2px rgba(255,255,255,.4);overflow-y:scroll;box-shadow:1px 1px 10px #2e4460b3}.contents-table-item button{display:inline-block;width:100%;padding-left:10px;padding-top:3px;padding-bottom:3px;margin-bottom:4px;font-size:18px;text-align:left;transition:background-color .2s,color .2s,padding-left .3s}.contents-table-item button:hover{background-color:#fff3;color:#54b3ff;padding-left:16px}.contents-container{width:100%;height:100dvh;padding:80px 20px 16px;transition:all .2s;overflow-x:hidden;overflow-y:auto}@media screen and (max-width: 480px){.contents-container{width:100%;height:100%;padding:60px 2px 16px 6px;transition:all .2s}}.motto{background:linear-gradient(45deg,#20ffff,#509de1);background-clip:text;color:transparent;font-size:20px;width:80%;padding-top:10px;padding-bottom:10px;padding-left:20px;border-left:solid 2px #20ffff;margin-left:20px}.intro-text{font-size:20px;height:min-content;margin-top:auto;margin-bottom:auto}.intro-text ul{font-size:20px}@media screen and (max-width: 480px){.motto{font-size:16px;width:90%;padding-left:10px;margin-left:4px}.intro-text,.intro-text ul{font-size:16px}}.skill-tree-item{width:50px;height:50px;position:absolute;background:#143140;border:solid 1px rgb(20,255,255);transform:rotate(45deg);transition:all .1s}.skill-tree-item:before{content:"";width:300%;height:300%;position:absolute;left:-100%;top:-100%;border-radius:50%}.skill-tree-item .icon-container:before{content:"";position:absolute;left:50%;top:-40px;transform:translate(-50%) rotate(-45deg);border-top:solid 8px white;border-left:solid 8px transparent;border-right:solid 8px transparent;opacity:0;pointer-events:none;transition:top .1s,opacity .01s,transform .01s;transition-delay:0s}.skill-tree-item .icon-container:after{content:attr(balloon-data);width:500%;text-align:center;font-size:1rem;position:absolute;left:50%;top:-60px;transform:translate(-50%) rotate(-45deg);opacity:0;pointer-events:none;transition:top .3s,opacity .01s,transform .01s;transition-delay:0s}.skill-tree-item:hover{color:#0ff;transform:scale(1.1)}.skill-tree-item:hover .icon-container{color:#fff;transform:rotate(0)}.skill-tree-item:hover .icon-container:before{opacity:1;transform:translate(-50%) rotate(0);top:-10px;transition-delay:.2s}.skill-tree-item:hover .icon-container:after{opacity:1;transform:translate(-50%) rotate(0);top:-40px;transition-delay:.2s}.skill-tree-item .icon-container{width:50px;height:50px;transform:rotate(-45deg);transition:all .1s}.skill-tree-item .icon-container .icon{width:50px;height:50px}.skill-tree-item .icon-container .icon-text{position:absolute;text-align:center;font-size:12px;width:200%;bottom:-10px;left:0;transform:translate(-25%);text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;border-radius:10px}.skill-describe{margin-top:60px;margin-bottom:20px}@media screen and (max-width: 640px){.skill-describe ul li b{display:block;width:100%}}@media screen and (max-width: 480px){.skill-tree-item{width:30px;height:30px;transition:all .1s}.skill-tree-item .icon-container{width:30px;height:30px;transform:rotate(-45deg);transition:all .1s}.skill-tree-item .icon-container .icon{width:30px;height:30px}.skill-tree-item .icon-container .icon-text{width:500%;transform:translate(-40%);font-size:10px}.skill-describe{font-size:14px}.skill-tree-item .icon-container:after{content:attr(balloon-data);width:500%;text-align:center;font-size:14px;position:absolute;left:50%;top:-60px;transform:translate(-50%) rotate(-45deg);opacity:0;pointer-events:none;transition:top .3s,opacity .01s,transform .01s;transition-delay:0s}}.code-ability{position:relative;padding:.8rem;margin-top:.2rem;margin-bottom:.2rem;border-radius:10px;transition:all .6s}.code-ability:hover{box-shadow:1px 1px 10px #000}.code-ability progress{display:inline-block;width:100%;height:6px;transform-origin:0% 50%}.code-ability:hover progress::-webkit-progress-value{background:#eee}.code-ability span{position:absolute;top:10%;left:1rem;text-shadow:1px 1px rgba(81,162,255,.8),1px -1px rgba(81,162,255,.8),-1px 1px rgba(81,162,255,.8),-1px -1px rgba(81,162,255,.8)}.code-ability:hover span{text-shadow:1px 1px #eeeeee,1px -1px #eeeeee,-1px 1px #eeeeee,-1px -1px #eeeeee}.code-ability progress::-webkit-progress-bar{background:#0009;box-shadow:0 0 8px #00ffff4d;border-radius:4px}.code-ability progress::-webkit-progress-value{background:linear-gradient(45deg,#51a2ffcc,#0ffc);box-shadow:0 0 8px #00ffff4d;border-radius:4px}@media screen and (max-width: 960px){.ability-progress-container{width:100%;height:auto}.code-ability progress{display:inline-block;width:90%}}.find-me-links{font-size:20px;color:#a0a0a0}@media screen and (max-width: 420px){.find-me-links{font-size:16px;color:#a0a0a0}.find-me-links b{display:block;width:90%}}.oj[data-astro-cid-4ctm6fo3]{margin-top:40px;display:grid;grid-template-columns:1fr 1fr 1fr}.oj-progress[data-astro-cid-4ctm6fo3]{position:relative;width:100%;max-width:200px;margin:auto}.oj-progress[data-astro-cid-4ctm6fo3] svg[data-astro-cid-4ctm6fo3]{overflow:visible;margin:auto}.oj-progress[data-astro-cid-4ctm6fo3] svg[data-astro-cid-4ctm6fo3] circle[data-astro-cid-4ctm6fo3]{fill:transparent;stroke:#418bd4;stroke-width:6;stroke-dasharray:500;stroke-linecap:round;transform-origin:50% 50%;transform:rotate(-90deg)}.oj-progress[data-astro-cid-4ctm6fo3] b[data-astro-cid-4ctm6fo3]{font-size:22px}.oj-progress[data-astro-cid-4ctm6fo3] svg[data-astro-cid-4ctm6fo3] text[data-astro-cid-4ctm6fo3]{fill:#418bd4;font-size:60px;text-anchor:middle}@media screen and (max-width: 640px){.oj-progress[data-astro-cid-4ctm6fo3] b[data-astro-cid-4ctm6fo3]{font-size:14px}}.route[data-astro-cid-za7w552s]{overflow:visible;width:250px;height:min-content;max-width:100%}.route[data-astro-cid-za7w552s] .route-path[data-astro-cid-za7w552s]{transform-origin:50% 40%;transform:rotateX(55deg);stroke-linecap:round;stroke-dashoffset:0;stroke-dasharray:400;animation:none}