@import url(https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap);.route-enter-from{opacity:0;transform:translateX(100px)}.route-enter-active{transition:all .3s ease-out}.route-leave-to{opacity:0;transform:translateX(-100px)}.route-leave-active{transition:all .3s ease-in}*{box-sizing:border-box;margin:0;padding:0}html{height:100%;scroll-behavior:smooth}body{font-family:Nunito,sans-serif}a{text-decoration:none}p{margin:.3em 0}button{background:transparent;border:none;color:#fff;padding:.5em;cursor:pointer}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{box-shadow:0 4px 30px rgba(0,0,0,.1);background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}::-webkit-scrollbar-thumb{background:#964b00}.material-symbols-outlined{font-size:90px}body{margin:0;padding:0;background:#ffbe7c;overflow-x:hidden}#app,.heightit,body{height:100%}.navv,nav{position:fixed;width:100%;top:0;color:#000;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:9999}nav{left:0}.navv{display:none}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1em 0;width:80%;margin:0 auto;max-width:1200px}.bottom-nav{position:fixed;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);bottom:0;width:80%;max-width:500px;left:50%;transform:translate(-50%,-50%);border-radius:15px;padding:.5em 1em;border:1px solid rgba(0,0,0,.2);z-index:99999}.bottom-nav i,.bottom-nav svg{color:#964b00;cursor:pointer;font-size:20px}.active-link,.bottom-nav i:hover{background:linear-gradient(90deg,#f32170,#ff6b08,#cf23cf,#ed4);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.nav-container{justify-content:center;gap:40px}.links,.nav-container{display:flex;align-items:center}.links{justify-content:space-between;gap:50px}.menu-btn{display:flex;align-items:center;gap:10px}.menu-btn i{vertical-align:middle}.side-nav{position:fixed;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);right:-100%;width:100%;height:100%;top:0;transition:right .4s ease;z-index:9999999!important}.show{right:0}.show1{display:block}.animate5{margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;animation:slide-down .3s ease .5s backwards}@keyframes slide-down{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}.animate5 img{-o-object-fit:contain;object-fit:contain;width:100%;height:500px}.myLogo{width:100px;height:30px}.side-nav .navbar{color:#fff}.scrool{overflow-y:scroll;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:15em;padding-bottom:2em}.closed{background:#964b00;color:#fff;border-radius:8px;cursor:pointer}.closed i{vertical-align:middle}.side-nav_links{display:flex;width:80%;margin:0 auto;gap:30px}.flex-links{display:flex;gap:20px;justify-content:left;align-items:center}.side-nav_links a{color:#fff}.home{display:flex;flex-direction:column;height:100vh;justify-content:center}.boxes{position:absolute;width:30px;height:30px;box-shadow:0 2px 2px 0 #00000040;border-radius:10px;top:-15px;right:-1%;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #964b00}.rotate{animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(1turn)}to{transform:rotate(0deg)}}.home-container{color:#fff;padding:2em 0;border-radius:20px}.cont{width:80%;margin:0 auto;max-width:1200px;border-radius:12px}.hello{font-size:24px;font-weight:500}.temi{color:#964b00;font-size:64px;font-weight:700;margin:0}.myLinks{display:flex;justify-content:space-between;width:30%;margin-bottom:1em;margin-top:1em;margin-right:1em}.myLinks i{padding:.3em;border-radius:50%;background:linear-gradient(90deg,#d32065,#c8621e,#a421a4,#ed4);-webkit-text-fill-color:transparent;-webkit-background-clip:text;transition:all .2s ease;margin-right:.3em}.myLinks i:hover{border:1px solid #a421a4}.home-container p:last-child{font-size:14px;margin-top:1em}.image{position:relative}.home-container img{position:relative;width:100%;height:auto}.stack{position:absolute;top:38%;left:-30%;padding:1em;border-radius:20px;background:#0c111a;border:1px solid #0f2f76;box-shadow:0 4px 4px 0 #00000040;width:400px;height:200px}.img-flex,.stack p{margin-bottom:.5em}.img-flex{display:flex;align-items:center;gap:10px}.img-flex img{width:42px;height:40px}.home-btn{padding:0 2em;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);width:50%;max-width:240px;margin-left:0;border-radius:12px;transition:border .2s}.home-btn button{padding:1em .5em;border:none;background:linear-gradient(90deg,#f32170,#ff6b08,#cf23cf,#ed4);-webkit-text-fill-color:transparent;-webkit-background-clip:text;border-radius:12px;font-size:16px;width:100%}.home-btn:hover{border:1px solid #000}.about,.about1{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh}.about-container{justify-content:center}.about-container,.about-container1{width:80%;margin:0 auto;max-width:1200px;display:flex;align-items:center}.about-container1{justify-content:space-between}.about-image{width:45%;height:100%;background:url(/img/011.6e250e3d.jpg);background-repeat:no-repeat;background-size:cover;border-radius:10px;background-position:50%}.greetings{width:45%;color:#964b00;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);height:auto;border-radius:20px;padding:1em}.skill-class{margin-top:2em;width:100%}.skill-class h1{font-size:25px;text-align:center}.welcome{background:#964b00;color:#ffbe7c;padding:1em;border-radius:10px}.skill-class p{font-size:50px;transition:all .2s ease}.skill-class span{display:none;transition:all .2s ease;position:absolute;bottom:-10px;left:50%;transform:translate(-50%,-50%);font-size:12px!important}.skill-class p:hover{font-size:60px;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.skill-class p:hover span{display:block}.skill-class p{width:100%;text-align:center;position:relative}.grid-container{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}.project{margin-top:7em}.project-container{display:grid;grid-template-columns:repeat(3,1fr);-moz-column-gap:20px;column-gap:20px;row-gap:20px;padding-bottom:5em;width:80%;margin:0 auto;max-width:1200px}.flexBtn{display:flex;justify-content:left;gap:20px}.flexBtn button{background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:5px;max-width:200px}.build,.flexBtn button{padding:.3em;width:30%;color:#964b00}.build{border:1px solid #fff;border-radius:5px;text-align:center}.build span{font-size:10px}.explain{color:#964b00}.image-cont{background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:12px}.image-cont,.image-cont img{width:100%;position:relative}.image-cont img{height:auto}.explain{padding:1em}.explain p:last-child{font-size:12px}.flexBtn{padding:0 1em 1em 1em}.profile-image{text-align:center}.profile-image img{width:150px;height:150px;border-radius:50%;-o-object-fit:cover;object-fit:cover;margin:auto}.the-text{text-align:center}.the-text p:first-child{font-size:30px;font-weight:700;margin-top:.5em;margin-bottom:.5em}.link-right{top:100px;right:10px}.link-left,.link-right{position:fixed;background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:1em .5em;border-radius:12px}.link-left{bottom:100px;left:10px}.left,.right{display:flex;flex-direction:column;gap:10px}.left p,.right p{position:relative;color:#964b00}.right span{left:0}.left span,.right span{visibility:hidden;opacity:0;position:absolute;transition:all .2s ease}.left span{right:0}.right p:hover span{visibility:visible;opacity:1;left:-90px}.left p:hover span{visibility:visible;opacity:1;right:-90px}.nav-btn{color:#fff}.stacked{display:flex;flex-direction:column;gap:1em}.sibn,.stacked{flex:1}.ojo,.pplug,.sibn{background:#ffbe7c;padding:1em;border-radius:12px;color:#964b00}.ojo p:first-child,.pplug p:first-child,.sibn p:first-child{font-family:Space Grotesk;font-size:20px;font-style:normal;font-weight:400;line-height:28px;margin-bottom:1em}.ojo p:last-child,.pplug p:last-child,.sibn p:last-child{font-size:24px;font-style:normal;font-weight:700;line-height:24px}@media only screen and (max-width:899px){.hello{font-size:20px;font-weight:500}.image,.links{display:none}.home{display:flex;flex-direction:column;height:100vh;justify-content:center}.home-btn,.home-container{padding:0}.temi{font-size:30px}.text{width:100%}.about{padding-top:1.8em}.about,.about-container{height:100vh}.about-container1{justify-content:center;height:100vh;flex-direction:column;gap:10px;padding-top:5em;padding-bottom:5em}.skill-class{margin-top:1em}.skill-class p{font-size:30px}.about-image{width:100%;height:150px}.greetings{width:100%;height:auto;font-size:12px;font-weight:700}.skill-class span{position:static;display:block;transition:all .2s ease;transform:translate(0);font-size:12px!important}.project{margin-top:100px}.project-container{width:80%;margin:0 auto;max-width:1200px;grid-template-columns:repeat(1,1fr);row-gap:20px;padding-bottom:5em}.image-cont{background-color:hsla(0,0%,100%,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:12px}.image-cont,.image-cont img{width:100%;position:relative}.image-cont img{height:auto}.explain{padding:1em}.explain p:last-child{font-size:12px}.flexBtn{padding:0 1em 1em 1em}.align{display:none}.gapp{margin-top:2em}.bottom-links{background:#964b00;color:#ffbe7c;width:60%;margin:0 auto;border-radius:12px;padding:.5em 1em;display:flex;justify-content:space-between;font-size:16px}.ojo p:first-child,.pplug p:first-child,.sibn p:first-child{font-family:Space Grotesk;font-size:16px;font-style:normal;font-weight:400;line-height:24px}.ojo p:last-child,.pplug p:last-child,.sibn p:last-child{font-size:20px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-.4px}.side-nav_links{display:flex;flex-direction:column;width:80%;margin:0 auto;gap:30px;margin-top:2em}.scrool{overflow-y:scroll;height:100%;display:block;padding-top:3em;padding-bottom:2em}.the-text p:first-child{font-size:20px}.about1{width:100%;display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}}@media only screen and (min-width:900px){.menu-btn{display:none}.myLinks{width:100px}.bottom-links,.gapp{display:none}}