body{width:100%;height:100%;margin:0;background-color:#000;font-family:Fira Code,monospace;overflow:hidden}section:focus,.txt-box:focus{outline:1px solid #fc92a4;box-shadow:1px 1px 15px 3px #fc92a4;border:none}h1,a,.navls,.grid-container,#contact-section{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::selection{background-color:#fffff8a6;color:#313127;text-shadow:1px 1px 2px rgba(247,99,124,.9)}.back-to-nav{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;opacity:0;pointer-events:none}.back-to-nav:focus{opacity:1;cursor:pointer;pointer-events:auto;border:none;padding:10px;background-color:#25251f;color:#ffffd9;font-family:Fira Code,monospace;font-size:1.2rem}.back-to-nav:hover{color:#fc92a4}nav{position:absolute;padding-top:10px;padding-bottom:10px;width:100%;color:#ffffd9;font-size:1.2em;overflow:hidden;justify-content:space-around;display:flex}.navhp{transition:all 1s;height:65px;background-image:linear-gradient(to bottom,#25251fcc,#25251f00)}.navls{transition:all 1s;height:30px;background-color:#25251f}nav button{position:relative;border:none;background:none;padding:0 2px;margin:0;height:30px;font:inherit;color:inherit;text-align:center}nav button:hover{cursor:pointer}nav button:focus-visible,.back-to-nav:focus,.vtx-link:focus{outline:1px solid #fc92a4;box-shadow:0 1px 15px 2px #fc92a4;border-radius:5px}nav button:after{content:"";position:absolute;width:100%;transform:scaleX(0);height:1.8px;top:30px;left:0%;background-color:#fc92a4;transform-origin:bottom right;transition:transform .25s ease-out;display:inline-block}nav button:hover:after,nav button:focus:after{transform:scaleX(1);transform-origin:bottom left}.active{color:#fc92a4;transition:all 1s ease}.active:after{content:"";position:absolute;width:100%;transform:scaleX(1);height:1.8px;top:30px;left:0%;background-color:#fc92a4}.name{top:5%;width:100%;position:absolute;text-align:center;font-size:clamp(70px,5vw,100px)}.name span{font-family:Moirai One,cursive;background:-webkit-linear-gradient(#ff0066 0%,#ffffab 95%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0;text-shadow:0 0 10px #f452c3,0 2px 10px #f3df9c;transition:all 1s ease}span.fade{opacity:1}.intro{font-size:30px;text-align:center;width:100%;position:absolute;left:50%;transform:translate(-50%);opacity:0}.fsdev{background:-webkit-linear-gradient(#f55275,#fc92a4,#ffffab);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tags{color:#cac6aa}.top{bottom:19%}.from-left{animation:fl 1.8s ease;animation-delay:1.4s;animation-fill-mode:forwards}@keyframes fl{0%{opacity:0;transform:translate(-60%)}to{opacity:1;transform:translate(-50%)}}.bottom{bottom:14%}.from-right{animation:fr 1.8s ease;animation-delay:1.4s;animation-fill-mode:forwards}@keyframes fr{0%{opacity:0;transform:translate(-40%)}to{opacity:1;transform:translate(-50%)}}.flags-fade{opacity:0;animation:fade-in 3s ease;animation-delay:1.5s;animation-fill-mode:forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.flags{bottom:5%;left:50%;transform:translate(-50%);position:absolute;display:flex;justify-content:center;align-items:center;gap:10rem}.flag-button{border:none;background:none;padding:0;margin:0;cursor:pointer}.flag-button img{width:38px;border-radius:100%;box-shadow:0 0 15px 1px #f2f1e8;transition:transform .25s ease-out,box-shadow .25s ease-out}.flag-button:hover img{box-shadow:0 0 30px 4px #f2f1e8;transform:translateY(-4px)}.flag-button:focus img{transform:translateY(1px);width:45px}.flag-button:focus{outline:2px solid #fc92a4;box-shadow:1px 1px 35px 5px #fc92a4;outline-offset:-1px;border-radius:100%}::-webkit-scrollbar{width:1.4em}::-webkit-scrollbar-thumb{border:.5em solid rgba(0,0,0,0);border-radius:30px;background-clip:padding-box;background-color:#00000073}::-webkit-scrollbar-thumb:hover{background-color:#f55275}section{display:none;padding-left:30px;padding-right:30px;padding-bottom:15px;position:absolute;top:calc(50% + 25px);left:50%;transform:translate(-50%,-50%);width:80%;max-width:750px;height:auto;overflow:auto;background:#25251fa6;border-radius:10px;box-shadow:0 4px 30px #00000080;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.section-fade-in{display:block;animation:fade-in 1s;animation-fill-mode:forwards}h1{font-family:Moirai One,cursive;font-size:40px;margin-top:25px;color:#f9ecd7;text-shadow:0 4px 8px #f74a8f;width:auto;max-width:0%;white-space:nowrap;overflow:hidden}h1.animate-title{animation:title 4s ease;animation-fill-mode:forwards}@keyframes title{0%{max-width:0%}to{max-width:100%}}mark{color:#ffc;background-color:#0000}#projects-section{padding-bottom:40px;width:auto;max-width:900px;color:#fff;overflow-x:hidden}.pro{padding-left:15px}.grid-container{display:grid;grid-template-columns:auto auto auto auto}.grid-item{all:unset;display:block;background:linear-gradient(to bottom,#fd6e94,#ffffab 60%);color:#30302a;margin:12px;text-align:center;height:172px;border-radius:10px;box-shadow:0 4px 30px #00000040;position:relative;overflow:hidden;width:200px;transition:transform .5s ease}.project-pics{height:auto;width:200px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}.grid-item:hover,.grid-item:focus{background:linear-gradient(to bottom,#fd6e94,#ffffab 45%);transform:scale(1.15);cursor:pointer}.display-project{display:none;padding-bottom:40px;max-width:956px;width:956px;height:580px;overflow:hidden}.title-project{display:inline-block}.display-project>h1{margin-left:5px;margin-bottom:15px}.close{float:right;margin-top:35px;padding:0;font-size:40px;width:40px;height:40px;font-family:Fira Code,monospace;line-height:30px;border:none;color:#faf1e2;background:none;text-shadow:0px 1px 0px #fde9ec,0 4px 8px #f74a8f}.close:focus,.prev:focus,.next:focus{border-radius:50%;outline:1px solid #fc92a4;box-shadow:1px 1px 35px 5px #fc92a4;background-color:#ff00661a}.presentation{display:grid}.gif-display{height:auto;width:535px;border-radius:10px;margin-left:5px;grid-column:1;grid-row:1}.see-btns{grid-column:1;grid-row:2;width:535px;padding-left:5px;margin-top:20px;justify-content:space-around;display:flex}.see-btns>a{height:auto!important}.txt-box{grid-column:2;grid-row:1 / span 2;color:#fffff8;width:385px;height:480px;padding-left:20px;margin-top:-17px;line-height:1.6;border-radius:5px;overflow-y:auto}.prev,.next{position:absolute;border:none;top:50%;width:auto;margin-top:-22px;padding:8px;color:#f5c4fc;font-size:30px;background:#f3f3a1;text-shadow:0px 1px 0px #fde9ec,0 4px 8px #f74a8f;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.next{right:1px}.prev{left:1px}.prev:hover,.next:hover,.close:hover,.prev:focus,.next:focus,.close:focus{cursor:pointer;text-shadow:0 0 1px #fde9ec,0 0 10px #f3f3a1,0 0 20px #f74a8f,0 0 40px #fde9ec;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.prev:hover,.next:hover,.close:hover{transform:translateY(3px)}#about-section{color:#fffff8;line-height:1.6;max-height:80%}.small-tags{color:#363634}.links{width:auto;margin-bottom:10px;justify-content:space-around;display:flex}.links>a,.see-btns>a{font-family:Fira Code,monospace;text-decoration:none;color:#000;background-image:linear-gradient(to bottom,#fc036680,#f5698199,#f5698159);background-color:#f8f8c0;box-shadow:0 1px 40px #0003;height:auto;border:none;padding:10px;width:auto;border-radius:5px;cursor:pointer;transition:.4s}.links>a:hover,.see-btns>a:hover,.links>a:focus,.see-btns>a:focus{background-color:#f8e593;transform:scale(1.15)}.links>a:focus,.see-btns>a:focus,input:focus,textarea:focus,video:focus{outline:1px solid #fc92a4;box-shadow:0 1px 20px 2px #fc92a4}.github,.linkedin,.youtube{height:16px;margin-bottom:-3px}.vtx-link{color:#facfd6;font-weight:600}.vtx-link:hover,.vtx-link:focus{color:#ffff8f}input,textarea{width:100%;padding:10px;border:1px transparent;box-sizing:border-box;margin-top:6px;margin-bottom:10px;resize:vertical;outline:none;border-radius:10px;background-color:#ffece6bf;box-shadow:0 1px 40px #0003;font-family:Fira Code,monospace;font-size:1em;color:#101417;transition:.4s}#message{min-height:150px;resize:none;overflow:auto}input:hover,textarea:hover,input:focus,textarea:focus{background-color:#f9d0cdf2}::placeholder{color:#52595e;opacity:1}.button{font-family:Fira Code,monospace;text-align:center;font-size:1.2em;color:#2a333a;background-image:linear-gradient(to right,#ff006680,#fc92a4cc,#fff0);background-color:#ffc;box-shadow:0 1px 40px #0003;border:none;padding:8px;margin-bottom:30px;width:100%;border-radius:10px;cursor:pointer;transition:.4s}.button:hover,.button:focus{background-color:#fff0ab;color:#000;transform:scale(1.015)}#sent-msg{font-family:Fira Code,monospace;font-size:1em;color:#ebccad;padding-bottom:10px;max-width:750px;display:none}@media only screen and (max-height: 750px) and (orientation: landscape){h1{font-size:35px;margin-top:10px;margin-bottom:10px}section{padding-left:20px;padding-right:20px;width:75%;max-width:none;font-size:.9em}.grid-item{width:190px;height:162px}.project-pics{width:190px}.display-project{height:auto}.display-project>h1{margin-left:15px}.close{margin-top:10px;margin-right:-10px}.gif-display{width:500px;margin-left:15px}}@media only screen and (max-height: 600px) and (orientation: landscape){nav{font-size:1em}.name{font-size:clamp(45px,5vw,100px);top:7px}.intro{font-size:clamp(16px,2vw,35px)}.bottom{bottom:12%}.flags{bottom:7px}.flag-button img{width:30px}h1{font-size:28px;margin-top:10px;margin-bottom:10px}section{padding-left:20px;padding-right:20px;width:80%;font-size:.9em}input,textarea{padding:6px;border-radius:7px;margin-top:5px;margin-bottom:5px;font-size:16px!important}#message{min-height:100px}.button{font-size:.9em;padding:6px;border-radius:7px;margin-bottom:15px}}@media only screen and (max-height: 440px) and (orientation: landscape){.name{font-size:clamp(35px,5vw,100px);top:7px}.fsdev,.tags{font-size:.6em}.flag-button img{width:25px}h1{font-size:25px;margin-top:5px;margin-bottom:5px}section{font-size:.8em}#about-section{font-size:.65em}input,textarea{padding:3px;border-radius:5px;margin-top:3px;margin-bottom:3px;font-size:16px!important}#message{min-height:70px}.button{font-size:.9em;padding:4px;border-radius:5px;margin-bottom:2px}}@media only screen and (max-height: 350px) and (orientation: landscape){.fsdev,.tags,.flag-button img,.display-project{opacity:0}#contact-section,#about-section,#projects-section{display:none}}@media only screen and (max-width: 1065px){.display-project{max-width:800px;width:800px;overflow-y:auto}.title-project{padding-left:30px}.gif-display{width:90%;display:block;margin:0 auto}.see-btns{width:90%;margin-left:auto;margin-right:auto}.txt-box{grid-column:1;grid-row:2;width:90%;height:auto;margin-top:5px;margin-left:auto;margin-right:auto;overflow:hidden;padding:0}.next{right:-3px}}@media only screen and (max-width: 850px){.grid-container{grid-template-columns:auto auto}.presentation{grid-template-columns:auto;scrollbar-gutter:stable both-edges}.title-project{padding-left:0}#projects-section,#about-section,.display-project{height:74vh!important;overflow-y:auto}section,.display-project{box-sizing:border-box}.display-project{max-width:auto;width:auto;padding:0 30px 10px}.display-project>h1{margin-left:0}.txt-box,.gif-display{width:70vw}.prev,.next{padding:4px;margin-top:0}.next{right:0}.prev{left:0}}@media only screen and (max-width: 580px){nav{font-size:16px}.name{font-size:clamp(45px,5vw,100px)}.intro{font-size:18px}.flags{gap:7rem}.flag-button img{width:30px}h1{font-size:28px;margin-top:10px;margin-bottom:10px}section{padding-left:20px;padding-right:20px;width:90%;font-size:.9em}.grid-container{grid-template-columns:auto}.grid-item{width:280px;height:200px;margin:12px 5 12px 5}.project-pics{width:280px}.title-project{font-size:28px}.close{margin-top:10px;margin-right:-10px;font-size:30px}.see-btns>a,.links>a{padding:7px;font-size:.9em}.github,.linkedin,.youtube{height:13px}input,textarea{padding:6px;border-radius:7px;margin-top:5px;margin-bottom:5px;font-size:16px!important}#message{min-height:100px}.button{padding:6px;border-radius:7px;margin-bottom:15px}}@media only screen and (max-width: 380px){nav,p,.see-btns{font-size:13px}.active:after,nav button:after{top:25px}.name{font-size:clamp(38px,5vw,100px)}.intro{font-size:16px}.title-project{font-size:22px}.grid-item{width:220px;height:170px}.project-pics{width:220px}}