body{margin:0;background:#000;font-family:sans-serif}.App{display:flex;flex-direction:column;align-items:center;min-height:100vh}.App main{display:flex;flex-direction:column;justify-content:space-evenly;position:relative;width:100%;max-width:2400px;box-shadow:1px 0 #fff,-1px 0 #fff}::-webkit-scrollbar{width:20px}::-webkit-scrollbar-track{background:#3b3b3b}::-webkit-scrollbar-thumb{background:#777;box-shadow:0 0 0 2px inset #3b3b3b}#home,#about,#projects,#contact{scroll-margin-top:60px}@media only screen and (min-width: 2401px){.App main:before{content:"";width:2400px;height:60px;position:absolute;top:-60px;left:0;box-shadow:1px 0 #fff,-1px 0 #fff}}.Header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;width:100%;max-width:1600px;height:60px;background:#000;font-size:26px;color:#fff;box-shadow:0 0 0 1px #fff}.Logo{display:grid;place-items:center;width:40px;height:40px;margin-left:10px;border-radius:50%;box-shadow:0 0 4px 1px #fff;overflow:hidden}.Logo img{width:30px}.Menu{display:block}.Menu nav{display:flex}.Menu a{padding:12px 10px;text-decoration:none;color:#ccc}.Menu input{display:none}.Menu img{width:40px}.Menu label{display:none;position:absolute;top:10px;right:15px}.Menu .active{font-weight:700}@media only screen and (max-width: 1400px){.Menu nav{display:none;flex-direction:column;justify-content:center;align-items:center;position:fixed;top:61px;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1}.Menu input[type=checkbox]:checked+nav{display:flex}.Menu label{display:grid}}.LanguageButton{display:flex;align-items:center;position:absolute;left:50%;transform:translate(-50%)}.LanguageButton button{padding:5px 15px;border:none;background-color:#fff;font-size:20px;font-weight:700;box-shadow:0 0 0 1px #000;transition:background-color .2s;cursor:pointer}.LanguageButton button:hover{background-color:#e6e6e6}.LanguageButton button.active{background-color:#0ff}.LanguageButton button.active:hover{background-color:#00e6e6}.Home{display:flex;align-items:center;width:100%;height:calc(100vh - 60px)}@media only screen and (max-width: 1100px){.Home{flex-direction:column;justify-content:space-evenly}}@media only screen and (min-width: 2400px){.Home{height:1200px}}.DeveloperInfo{display:grid;place-items:center;font-family:monospace;margin:auto}.DeveloperInfo h1{margin:0;font-size:30px;color:#fff}.DeveloperInfo h2{--letter-size: 13.2008px ;--blink-color: #000;margin:0;white-space:nowrap;font-size:22px;color:#0ff;overflow:hidden;box-shadow:2px 0 #000,4px 0 var(--blink-color);animation:blinking .3s infinite,typing 2.5s}.DeveloperInfo.es h2{--letter-size: calc(488.41px / 37);animation:blinking .3s infinite,typing_es 3s}.DeveloperInfo .CVs{display:flex;gap:10px;margin-top:20px}.DeveloperInfo .CVs a{padding:5px 10px;border-radius:3px;background-color:#00fa9a;font-size:20px;font-weight:700;text-decoration:none;color:#000;transition:background-color .2s}.DeveloperInfo .CVs a:hover{background-color:#00db87}@keyframes blinking{0%,49%{--blink-color: #000}50%,to{--blink-color: #0FF}}@keyframes typing{0%,3.99%{width:calc(var(--letter-size)*0)}4%,7.99%{width:calc(var(--letter-size)*1)}8%,11.99%{width:calc(var(--letter-size)*2)}12%,15.99%{width:calc(var(--letter-size)*3)}16%,19.99%{width:calc(var(--letter-size)*4)}20%,23.99%{width:calc(var(--letter-size)*5)}24%,27.99%{width:calc(var(--letter-size)*6)}28%,31.99%{width:calc(var(--letter-size)*7)}32%,35.99%{width:calc(var(--letter-size)*8)}36%,39.99%{width:calc(var(--letter-size)*9)}40%,43.99%{width:calc(var(--letter-size)*10)}44%,47.99%{width:calc(var(--letter-size)*11)}48%,51.99%{width:calc(var(--letter-size)*12)}52%,55.99%{width:calc(var(--letter-size)*13)}56%,59.99%{width:calc(var(--letter-size)*14)}60%,63.99%{width:calc(var(--letter-size)*15)}64%,67.99%{width:calc(var(--letter-size)*16)}68%,71.99%{width:calc(var(--letter-size)*17)}72%,75.99%{width:calc(var(--letter-size)*18)}76%,79.99%{width:calc(var(--letter-size)*19)}80%,83.99%{width:calc(var(--letter-size)*20)}84%,87.99%{width:calc(var(--letter-size)*21)}88%,91.99%{width:calc(var(--letter-size)*22)}92%,95.99%{width:calc(var(--letter-size)*23)}96%,99.99%{width:calc(var(--letter-size)*24)}}@keyframes typing_es{0%,2.69%{width:calc(var(--letter-size)*0)}2.7%,5.39%{width:calc(var(--letter-size)*1)}5.4%,8.09%{width:calc(var(--letter-size)*2)}8.1%,10.79%{width:calc(var(--letter-size)*3)}10.8%,13.49%{width:calc(var(--letter-size)*4)}13.5%,16.19%{width:calc(var(--letter-size)*5)}16.2%,18.89%{width:calc(var(--letter-size)*6)}18.9%,21.59%{width:calc(var(--letter-size)*7)}21.6%,24.29%{width:calc(var(--letter-size)*8)}24.3%,26.99%{width:calc(var(--letter-size)*9)}27%,29.69%{width:calc(var(--letter-size)*10)}29.7%,32.39%{width:calc(var(--letter-size)*11)}32.4%,35.09%{width:calc(var(--letter-size)*12)}35.1%,37.79%{width:calc(var(--letter-size)*13)}37.8%,40.49%{width:calc(var(--letter-size)*14)}40.5%,43.19%{width:calc(var(--letter-size)*15)}43.2%,45.89%{width:calc(var(--letter-size)*16)}45.9%,48.59%{width:calc(var(--letter-size)*17)}48.6%,51.29%{width:calc(var(--letter-size)*18)}51.3%,53.99%{width:calc(var(--letter-size)*19)}54%,56.69%{width:calc(var(--letter-size)*20)}56.7%,59.39%{width:calc(var(--letter-size)*21)}59.4%,62.09%{width:calc(var(--letter-size)*22)}62.1%,64.79%{width:calc(var(--letter-size)*23)}64.8%,67.49%{width:calc(var(--letter-size)*24)}67.5%,70.19%{width:calc(var(--letter-size)*25)}70.2%,72.89%{width:calc(var(--letter-size)*26)}72.9%,75.59%{width:calc(var(--letter-size)*27)}75.6%,78.29%{width:calc(var(--letter-size)*28)}78.3%,80.99%{width:calc(var(--letter-size)*29)}81%,83.69%{width:calc(var(--letter-size)*30)}83.7%,86.39%{width:calc(var(--letter-size)*31)}86.4%,89.09%{width:calc(var(--letter-size)*32)}89.1%,91.79%{width:calc(var(--letter-size)*33)}91.8%,94.49%{width:calc(var(--letter-size)*34)}94.5%,97.19%{width:calc(var(--letter-size)*35)}97.2%,99.9%{width:calc(var(--letter-size)*36)}}@media only screen and (max-width: 1100px){.DeveloperInfo{margin:0}}@media only screen and (max-width: 600px){.DeveloperInfo h2{--letter-size: 9.0008px ;font-size:15px;margin-top:15px}.DeveloperInfo.es h2{--letter-size: calc(333.02px / 37)}}.CoverImage{width:50%}@media only screen and (max-width: 1100px){.CoverImage{width:70%}}@media only screen and (max-width: 880px){.CoverImage{width:90%}}.About{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;gap:50px;width:100%;padding:50px 0;background:#151515}.Education{width:calc(70% - 16px);max-width:800px;padding:30px;margin:16px;background:#176f75;font-size:24px;font-weight:700;color:#fff;box-shadow:0 0 0 10px #111,0 0 0 16px #176f75}@media only screen and (max-width: 580px){.Education{width:calc(80% - 16px);padding:20px;font-size:16px}}.Languages{width:100%}.Languages .container{display:grid;margin:15px auto;width:calc(100% - 40px);max-width:860px;gap:50px;grid-template-columns:1fr 1fr 1fr}@media only screen and (max-width: 580px){.Languages .container{gap:40px}}.Title{margin:0 0 30px;font-size:32px;color:#fff;text-align:center}.TechSkill{display:flex;justify-content:center;align-items:center;gap:10px;padding:10px 0;background-color:var(--background);color:#000;box-shadow:0 0 0 10px #000,0 0 0 15px var(--shadow-color)}.TechSkill img{width:20px}.TechSkill span{font-weight:700}@media only screen and (max-width: 580px){.TechSkill{gap:3px}}.Tools{width:100%}.Tools .container{display:grid;margin:15px auto;width:calc(100% - 40px);max-width:860px;gap:50px;grid-template-columns:1fr 1fr 1fr}@media only screen and (max-width: 580px){.Tools .container{gap:40px}}.OperatingSystems{width:100%}.OperatingSystems .container{display:flex;justify-content:center;flex-wrap:wrap;gap:50px}.OperatingSystems .container div{display:flex;flex-direction:column;align-items:center;gap:10px}.OperatingSystems .container img{width:100px;height:100px}.OperatingSystems .container footer{color:#fff}@media only screen and (max-width: 580px){.OperatingSystems .container{gap:30px}}.Projects{padding:50px}.Projects .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:50px}@media only screen and (max-width: 580px){.Projects{padding:0}}.Project{--box-color: cadetblue;--btn-repo: cornflowerblue;--btn-demo: palegreen;display:flex;flex-direction:column;min-height:280px;box-sizing:border-box;padding:20px;box-shadow:0 0 0 2px var(--box-color) inset}.Project header{padding-bottom:4px;font-size:25px;color:#fff;text-align:center;box-shadow:0 0 0 1px var(--box-color)}.Project span{padding:5px 10px;text-align:center;color:#fff;white-space:nowrap}.Project div{display:flex;justify-content:center;align-items:center;flex-grow:1;color:#fff;text-align:center}.Project footer{display:flex;justify-content:center;gap:10px}.Project a{width:115px;margin-top:10px;padding:10px 0;text-align:center;text-decoration:none;color:#fff;box-shadow:0 0 0 3px var(--btn-repo) inset;transition:.5s}.Project a.Demo{box-shadow:0 0 0 3px var(--btn-demo) inset}.Project a:hover{color:#000;box-shadow:0 0 0 22px var(--btn-repo) inset}.Project a.Demo:hover{box-shadow:0 0 0 22px var(--btn-demo) inset}.Contact{width:100%;padding:50px 0;background-color:#151515}.Contact .container{display:flex;justify-content:center;flex-wrap:wrap;gap:50px}.Contact .container a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 10px;-webkit-user-select:none;user-select:none;text-decoration:none;box-shadow:0 0 0 5px #000,0 0 #0ff;transition:.5s}.Contact .container a:hover{box-shadow:0 0 0 5px #000,0 0 0 10px #0ff}.Contact .container img{width:100px;height:100px}.Contact .container footer{color:#fff}@media only screen and (max-width: 580px){.Contact .container{gap:40px}}.UnderDevelopmentMessage{display:grid;place-items:center;gap:10px;padding:0 0 50px;background-color:#151515}.UnderDevelopmentMessage .gears{display:flex;align-items:flex-start}.UnderDevelopmentMessage img{width:100px;animation:rotation 20s linear infinite}.UnderDevelopmentMessage img[alt=gear1]{margin-top:30px;animation-direction:reverse}.UnderDevelopmentMessage img[alt=gear2]{width:60px;margin-left:-20px;animation-duration:15s}.UnderDevelopmentMessage .message{font:700 20px sans-serif;color:#fff}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}