.containerModal{position:fixed;top:0;left:0;width:100%;height:100%}.modal{width:98%;height:fit-content;max-width:500px;background-color:#3c3c3ceb;margin:10px auto;border-radius:10px}.modal2{width:98%;overflow:hidden;height:fit-content;max-width:500px;background-color:#3c3c3ceb;margin:10px auto;border-radius:10px}.modal3{width:98%;overflow:hidden;height:fit-content;max-width:500px;background-color:#3c3c3ceb;margin:10px auto;border-radius:10px;padding:10px}.backdrop{position:fixed;background-color:#00000083;z-index:-1;top:0;left:0;width:100%;height:100%}.menuModalBoxHeader{padding:5px;display:flex;justify-content:space-between;align-items:center}.menuModalBoxBody{display:flex;justify-content:space-around;width:100%;height:100%;padding:10px}.closeMenuIconMobile{width:32px;height:32px;color:#5ec300}.closeMenuBtnMobile:hover{background-color:#341088f3}.closeMenuBtnMobile{margin:5px;display:flex;justify-content:center;align-items:center;cursor:pointer;width:35px;height:35px;border:none;border-radius:5px;background-color:transparent;-webkit-user-select:none;user-select:none}.progressSongBar{margin:auto;width:100%;height:5px;border-radius:5px;background-color:#000}.divContainerBtnsTiltle{padding:10px;display:flex;align-items:center}.btnPlayPause{color:#fff;display:flex;justify-content:center;align-items:center;cursor:pointer;width:50px;height:50px;border-radius:15px;background-color:#5ec300;box-shadow:#1d015d 0 0;animation:pulse 1.2s;border:none;transition:.3s ease-in-out}.btnPlayPause:hover{transform:scale(1.05)}.prevOrNextBtn{cursor:pointer;margin:0 5px;width:40px;height:40px;border-radius:12px;border:none;background-color:#fff;transition:.3s}.prevOrNextBtn:hover{transform:scale(1.05)}.prevOrNextImg{width:20px;height:20px}.NavCont{height:60px;position:fixed;width:100vw;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:15px}.NavsubCont{display:flex;align-items:center}@font-face{font-family:Batangas;src:url(/assets/Batangas-Bold-DC5Hme8y.woff2) format("truetype")}.Navlogo{color:#5ec300;font-family:Batangas;font-size:25px}.menuIconMobile{width:40px;border-radius:5px;margin-left:5px;background-color:transparent;cursor:pointer}.menuIconMobile:hover{background-color:#341088f3}.navLinkNav{text-decoration:none}.navLinkNav:hover .NavButton.unSelected{background-color:#341088f3}.NavButton{margin-left:10px;font-size:15px;color:#5ec300;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;background-image:linear-gradient(to right,#70a52a,#70a52a 0%);background-size:0% 2px;background-repeat:no-repeat;border-radius:6px;padding:5px}.NavButton.selected{cursor:default;background-size:100% 2px;background-position:left bottom;transition:background-size .5s ease;animation:blink .3s}.navOptionsPanel{position:absolute;cursor:pointer;top:calc(0% - 30px);left:calc(0% + 10px);width:60px;height:60px;border-radius:30px;background-color:#fffffff3}.settingsBtn{width:30px;height:30px}.btnHomeNav{cursor:pointer;display:flex;align-items:center;justify-content:center;height:45px;width:170px;border-radius:5px;background:transparent;border:none}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}.homeContainer{position:relative;z-index:1;height:calc(100svh - 60px);width:100vw;display:flex;align-items:center;flex-direction:column;margin:60px 0 0}.titleHomeContainer{display:flex;flex-direction:column;width:95%;max-width:680px;margin-top:50px;font-size:xx-large}.titleHomeContainer h2{color:green;align-self:flex-end}.emojiHomeContainer{display:flex;justify-content:flex-end;margin-top:40px;width:100%;max-width:1000px}.messageHome{margin-left:15px;border-radius:50px 50px 0;border-width:4px;border-style:dotted;width:auto;max-width:100%;padding:10px 20px;font-size:18px}.divDoorContainerEmoji{width:140px;height:180px;display:flex;align-items:flex-end;margin-left:20px;box-shadow:-10px -7px 15px 6px #16003c inset;border-radius:40px;background-color:#21005a}.divDoorContainerEmojiSM{width:130px;height:170px;display:flex;align-items:flex-end;margin-left:20px;box-shadow:-10px -7px 15px 6px #16003c inset;border-radius:40px 0 0 40px;background-color:#21005a}.emojiHome{font-size:90px}.emojiHomeSM{font-size:70px}.divContainerPlayHome{display:flex;position:relative;flex-direction:column;align-items:center;height:35%;width:100%;margin-top:100px}.btnPlayPauseHome{display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff;width:60px;height:60px;border-radius:100%;background:linear-gradient(30deg,#5ec300 20%,#4a9900 80%);box-shadow:#1d015d 0 0;animation:pulse 1.2s;border:none;transition:.3s ease-in-out}.btnPlayPauseHome:hover{transform:scale(1.1);animation:init-pulse 1s ease-in-out,constant-pulse 2s ease-in-out 1s infinite}.btnGoToProyectsHome{position:absolute;top:calc(100% - 80px);cursor:pointer;font-size:15px;padding:15px;color:#fff;width:200px;height:fit-content;border-radius:20px;background:linear-gradient(30deg,#341088f3 20%,#3c1a8af3 80%);transition:.3s ease-in-out;box-shadow:#1d015d 0 0;border:none}.btnGoToProyectsHome:hover{background-color:#fff}@keyframes pulse{30%{transform:scale(1.05)}50%{transform:scale(1)}to{box-shadow:0 0 15px 40px #4a4a4d00}}@keyframes init-pulse{to{box-shadow:0 0 25px 15px #27009a74}}@keyframes constant-pulse{0%{box-shadow:0 0 25px 15px #27009a74}50%{box-shadow:0 0 25px 25px #27009a74}to{box-shadow:0 0 25px 15px #27009a74}}@media (max-height:768px) and (min-width:600px){.emojiHome{font-size:70px}.titleHomeContainer{font-size:28px;margin-top:30px}.btnPlayPauseHome{width:50px;height:50px}.messageHome{border-width:3px;font-size:15px}.divContainerPlayHome{height:35%;margin-top:0}.divDoorContainerEmoji{width:120px;height:150px;border-radius:35px}.btnGoToProyectsHome{top:calc(100% - 50px);font-size:15px;width:170px}}@media (max-height:1100px) and (max-width:500px){.titleHomeContainer{font-size:27px}}.labImgLabs{position:absolute;top:calc(100% - 500px);left:calc(100% - 290px)}.labImgLabsSM{position:absolute;top:calc(100% - 300px);left:calc(100% - 170px);width:300px;height:300px}.ProjectsCont{display:flex;align-items:center;flex-direction:column;height:100%;width:100%;margin-top:60px}.h1Projects{position:absolute;top:-40px;width:97%;color:#28057bab}.project{z-index:1;display:flex;flex-direction:column;width:calc(100% - 20px);max-width:750px;padding:10px;background-color:#3410889e;box-shadow:15px 0 20px -20px #000c}.ProjectText{margin:10px}.ProjectP{font-size:16px;text-indent:5px}.ProjectTitle-Type{z-index:1;display:flex;width:95%;max-width:750px;margin-top:60px;align-items:center;justify-content:space-between}.ProjectGif{display:flex;flex-direction:column;align-items:center}.gifProject{padding:2px;transition:.3s;border:2px solid transparent;border-radius:4px}.contGifLink{position:relative}.externalLink,.externalLinkMd{width:35px;position:absolute;top:10px;left:calc(100% - 45px);padding:5px;border-radius:6px;background-color:#0b0221;transition:.3s;box-shadow:0 0 10px #000c}.contGifLink:hover{cursor:pointer}.contGifLink:hover .externalLink{width:50px;top:calc(50% - 25px);left:calc(50% - 25px);padding:10px;box-shadow:0 0 10px #000}.contGifLink:hover .gifProyecto{border:2px solid #5ec300;border-radius:4px}.btnShowMore{color:#a2a2a2;font-weight:700;cursor:pointer;border:1.5px solid #ffe1c4;background-color:transparent;border-radius:5px;transition:.2s;padding:5px}.btnShowMore:hover{border:1.5px solid black;background-color:#a5eb64;font-weight:700;color:#191b1d}.LinkRepo{color:#a2a2a2;font-weight:700;cursor:pointer;border:1.5px solid #ffe1c4;background-color:transparent;border-radius:5px;transition:.2s;padding:5px;margin:0 5px}.LinkRepo:hover{border:1.5px solid black;background-color:#a5eb64;font-weight:700;color:#191b1d}.aboutCont{display:flex;flex-direction:column;width:100%;height:100%;max-width:750px;overflow-x:hidden;margin-top:60px}@media (min-height:768px) and (min-width:600px){.aboutCont{height:calc(100vh - 60px)}}.divPresentation{z-index:1;box-shadow:0 10px 10px #170042;width:100%;padding:15px;display:flex;flex-direction:column;height:fit-content;max-width:750px;background-color:#341088}.h1AboutMe{position:absolute;top:-40px;width:97%;color:#28057bab}.fullStackWebDev{padding-left:10px;padding-right:10px;margin-bottom:10px;display:flex;flex-direction:column}.Fullstack{display:flex;font-weight:700}.Letter{font-size:40px}.LetterAnimated{font-size:40px;animation:textAnimated .2s ease-in-out}.Webdeveloper{display:flex;align-self:flex-end;z-index:2;font-weight:700;background:linear-gradient(to right,#8a2be2,#0ff,#8a2be2);width:fit-content;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto;animation:3s gradient linear infinite}.containerMeAndText{width:100%;height:fit-content}.ImageMe{float:left;margin-right:10px;display:flex;width:160px;height:fit-content;border-radius:30px;border-bottom:4px solid #5ec300;transition:.2s;filter:drop-shadow(5px 5px 10px rgb(22,0,71))}.AboutText{padding:15px;background-color:#1a0745;line-height:1.3;font-size:18px;color:#a2a2a2;text-indent:15px;border-radius:50px 50px 50px 0}.spanOfEmojis-sobreMi{font-size:30px;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.divConocimiento{box-shadow:15px 0 20px -20px #000c;border-radius:10px;padding:15px;width:calc(100% - 20px);max-width:750px;margin:10px 10px 100px;background-color:#34108886}.h3ProgrammingAndMe{margin:20px 0 0 20px;font-size:28px;width:97%;max-width:750px;z-index:1}@keyframes textAnimated{0%{transform:scale(1)}25%{color:#0c38f8;font-family:Arial,Helvetica,sans-serif}50%{color:#5d24e4;transform:scale(1.4)}75%{color:#e22b80}to{color:#eb5b62;transform:scale(1)}}@keyframes gradient{0%{background-position:0% 75%}50%{background-position:100% 50%}to{background-position:0% 75%}}.btnToTop{position:fixed;z-index:3;bottom:calc(0% + 25px);left:calc(100% - 60px);opacity:0;transform:translateY(70px);transition:opacity .3s ease,transform .3s ease}.btnToTop.visible{opacity:1;transform:translateY(0)}.btnToTop.visible .arrowToTop{animation:focus 1.5s ease;z-index:3}.btnToTop.visible .bg-expand{position:absolute;z-index:2;background-color:#52f70b;border-radius:50px;animation:expand 1.5s ease}.btnToTop:hover .arrowToTop{color:#52f70b}@keyframes focus{0%{color:#52f70b}to{color:none}}@keyframes expand{0%{width:0px;height:0px}to{width:42px;height:42px;background-color:transparent}}.emailFormModalContainer{background-color:#13033ca2}.emailFormModalDialog{background-image:url(/assets/bg-emailform2-CmGorW8E.png);background-size:cover}.emailFormModalDialog-mobile{height:100%;background-image:url(/assets/bg-mobile2-nhmKmWvG.png);background-size:cover;background-position:center}.emailFormModal{display:flex;justify-content:center}.emailFormModalContent{display:flex;flex-direction:column}.emailFormModalHeader{display:flex;justify-content:center;margin-bottom:30px;text-align:center;color:#e1e1e1}.emailFormModalForm{display:flex;flex-direction:column}.emailFormModalLabel{color:#e1e1e1;padding-left:5px}.emailFormModalInput{height:38px;color:#e1e1e1;border-radius:4px;padding-left:10px;font-size:15px;margin-bottom:5px;border:2px solid #13033c;background-color:#341088;-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);outline:none}.emailFormModalInput:focus{border:2px solid #cdcdcdb3}.emailFormModalTextarea{width:100%;resize:none;padding:8px 5px 5px 10px;font-size:15px;caret-color:#e1e1e1;border-radius:5px;margin-bottom:5px;-webkit-backdrop-filter:blur(125px);backdrop-filter:blur(125px);color:#e1e1e1;border:2px solid #13033c;background-color:#341088;outline:none}.emailFormModalTextarea:focus{border:2px solid #cdcdcdb3}.emailFormModalButton{display:flex;align-items:center;align-self:flex-end;color:#e1e1e1;padding:8px;width:fit-content;height:45px;margin-top:20px;border:none;border-radius:5px;font-weight:700;font-size:18px;background-color:transparent;cursor:pointer;transition:.3s}.emailFormModalButton:hover{color:#13033c;box-shadow:0 5px 10px #000c;background-color:#7fff00;border:none}.emailFormModalButtonError{display:flex;align-items:center;align-self:flex-end;color:#e1e1e1;padding:8px;width:fit-content;height:45px;margin-top:20px;border:none;border-radius:5px;background-color:#13033c86;font-weight:700;font-size:18px}.emailFormModalError{display:flex;align-self:center;margin:10px 0;border:2px solid rgb(255,101,101);background-color:#ff9c9c;border-radius:5px;box-shadow:0 5px 10px #000c;padding:5px}.FooterSubCont{display:flex;justify-content:center;width:260px;height:70px;padding:5px;background-color:#0b0221;border-radius:20px;transition:.5s}.FooterSubCont:hover{background-color:#13033c}.a-iconFooter{margin:8px;cursor:pointer;transition:.3s}.tooltip{position:absolute;pointer-events:none;left:50%;top:calc(0% - 10px);transform:translate(-50%);padding:5px;background-color:#5ec300;color:#fff;border:2px solid #13033c;border-radius:5px;font-size:14px;opacity:0;transition:.2s}.a-iconFooter:hover .tooltip{transform:translate(-50%) translateY(-50%);opacity:1}.ico{width:40px;transition:.3s}.ico:hover{transform:translateY(-4px)}.App{position:relative;width:100%;display:flex;flex-direction:column;overflow-x:hidden;align-items:center;color:#a2a2a2;background-color:#11002d}.bgDesktop{position:fixed;top:0;left:0;width:100%;height:100lvh;z-index:0}@font-face{font-family:Raleway;src:url(/assets/Raleway-VariableFont_wght-Cinel4j-.ttf) format("woff");font-display:swap}body{margin:0;padding:0;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*{font-family:Raleway;padding:0;margin:0;box-sizing:border-box}*::-webkit-scrollbar{width:2px;height:2px}*::-webkit-scrollbar-thumb{background-color:#797979;border-radius:10px}*::-webkit-scrollbar-thumb:hover{background-color:#afafaf}*::-webkit-scrollbar-track{border-radius:10px;height:2px}