@import "https://fonts.googleapis.com/css2?family=Rubik+Vinyl&display=swap";@import "https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";.header{z-index:1;background-color:#ccd5ae;justify-content:center;align-items:center;gap:20px;width:100%;height:auto;padding:1rem;transition:all 1s;display:flex;position:absolute}.header:hover{width:100%}.header .header_title{margin-right:145px}.header a{color:#462412;font-family:Rubik Vinyl;font-size:35px}.header_title h1{letter-spacing:.13em;color:#462412;font-family:Rubik Vinyl;font-size:40px;font-weight:400}.header .header_links ul{justify-content:center;align-items:center;gap:43px;display:flex}.header .header_links ul li{list-style:none}.header-hover-effect{background-color:#462412;border-radius:50%;width:45%;height:50px;position:absolute;bottom:0;transform:translateY(50%)}@media (width<=1024px){.header{gap:10px;padding:1rem}.header .header_title{margin-right:100px}.header a,.header_title h1{font-size:25px}.header .header_links ul{gap:20px}}@media (width<=320px){.logo{width:50px;height:50px}.logo img{width:50px;height:50px}.header .header_title h1{font-size:12px}.header .header_links ul{gap:5px}.header .header_links li a{font-size:12px}}.avocado{width:100px;position:absolute}@media (width<=1024px){.avocado{width:80px}}.background-screen{pointer-events:none;z-index:-1;background-color:#f9eac5;position:fixed;inset:0;overflow:hidden}.background-screen .paralax-avocado{width:20%;height:auto;position:absolute}.background-screen .avocado1{bottom:0;left:0;transform:translate(-20%,15%)}.background-screen .avocado2{bottom:0;left:50%;transform:translate(-20%,15%)}.background-screen .avocado3{bottom:0;right:0;transform:translate(20%,15%)}@media (width<=320px){.background-screen .paralax-avocado{width:30%}}.display-pannel_items{border:1px solid #827fe8;width:400px;min-width:300px;height:500px;min-height:300px;position:absolute;top:0;left:0}.display-pannel_items .display-pannel-bar{background-image:linear-gradient(90deg,#818181,#fff);border-bottom:1px solid #827fe8;justify-content:flex-end;align-items:center;width:100%;height:40px;padding-right:5px;display:flex}.display-pannel_items .display-pannel-bar .tab-title{place-items:center;gap:10px;width:100%;height:100%;margin-right:auto;padding-left:10px;display:flex}.display-pannel_items .display-pannel-bar .tab-title .panel-icon{width:25px;height:25px}.display-pannel_items .display-pannel-bar .tab-title h1{color:#000;text-transform:capitalize;font-size:16px;font-weight:700}.display-pannel_items .display-pannel-bar .tab-buttons{gap:5px;display:flex}.display-pannel_items .display-pannel-bar .tab-buttons button{cursor:pointer;background-color:#0000;border:1px solid #727171;border-radius:2px;justify-content:center;align-items:center;width:35px;height:35px;font-size:15px;display:flex;box-shadow:inset 1px 1px #fff,inset -1px -1px gray}.display-pannel_items .display-pannel-bar .tab-buttons button:hover{border:1px solid #232324;transform:scale(1.1)}.display-pannel_items .display-pannel_content{width:100%;height:calc(100% - 40px);overflow:hidden}.display-pannel-WorksAndProjects,.display-pannel-Tools,.display-pannel_items.display-pannel-Profile,.display-pannel-About{width:clamp(400px,100%,600px);height:500px}.display-pannel-About,.display-pannel-WorksAndProjects{width:750px;height:560px}@media (width<=1024px){.display-pannel-Chat{width:350px;height:460px;top:0;left:0}}.chat-content{flex-direction:column;width:100%;height:100%;display:flex}.chat-content .chat-content_header{background-color:#d9d9d9;border-bottom:1px solid #827fe8;justify-content:space-between;align-items:center;width:100%;height:30px;padding:0 10px;display:flex}.chat-content .chat-content_header h1{color:#000;width:100%;font-size:max(20%,14px);font-weight:700}.chat-content .chat-content_header button{border:1px solid #462412;border-radius:2px;width:200px;padding:2px;box-shadow:inset 1px 1px #fff,inset -1px -1px gray}.chat-content .chat-content_header button:hover{transform:scale(1.1)}.chat-content .chat-content_body{background-color:#e9edc9;flex:1;width:100%;height:calc(100% - 50px);overflow-y:auto}.chat-content .chat-content_body .chat-content__messages-container{flex-direction:column;gap:20px;width:100%;padding:10px max(5%,20px);display:flex}.chat-content .chat-content_body ul li{align-items:end;gap:10px;transition:all .5s;display:flex}.chat-content .chat-content_body ul li img{width:40px;height:40px}.chat-content .chat-content_body ul li p{color:#000;background-color:#d9d9d9;border-radius:10px;width:100%;height:max-content;min-height:50px;padding:20px;font-size:16px;font-weight:400}.chat-content .chat-content_body ul li p span{font-weight:700}.chat-content .chat-content_body ul li p a{overflow-wrap:break-word;word-break:break-word;max-width:100%}.chat-content .chat-content_body ul li .user{order:2}.chat-content .chat-content_body ul li:hover{filter:brightness(.85)}.chat-content .chat-content_actions form{background-color:#d9d9d9;border-top:1px solid #827fe8;gap:20px;width:100%;height:50px;padding:10px;display:flex}.chat-content .chat-content_actions form .chat-content__input{border:1px solid #827fe8;outline:none;flex-grow:1;padding:5px 10px;font-size:16px}.chat-content .chat-content_actions form .chat-content__input:focus{border:1px solid #674db6;border-radius:2px}.chat-content .chat-content_actions form .chat-content__input:hover{border:1px solid #674db6;transform:scale(1.01)}.chat-content .chat-content_actions form .chat-content__button{background-color:#d9d9d9;border:1px solid #827fe8;border-radius:2px;width:80px;height:auto;font-size:16px;box-shadow:inset 1px 1px #fff,inset -1px -1px gray}.chat-content .chat-content_actions form .chat-content__button:hover{border:1px solid #674db6;transform:scale(1.1)}@media (width<=1024px){.chat-content .chat-content_actions form{gap:10px;padding:5px}.chat-content .chat-content_actions form .chat-content__button{width:60px;font-size:14px}.chat-content .chat-content_header h1{font-size:12px}.chat-content .chat-content_header button{width:150px;height:20px;padding:1px;font-size:10px}}.task-items{gap:10px;width:max-content;display:flex}.task-items .taskbar_button{justify-content:center;align-items:center;gap:5px;width:max-content;padding:0 10px;display:flex}.start-toolbar{z-index:-1;background-color:#ebbb8bc8;grid-template-columns:20px 8fr;gap:10px;width:300px;height:300px;padding:20px 0;display:grid;position:absolute;top:0;left:0;transform:translate(1%,50%)}.start-logo{background-color:#e9edc9bd;width:20px;height:100%}.task-container{flex-direction:column;gap:5px;width:100%;height:100%;display:flex}.start-toolbar .taskbar_button{background-color:#d9d9d9;border:1px solid #827fe8;justify-content:flex-start;align-items:center;gap:5px;width:220px;height:100px;padding:0 20px;display:flex}.start-toolbar .taskbar_button:hover{border:2px solid #674db6;transform:scale(1.1)}.taskbar{z-index:999;background-image:linear-gradient(90deg,#ebbb8b,#f9eac5);gap:10px;width:100%;height:50px;padding:5px 0 0 5px;display:flex;position:fixed;bottom:0}.taskbar .taskbar_button,.taskbar .start-button{background-color:#d9d9d9;border:1px solid #827fe8;border-radius:2px;height:40px;box-shadow:inset 1px 1px #fff,inset -1px -1px gray}:is(.taskbar .taskbar_button,.taskbar .start-button) img{width:25px;height:25px}:is(.taskbar .taskbar_button,.taskbar .start-button) span,:is(.taskbar .taskbar_button,.taskbar .start-button) h1{color:#000;font-size:15px;font-weight:700}:is(.taskbar .taskbar_button,.taskbar .start-button):hover{background-color:#827fe8;border:1px solid #674db6}:is(.taskbar .taskbar_button,.taskbar .start-button):hover span,:is(.taskbar .taskbar_button,.taskbar .start-button):hover h1{color:#d9d9d9}.taskbar .taskbar_button,.taskbar .start-button{cursor:pointer}.taskbar .start-button{justify-content:center;align-items:center;gap:5px;width:100px;display:flex}.taskbar .time{color:#000;align-items:center;gap:5px;margin-left:auto;margin-right:15px;font-size:15px;font-weight:700;display:flex}.taskbar .time .taskbar-time-icon{align-items:center;display:flex}.taskbar .time .taskbar-time-icon img{width:20px;height:20px;margin-right:5px}.taskbar .time:hover{filter:brightness(.85);color:#646363}.window-pannel__overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:-99;background:#000000bf;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.window-pannel__image-container{align-items:center;width:40%;height:80%}.window-pannel__image{object-fit:cover;width:100%;height:auto}.window-pannel__overlay .window-pannel__image-title{text-align:center;color:#fdfdfd;width:100%;font-family:Roboto Mono;font-size:50px;font-weight:700}.lenis{scrollbar-width:none;-ms-overflow-style:none;width:100%;height:100%;overflow-y:auto}.window-pannel{width:100%;height:100%;position:fixed;overflow:hidden}*{box-sizing:border-box;margin:0;padding:0;font-family:Roboto Mono,Helvetica,sans-serif}button{cursor:pointer;transition:all .3s}.profile-content{background-color:#e9edc9;flex-direction:column;width:100%;height:100%;display:flex}.profile-content .profile-image{background-color:#1d8243;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.profile-content .profile-image video{object-fit:contain;width:clamp(200px,100%,1000px);height:auto}.profile-content .profile-image img{object-fit:cover;width:clamp(200px,100%,500px);height:auto}.profile-content .profile-info{background-color:#fff;grid-template-columns:repeat(3,1fr);justify-content:center;align-items:center;gap:20px;height:clamp(50px,20%,100px);padding:5px;display:grid}.profile-content .profile-info div{border-radius:2px;flex-direction:column;justify-content:center;align-items:center;padding:5px;transition:all .3s;display:flex;box-shadow:inset 1px 1px #fff,inset -1px -1px #ababab}.profile-content .profile-info div:hover{color:#462412;border:1px solid #827fe8;transform:scale(1.04)}.works-and-projects{background-color:#e9edc9;gap:20px;width:100%;height:100%;padding:20px 50px;display:flex}.work-info-item-container{grid-template-rows:8fr 1fr;gap:10px;width:100%;height:100%;display:grid}.work-info-item-container a{width:100%;height:min(100%,650px);transition:all .5s}.work-info-item-container a:hover{filter:drop-shadow(0 0 5px #000);transform:scale(1.04)}.work-info-item-container a:hover+.work-info-item{filter:drop-shadow(0 0 5px #ebbb8b);transform:scale(1.04)}.works-and-projects .work-info-image-container{scrollbar-width:none;-ms-overflow-style:none;background-color:#c20502;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden auto}.works-and-projects .work-info-image-container::-webkit-scrollbar{display:none}.works-and-projects .work-info-image-container img{object-fit:cover;width:80%;height:auto}.works-and-projects .work-info-item{flex-direction:column;justify-content:center;align-items:center;gap:10px;width:100%;height:100%;transition:all .5s;display:flex}.works-and-projects .work-info-item h1{color:#000;text-align:center;width:100%;font-size:16px;font-weight:700}.works-and-projects .work-info-item p{text-align:center}.about-content{--about-content-color:#462412;--about-connect-color:#596c3e;background-color:#e9edc9;flex-direction:column;align-items:center;width:100%;height:100%;padding:10px 20px 30px;display:flex}.about-content .title{width:100%}.about-content .title h1{text-align:center;color:#000;font-family:Roboto mono;font-size:40px;font-weight:700}.about-content .about-content-layout{flex-direction:column;gap:20px;width:100%;height:max-content;display:flex}.about-content .about-content_item{width:100%;max-width:900px;height:100%;margin:auto}.about-content .about-content_item .about-container__tab,.about-content .about-content_item .about-connect-tab{align-items:center;width:100%;height:30px;padding:0 20px;display:flex}:is(.about-content .about-content_item .about-container__tab,.about-content .about-content_item .about-connect-tab) span{color:#fff;font-family:Roboto mono;font-size:20px;font-weight:400}.about-content .about-content_item .about-connect-tab{background-color:#596c3e;border:1px solid #596c3e}.about-content .about-container{border:1px solid var(--about-content-color)}.about-content .about-container .about-container__tab{border:1px solid var(--about-content-color);background-color:var(--about-content-color)}.about-content .about-container .about-container__content{flex-direction:column;justify-content:start;align-items:center;width:100%;height:100%;padding:20px 30px;display:flex;container:text_container/inline-size}.about-content .about-container .about-container__content p{color:#000;text-align:center;width:min(100%,800px);font-family:Roboto mono;font-size:16px;font-weight:400;transition:font-size .5s}@container text_container (width>=800px){.about-content .about-container .about-container__content p{font-size:25px}}@container text_container (width>=800px){p{font-size:50px}}.about-content .about-connect{border:1px solid var(--about-connect-color);max-height:300px}.about-content .about-connect .about-container__tab{border:1px solid var(--about-connect-color);background-color:var(--about-connect-color)}.about-content .about-connect-content{flex-direction:column;justify-content:start;align-items:center;gap:5px;width:100%;padding:20px;display:flex;container:connect_container/inline-size}.about-content .about-connect-content .about-connect-apps{flex-direction:row;justify-content:center;align-items:center;gap:30px;display:flex}.about-content .about-connect-content .about-connect-apps a{color:#000;justify-content:center;align-items:center;gap:10px;text-decoration:none;transition:all .5s;display:flex}.about-content .about-connect-content .about-connect-apps a:hover{color:var(--about-connect-color);transform:scale(1.2)}.about-content .about-connect-content .about-connect-apps a span{font-family:Roboto mono}.about-content .about-connect-content .about-connect-apps img{width:50px;height:50px}.about-content .about-connect-content p{color:#000;text-align:center;font-family:Roboto mono;font-size:20px;font-weight:400}@container connect_container (width>=800px){.about-content .about-connect-content p{margin-top:20px;font-size:25px;font-weight:500}}.about-content .status-bar{padding:5px 10px;position:absolute;bottom:0;left:0}.about-content .status-bar span{color:#000;font-family:Roboto mono;font-size:15px;font-weight:700}.about-container__name{text-transform:uppercase;color:#596c3e;font-family:Roboto mono;font-weight:800}.about-container__skills{text-transform:uppercase;color:#596c3e;font-family:Roboto mono;font-weight:700}.tools-content{background-color:#e9edc9;grid-template-rows:minmax(0,1fr);grid-template-columns:1fr 1fr;gap:min(10px,1vw);width:100%;height:100%;margin:0 auto;padding:20px;display:grid}.tools-content .tools-contents{border:1px solid #827fe8;grid-template-rows:30px minmax(350px,1fr);align-items:center;display:grid;overflow:hidden;box-shadow:0 5px 15px #00000059}.tools-content .tools-content__tab{background-color:#727171;gap:10px;width:100%;height:100%;padding:5px;display:flex}.tools-content .tools-content__tab img{width:16px;height:16px}.tools-content .tools-content__tab h1{color:#fff;text-align:center;letter-spacing:1px;font-family:Helvetica,sans-serif;font-size:15px;font-weight:700}.tools-content .tools-contents .tools-content-continer{background-color:#d9d9d9;width:100%;height:100%;overflow:hidden}.tools-content-continer .tools-content__container{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);place-items:center;gap:10px;width:100%;height:100%;padding:20px;display:grid;position:relative}.tools-content img{object-fit:contain;width:100%;min-width:0;height:100%;min-height:0;transition:all .5s;display:block}.tools-content h1{color:#000;text-align:center;font-family:Roboto Mono;font-size:11px;font-weight:400;transition:all .5s}.tools-content__lang-and-frame .language-item,.tools-content__tool .tool-item{cursor:pointer;flex-direction:column;align-items:center;gap:5px;width:100%;min-width:0;height:100%;min-height:0;padding:10px;transition:all .5s;display:flex}:is(.tools-content__lang-and-frame .language-item,.tools-content__tool .tool-item):hover{transform:scale(1.1)}:is(.tools-content__lang-and-frame .language-item,.tools-content__tool .tool-item):hover h1{letter-spacing:1px;font-weight:700}:is(.tools-content__lang-and-frame .language-item,.tools-content__tool .tool-item):hover img{filter:drop-shadow(0 0 15px var(--bg-color))}.language-item__mastery{text-align:center;margin-bottom:10px}.language-item.active,.tool-item.active{z-index:10;background-color:#d9d9d9;border-radius:0;width:100%;height:100%;position:absolute;inset:0;box-shadow:inset 0 0 15px 5px #00000080}:is(.language-item.active,.tool-item.active):hover{transform:scale(1)}:is(.language-item.active,.tool-item.active) h1{letter-spacing:1px;font-size:20px;font-weight:700}.tool-item{cursor:pointer;flex-direction:column;align-items:center;gap:5px;width:100%;min-width:0;height:100%;min-height:0;padding:10px;transition:all .5s;display:flex}@property --start{syntax:"<percentage>";inherits:false;initial-value:0%}@property --end{syntax:"<percentage>";inherits:false;initial-value:0%}.preload-avocado{--start:0%;--end:0%;width:50px;height:50px;-webkit-mask-image:conic-gradient(transparent 0 var(--start), #000 var(--start) var(--end), transparent var(--end) 100%);-webkit-mask-image:conic-gradient(transparent 0 var(--start), #000 var(--start) var(--end), transparent var(--end) 100%);mask-image:conic-gradient(transparent 0 var(--start), #000 var(--start) var(--end), transparent var(--end) 100%);animation:3s linear infinite sweep-clockwise}@keyframes pie-reveal{0%{--p:0%}50%{--p:100%}to{--p:0%}}@keyframes sweep-clockwise{0%{--start:0%;--end:0%}50%{--start:0%;--end:100%}to{--start:100%;--end:100%}}.preloader{z-index:9999;width:100%;height:100%;position:fixed}.layer-top,.layer-bottom{background-color:#ccd5ae;position:absolute}.layer-top{width:100%;height:50%;top:0;left:0}.layer-bottom{width:100%;height:50%;bottom:0;left:0}.layer-middle{z-index:1;width:50px;height:50px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.loading-layer{width:100px;position:absolute;top:5%;left:50%;transform:translate(-50%,-50%)}
