.header{padding:16px;display:flex;flex-direction:column;margin-bottom:16px}.header-image-container{position:relative;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden}.header-image{width:100%;z-index:2}.hi-im-cas{position:relative;display:flex}.greeting-svg-container{position:absolute;top:-25vw;width:90%;z-index:3}.about-me-section{display:flex;justify-content:center;flex-direction:column;align-items:center;padding:4px}.about-me-text-card{background-color:#fff;padding:32px;border-radius:8px;transform:rotate(-2deg);margin-top:20%}.about-me-text-card p{margin:0}@media screen and (min-width: 700px){.header{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1.5fr 1fr;grid-template-areas:"greeting header-image" "about-me header-image";margin-top:5%;margin-bottom:0;padding:32px}.hi-im-cas{margin-left:10vw;grid-area:greeting;display:flex}.greeting-svg-container{position:static;width:90%;align-self:flex-end}.about-me-section{grid-area:about-me;justify-content:start}.about-me-text-card{width:90%;margin-top:-5vw;justify-self:flex-start;align-self:flex-end;transform:translate(5%) rotate(-2deg)}.header-image-container{grid-area:header-image;width:75%;transform:rotate(3deg)}}.project-polaroid{height:380px;width:320px;grid-template-rows:150px 75px;background-color:#fff;padding:16px;display:grid;grid-template-rows:232px 1fr;box-shadow:0 4px 10px #0000001a}.project-polaroid .image-section{width:100%;height:100%;background-color:#add8e6;border-radius:3px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #0000001a}.smartphone-outline{width:100%;height:200%;background-image:url(/portfolio-website/assets/empty-smartphone-1877d231.svg);background-repeat:no-repeat;background-size:cover;background-position:center;margin-top:auto}.monitor-outline{width:80%;height:100%;margin-left:22%;margin-bottom:10%;background-image:url(/portfolio-website/assets/empty-monitor-298457c8.svg);background-repeat:no-repeat;background-size:cover;margin-top:30%}.smartphone-outline,.monitor-outline{position:relative;display:flex;align-items:center;justify-content:center}.project-image{position:absolute}.smartphone-outline .project-image{background:yellow;height:33.34%;width:175px;top:16.65%;left:19.7%;left:56px}.monitor-outline .project-image{background:yellow;width:97%;height:60.5%;top:3.1%;left:3.04%}a.live-preview-link{position:relative;width:100%;height:100%}a.live-preview-link:hover{filter:brightness(80%)}a .link-icon{position:absolute;top:0px;left:0px;width:30px;height:30px}.link-icon img{width:30px;height:30px}.text-section{display:flex;flex-direction:column;justify-content:space-around}h3.project-title{font-size:1.5rem;font-weight:700;margin:4px 0;display:flex;justify-content:space-between;align-items:start}h3.project-title .github-icon-container{width:20px;height:20px}.github-icon-container img{width:100%}.project-tags-container{display:flex;gap:5px;flex-wrap:wrap;overflow:hidden;width:100%}.project-tag{color:#878787;font-weight:700;background-color:#f5f5f5;padding:2px 6px;font-size:.7rem;letter-spacing:2px}.都道府県人口-Prefecture-Population .project-image{background-image:url(/portfolio-website/assets/都道府県人口-Prefecture-Population-c87a2300.png);background-repeat:no-repeat;background-size:cover}.Text-Saver .project-image{background-image:url(/portfolio-website/assets/Text-Saver-eb8c27e0.png);background-repeat:no-repeat;background-size:cover}.Line-Order .project-image{background-image:url(/portfolio-website/assets/Line-Order-b33a2449.png);background-repeat:no-repeat;background-size:cover}.CV-Builder .project-image{background-image:url(/portfolio-website/assets/CV-Builder-56fa2867.png);background-repeat:no-repeat;background-size:cover}.Weather-App .project-image{background-image:url(/portfolio-website/assets/Weather-App-8b71db18.png);background-repeat:no-repeat;background-size:cover}.Knight-Moves .project-image{background-image:url(/portfolio-website/assets/Knight-Moves-26725a3f.png);background-repeat:no-repeat;background-size:cover}.Smart-Todo .project-image{background-image:url(/portfolio-website/assets/Smart-Todo-9e09dba2.png);background-repeat:no-repeat;background-size:cover}.Tic-tac-toe .project-image{background-image:url(/portfolio-website/assets/Tic-tac-toe-968d4e14.png);background-repeat:no-repeat;background-size:cover}.User-Dashboard .project-image{background-image:url(/portfolio-website/assets/User-Dashboard-5b0cfa6e.png);background-repeat:no-repeat;background-size:cover}.Calculator .project-image{background-image:url(/portfolio-website/assets/Calculator-d08c7b48.png);background-repeat:no-repeat;background-size:cover}.Web-a-sketch .project-image{background-image:url(/portfolio-website/assets/Web-a-sketch-1b889564.png);background-repeat:no-repeat;background-size:cover;background-position:center top}.projects-section{width:100%;display:flex;flex-direction:column;background-color:var(--bg-grey)}.projects-container{display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;max-width:100%;gap:16px}.projects-section h2{font-size:1.6rem;align-self:center;margin-bottom:16px;margin-left:16px}@media screen and (min-width: 700px){.projects-container{display:grid;grid-template-columns:1fr 1fr;align-self:center}}@media screen and (min-width: 1000px){.projects-container{display:grid;grid-template-columns:1fr 1fr 1fr;align-self:center}}.footer{display:flex;flex-direction:column}.footer-top-wrapper{padding:16px;background-repeat:no-repeat;background-size:cover;margin-left:10%}.footer-image{width:100%;align-self:center;padding:16px}.footer-image img{width:100%}.contact-me{padding:4px}.linkbox{display:flex;flex-direction:row;align-self:center;margin:10px}.github-icon-container{width:40px;height:40px}.linked-in-icon-container{width:45px;height:45px}.app{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--bg-grey)}*{box-sizing:border-box}body{margin:0}a{text-decoration:none;color:inherit}:root{--text-color: #202020;--bg-grey: #ECECEC ;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:var(--text-color);background-color:var(--bg-grey);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}