@font-face { 
    font-family: 'Fire Code'; 
    src: url('FiraCode.ttf'); 
}

:root {
    --bg_1: rgb(25 28 35);
    --bg_1_hsl: hsl(220, 13.43%, 13.1%);
    --bg_1_hsl_15: hsl(220, 13.43%, 15%);
    --bg_1_hsl_13: hsl(220, 13.43%, 13%);
    --bg_1_hsl_12: hsl(220, 13.43%, 12%);
    --bg_1_hsl_11: hsl(220, 13.43%, 11%);
    --bg_1_hsl_10: hsl(220, 13.43%, 10%);

    /* TextColor */
    --co_1: #d5d5d5;
    --co_2: #aaaaaa;
    --co_3: #7a7a7a;
    --co_4: #4d4d4d;
    --co_5: #2f2f2f;
}
body{
    background-color: var(--bg_1);
    color: white;
}
main{
    padding: 0 25px;
    max-width: 900px;
    font-family: 'Fire Code';
}

.bg_1{background-color: var(--bg_1);}
.bg_1_hsl_15{background-color: var(--bg_1_hsl_15);}
.bg_1_hsl_13{background-color: var(--bg_1_hsl_13);}
.bg_1_hsl_12{background-color: var(--bg_1_hsl_12);}
.bg_1_hsl_11{background-color: var(--bg_1_hsl_11);}
.bg_1_hsl_10{background-color: var(--bg_1_hsl_10);}

.co_1{color: var(--co_1);}
.co_2{color: var(--co_2);}
.co_3{color: var(--co_3);}
.co_4{color: var(--co_4);}
.co_5{color: var(--co_5);}

.co_bg_1_hsl_15{color: var(--bg_1_hsl_15);}

.catus_color{color: #68aa71;}

.df{ display: flex; } .dg{ display: grid; } .f13{ font-size: 13px; } .ml45{ margin-left: 45px; }

.m01 div{
    padding: 5px 8px;
    background-color: #8080801c;
    border-radius: 5px;
    font-size: 12px;
}
.m01b div{
    position: relative;
    padding: 5px 8px;
    background-color: #8080801c;
    border-radius: 3px;
    font-size: 13px;
    min-width: 7.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
}

.m02{
    width: 325px;
    aspect-ratio: 16/9;
    box-shadow: 3px 3px 17px #00000052;
    overflow: hidden;
    background-color: #1d2026;
}
.m02_01{
    filter: blur(10px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.4;
}
.m02b{
    box-shadow: none!important;
}
.m02c{
    width: 395px!important;
    aspect-ratio: 19/9!important;
    height: 187.1px;
}

.m03{
    background-color: white;
}
.m04_gen{ background-color: var(--bg_1_hsl_10); }
.m04_php{ color: #8993be!important; background-color: rgb(137 147 190 / 11%)!important; }
.m04_vue{ color: rgb(65 184 131)!important; background-color: rgb(65 184 131 / 11%)!important; }
.m04_html_css_div{
    background: -webkit-linear-gradient(333deg, rgb(255 131 92 / 9%), rgb(41 101 241 / 12%));
}
.m04_js{ color: rgb(177, 166, 95) !important; background-color: rgba(163, 153, 89, 0.19) !important; }
.m04_sql{ color: rgb(0 117 143)!important; background-color: rgb(0 117 143 / 11%)!important; }
.m04_node{ color: rgb(104 160 99)!important; background-color: rgb(104 160 99 / 11%)!important; }
.m04_electron{ color: rgb(160 235 249)!important; background-color: rgb(160 235 249 / 11%)!important; }
.m04_html_css{
    background: -webkit-linear-gradient(328deg, rgb(255 131 92) 52%, #2965f1 48%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}
.m04_python{
    background: -webkit-linear-gradient(113deg, #ffde57 50%, #4584b6 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}
.m04_ui_ux{ color: rgb(109, 95, 209) !important; background-color: #6b5dcd33!important; }
.m05{
    background-color: rgb(0 0 0 / 17%);
    padding: 3px 5px;
    border-radius: 3px;
    font-size: 12px;
    line-height: 22px;
}
.mtk7 { color: #d19a66; }

.m06{background-color: var(--bg_1_hsl_12); border: 1px solid #474747;}
.m06:hover{
    background-color: var(--bg_1_hsl_15);
}
.m07_bg_proj{
    top: var(--outside);
    left: var(--outside);
    right: var(--outside);
    bottom: var(--outside);
    --outside: -33px;
}
.m08{
    padding-bottom: 1.5em;
    max-width: 53em;
}
.m09{
    max-width: 30em;
}

.ovillo{ right: -20px; bottom: 10px; transition: right 0.5s ease, bottom 0.5s ease; }
.ovillo_text{ top: -40px; width: 8em; }
.ovillo_img{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDIgNzkuZGJhM2RhMywgMjAyMy8xMi8xMy0wNTowNjo0OSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjcgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNC0wOS0wMVQxMTowMjozNC0wNDowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDktMDFUMTE6MTU6MzgtMDQ6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDktMDFUMTE6MTU6MzgtMDQ6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjc2NTUxMWU4LTQ4ZDgtN2I0ZC1hZjY0LTc2NDk5NGQwMDEyYyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjIxZmQzOTg2LTk2YzctNDU0Yi1hZjkyLThhNjYwMmZhNzJkOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjBhNDk2ZWIyLWM5MmUtNDc0OC04ZDhiLTEzZThlNzU4MTc5ZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MGE0OTZlYjItYzkyZS00NzQ4LThkOGItMTNlOGU3NTgxNzllIiBzdEV2dDp3aGVuPSIyMDI0LTA5LTAxVDExOjAyOjM0LTA0OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuNyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjhlNGUxNTljLWQ4NzUtMmM0My1hMWY0LTZhMWMyZTcwYzBlYSIgc3RFdnQ6d2hlbj0iMjAyNC0wOS0wMVQxMTowOTowOC0wNDowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjcgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjU1MTFlOC00OGQ4LTdiNGQtYWY2NC03NjQ5OTRkMDAxMmMiIHN0RXZ0OndoZW49IjIwMjQtMDktMDFUMTE6MTU6MzgtMDQ6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS43IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7SuZw8AAADiUlEQVRIiaVVz0tUURT2H2jeKAbhgLjoBxFtaicab/4DoVXQot6AVkg/iCBTcazNm0UOWSoFLVxkONAqW/SDNFrUKhdtkqI2YREzOLaoReTtft+55/p0psnqwePed9+95zvnO985t6lpC8+2XPw2O1kxqVxsMAZ2DKcqZitnGz5BFJvR+TVruEDDqQiGyxYA32XOU1HBZPJLpm3kzd8DRqUqvc7PGxoNCSLGAweaPjFmMmenuQ9rbSNLWwPKlVZNbrZqIrwWiJFEQlHKRbB7+BFHfIMyjBkLACcQ0R/BIgvCKOyBaHbVRrLGOYyl+4oc91954SKLPVjGGQd1mUbUwSjCzmG0BhCR0OWMqVFHm0aGb/yTaCx1+F9PFDAIY4gEHAMIVAEEc8lF7Olh0vHtcgTvg0gFUeFanVxUeRjRyCv5aOktEhiHgkQENBTFfoTn6gj2hZN1gFr6xkgPwJQ2gAQuN1jfOThnWk/e8ELYdWmOxhX0YOG1ANt/ePeNPFsHCSfKPdgIZcEAPL/48AeTrlGo2tRr0BU6xeG/5oeFavc0W5Hg24NkXWiai70Ds74IVdIp5qvqHCmI4mhQjYswuq4vMyr9VwMC70DLmfvfLIjxURy4PJdQnEg80Lw45THh1o7QF3sFJkDWWwVbyYIxQ09/0hhogkeIgHNKXNaFKlFYdqriaZPohLb1nNiFrvFleoI8jLpctJ+7Tc9zTtZaqDB2dOazyD2KfZ2ofLWB4swGdWHD8dJ31gUPIdkloUgTz4igQC+CgnNC5nJO9qPyW/qnN4IgH6AJoXcWP/hDpMwZ0RqiAh1Y4PhnPuy7/dSEaT1d4npNe8mSKsOQ28/fNR0X7nF++NY7SbarHSoM+YhUba6uXB588qM6FY88HLnzleE228JUlago1GDgkh05IcBYZ/G9ALjqp4jq9S5S5VqDXkzhpPQnaRNlT5EkP2YEvgATtOF8DQAeqApj97WPK7pRL6vQ15EU2KGrr1yvElq0lehaXYAkiEoad0dz75jUAOun4C8uvDsHH/Cbhl2N7Bl+3PiyQoVvVFvFdNsWAS+7xz/5DtvGS2nJ3x0E3Vzdv43kielAXjavhze/HMOoAC39M/R6x8BLAnUMLaZrHV5jOUCtvJMWTE+CMrOCiJLU/c+jQPnnJl3zI+FJ+K8Aed6qtLPY2BN3/W4e8y7aJCXea/Y+zleStn4Bmx2lofxkJbYAAAAASUVORK5CYII="); background-repeat: no-repeat; background-position: center; }
@keyframes rodar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



@keyframes test {
    0% {
        font-size: 5px;
        opacity: 0;
        bottom: 0px;
        left: 0px;
    }
    100% {
        font-size: 15px;
        opacity: 1;
        bottom: var(--height);
        left: var(--width);
    }
}
.zzz_block {
    --width: 48px;
    --height: 48px;

    width: var(--width);
    height: var(--height);

    top: -13px;
    right: -36px;
}

.z_anim { font-size: 1rem; font-weight: bold; position: absolute; animation: moveZzz 3s infinite linear; transition: all 0.1s; opacity: 0; }
.z_anim:nth-child(1) { animation-delay: 0s; }
.z_anim:nth-child(2) { animation-delay: 1s; }
.z_anim:nth-child(3) { animation-delay: 2s; }

@keyframes moveZzz { 0% { transform: translate(0, 30px) scale(0.4); opacity: 0; } 15% { transform: translate(15px, 25px) scale(0.45); opacity: 0.3; } 30% { transform: translate(30px, 15px) scale(0.5); opacity: 0.5; } 50% { transform: translate(20px, 5px) scale(0.7); opacity: 0.65; } 60% { transform: translate(10px, -2px) scale(0.85); opacity: 0.75; } 70% { transform: translate(7px, -7px) scale(1); opacity: 0.8; } 85% { transform: translate(25px, -20px) scale(1.2); opacity: 0.6; } 100% { transform: translate(50px, -30px) scale(1.5); opacity: 0.1; } }











@keyframes fadeIn {
    0% { opacity: 0.2; }
    100% { opacity: 1; }
  }


.ico_ext_link {
    display: inline-block;
    width: 11px;
    height: 11px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4zM11 5H3v16h16v-8h-2v6H5V7h6z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* text cursor blink animation */
@keyframes blink {
    0% { opacity: 0; }
}
#des_txt_mark_1 {
    animation: blink .8s steps(2) infinite;
}


.pelucaPallaso{
    background-image: url('peluca_pallaso.png');
    width: 6em;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: -2em;
    height: 6em;
    left: 3.4em;
}

code{
  background-color: var(--bg_1_hsl_15);
  padding: 2px 5px;
  margin: 0px 5px;
  border-radius: 2px;
}