@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);@font-face{font-family:'Poppins';font-display:swap;src:url(your-font.woff2) format('woff2')}html,body,.snap{block-size:auto}html{scroll-snap-type:y mandatory;scroll-behavior:auto}.snap{scroll-snap-align:center}body{padding:2em 5em;font-family:"Poppins",serif;background-color:none;margin:0;scrollbar-width:none;scrollbar-color:#fff}#frame{display:flex;justify-content:center;align-items:center;height:60vh}#showcase{width:100%;text-align:center;margin:30em 0 300px 0}#nav{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;height:500px;width:100%;flex-wrap:wrap}#nav a{text-decoration:none;font-family:"poppins",serif;font-weight:500;color:#4B73D3;text-align:right;font-size:clamp(15px, 2vw, 30px);padding:2em 3em;transition:0.4s}.frame{background-color:#4AA2EF;overflow:hidden}.frame .txt{color:#fff;cursor:default}.frame .b-txt{color:#4B73D3;background-color:#fff;border:none;height:60px;width:clamp(200px, 8vw, 280px);border-radius:10px;font-size:clamp(15px, 2vw, 30px);font-weight:600;transition:0.2s ease-in-out}.frame .bi-linkedin{height:30px;padding-bottom:4px}.frame .img{transition:transform 0.4s ease-in-out}.project_cover{display:flex;justify-content:center;margin:14em 0;padding:8em 0;width:100%;flex-wrap:wrap}.nav_tab{display:flex;justify-content:space-evenly;width:100%;flex-wrap:wrap}.tabs{background-color:#fff0;border:none;font-family:"poppins",serif;font-size:clamp(15px, 2vw, 30px);font-weight:500;color:#4B73D3;text-align:right;padding:2em 3em;transition:0.4s;text-align:center}.all_content{margin:5em 0;width:100%;display:none;animation:moving .6s ease-in}.all_content.active{display:block}.grid-1{display:grid;grid-template-columns:repeat(auto-fill,minmax(30%,1fr));grid-template-rows:repeat(14,auto-fill);grid-gap:30px;margin:0;justify-content:center}.grid-1 img{padding:2em;transition:0.2s ease-in-out}.post{grid-row:span 2;width:75%}.poster{width:75%}.grid-item{display:flex;justify-content:center;align-items:center;grid-row:span 2}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,auto);grid-gap:30px;margin:0;justify-content:center}.grid-2 .grid-frame{grid-column:span 2;border-radius:15px;width:100%;height:600px;padding:0}.grid-2 img{width:100%;height:100%;border-radius:15px;object-fit:cover}.explain{background-color:#4B73D3;border-radius:15px;padding:3em;color:#fff}.explain h1{text-align:end;font-size:clamp(2em, 3vw, 4em);font-weight:500;margin-bottom:1.5em}.explain p{font-size:clamp(15px, 1.2vw, 1.5em);text-align:justify}.e2 h1{text-align:start}.explain a{display:flex;text-decoration:none;justify-content:end;width:100%}.explain button{padding:.5em 3em;background-color:#fff;border:none;border-radius:8px;font-size:clamp(15px, 1.2vw, 1.5em);font-weight:500;color:#4B73D3;margin-top:2em;transition:0.2s ease-in}.e2 a{justify-content:start}.grid-3{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,auto);grid-gap:30px;margin:0;justify-content:center}.grid-3 img{width:100%;height:100%;border-radius:15px;object-fit:cover}.grid-3 .grid-frame{grid-column:span 2;border-radius:15px;width:100%;padding:0}.about_me{display:grid;align-items:center;margin:10em 0;grid-template-columns:auto auto;grid-template-rows:1;column-gap:60px}.profile{position:relative;width:clamp(4em, 40vw, 40em);height:clamp(4em, 40vw, 40em);overflow:hidden;border-radius:15px;grid-row:1;grid-column:1}.p-image{position:absolute;width:100%;height:100%;border-radius:15px}.p-image img{width:100%;height:auto;object-fit:cover}.profile .p-overlay{position:absolute;width:100%;height:100%;mix-blend-mode:screen;background-color:#1344a0}.p-block{position:absolute;width:100%;height:100%;display:flex;flex-flow:row wrap;align-content:space-between;justify-content:space-between}.block{width:80px;height:80px;opacity:0;mix-blend-mode:color-dodge;background-color:#4B73D3;transition:opacity 0.3s ease-in}.block.active{opacity:.75}.persona{grid-row:1;grid-column:2}.persona h1{color:#4B73D3;margin:0;font-size:clamp(1.5em, 3vw, 4em);font-weight:700}.persona p{text-align:justify;font-size:clamp(15px, 1.2vw, 1.5em)}.persona .career{margin:0 0 2em 0;font-size:clamp(14px, 1.2vw, 1.5em)}.more{display:flex;justify-content:space-between;margin:2em 0}.more-info{display:grid;grid-template-rows:auto auto;grid-template-columns:40px auto;column-gap:40px}.more-info p{text-align:start}.icon{grid-row:span 2;grid-column:1;justify-content:center;align-self:center}.more-info h1{grid-row:1;grid-column:2}.more h1{margin:0;font-size:clamp(15px, 1.2vw, 1.5em)}.more p{margin:0;color:#505050;font-size:clamp(15px, 1.2vw, 1.5em)}.resume{font-size:clamp(15px, 1.5vw, 1.6em);margin-top:2em}.resume a{text-decoration:none;font-weight:600;transition:0.2s ease-in;color:#4AA2EF}.footer{position:absolute;background-color:#4B73D3;width:100%;left:0;right:0;padding:0 5em};.footer{background-color:#4B73D3;width:100%}.footer h2{color:#fff;font-weight:600}.footer a{color:#fff;text-decoration:none;font-weight:400}.footer p{color:#fff}.footer input{background-color:#274da5;border:none}.footer button{background-color:#fff;color:#4B73D3;font-weight:500;padding:0 2em;border:none;transition:0.2s ease-in}.footer input::placeholder{color:#fff}#nav a:hover{color:#4AA2EF;font-weight:600;font-size:25px}.frame .b-txt:hover{color:#fff;background-color:#4AA2EF;border:2px solid #fff}.frame:hover .img{transform:translateX(200px) scale(1.3)}.grid-1 img:hover{transform:scale(1.1)}.tabs:hover{font-weight:600;font-size:25px;color:#4AA2EF}.resume a:hover{color:#4868b2}.explain button:hover{background-color:#4B73D3;color:#fff;border:2px solid #fff}.footer button:hover{background-color:#274da5}.footer .footer-link:hover{font-weight:700}@media only screen and (max-width:585px){#nav{flex-direction:column;justify-content:center}#nav .nav-text{margin:1em}#nav{display:flex;flex-direction:column;justify-content:center;align-items:center;height:500px;width:100%}.frame .txt{text-align:center;padding-bottom:5px}.frame a{display:flex;justify-content:center}.frame .b-txt{color:#4B73D3;background-color:#fff;border:none;height:40px;width:150px;font-size:20px;font-weight:400;border-radius:5px}.frame .bi-linkedin{height:25px;padding-bottom:4px}.frame{display:flex;justify-content:center;align-items:center}#frame .b-canvas{width:150px}}@media (max-width:1000px){.grid-1{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(14,auto-fill);justify-content:center}.grid-2{grid-template-columns:1fr;grid-template-rows:repeat(5,auto-fill)}.grid-3{grid-template-columns:1fr;grid-template-rows:repeat(5,auto-fill)}.grid-frame{grid-row:1;grid-column:1}.t1{grid-row:2}.e1{grid-row:3}.t2{grid-row:4}.e2{grid-row:5}.explain h1{text-align:center}.explain a{justify-content:center}.explain button{border-radius:5px}.frame:hover .img{transform:scale(1.1)}}@media (max-width:700px){.grid-1{grid-template-columns:auto}.grid-1 img{padding:0}}@media (max-width:1273px){.more{flex-direction:column;gap:20px}}@media only screen and (max-width:1000px){.profile{position:relative;width:clamp(6em, 60vw, 40em);height:clamp(6em, 60vw, 40em);overflow:hidden;border-radius:15px;grid-row:1;grid-column:1}.about_me{row-gap:60px;display:flex;flex-direction:column;justify-content:center}.persona .name{text-align:center}.persona .career{text-align:center}.resume{display:flex;justify-content:center}.more{flex-direction:row}}@media only screen and (max-width:580px){.more{flex-direction:column}}@keyframes moving{100%{transform:translateY(0)}0%{transform:translateY(200px)}}