.container{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;width:100%;position:absolute}.box-container{width:100%;height:auto;aspect-ratio:1;display:grid;grid-template-rows:repeat(40,1fr);grid-template-columns:repeat(40,1fr);position:absolute;z-index:0}@media screen and (max-width: 768px){.box-container{height:100vh}}.box{justify-content:center;align-items:center;text-align:center;aspect-ratio:1;overflow:hidden;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:var(--blue);margin:0;padding:0;display:flex;z-index:0;opacity:0%;transition-duration:2.5s}.box.altcolor{color:var(--yellow)}.box.hovered,.box:hover{transition-duration:0ms;opacity:100%}.chatbot{height:100%;border:none;max-height:65vh;max-width:35vw;position:relative}.title{position:absolute;font-size:clamp(1rem,3vh,1.5rem);background:linear-gradient(135deg,var(--grey),var(--black));text-align:center;font-weight:700;z-index:1;border-top-left-radius:15px;border-top-right-radius:15px;width:80%;max-width:400px;margin:20px auto;padding:10px;color:#fff}.chat-history{overflow-y:auto;border:none;width:80%;height:100%;max-width:400px;margin:20px auto;padding:60px 10px 10px;background-color:var(--lightgrey);border-radius:15px;transition:box-shadow .1s;box-shadow:0 0 15px #ffffff80;scrollbar-width:none;-ms-overflow-style:none}.chat-history::-webkit-scrollbar{display:none}.chat-history:hover{box-shadow:0 0 15px #fffc}@keyframes pop-in{0%{transform:scale(0)}90%{transform:scale(1.1)}to{transform:scale(1)}}.message{display:flex;text-align:left;font-size:.8rem}.message.user{justify-content:flex-end}.message.model{justify-content:flex-start}.timestamp{font-size:clamp(.5rem,1vw,.8rem)}.message.model .timestamp{margin-left:10px}.message.user .timestamp{margin-right:10px}.message-content{position:relative}.message.user .message-content{animation:pop-in .1s;background-color:var(--blue);color:#fff;padding:10px;border-radius:8px;display:inline-block;max-width:75%}.message.user .message-content:after{content:"";position:absolute;right:-1px;bottom:-9px;border-top:20px solid var(--blue);border-left:25px solid transparent;transform:rotate(-10deg)}.message.model .message-content{animation:pop-in .1s;background-color:var(--yellow);color:#000;padding:10px;border-radius:8px;display:inline-block;max-width:75%}.message.model .message-content:before{content:"";position:absolute;left:-1px;bottom:-9px;border-top:20px solid var(--yellow);border-right:25px solid transparent;transform:rotate(10deg)}form{width:60%;display:flex;border:none;border-radius:50px;margin-bottom:20px;padding:5px;background-color:var(--black);justify-content:space-between;border:2px solid transparent;transition:box-shadow .1s}form:hover{box-shadow:0 0 15px #ffffff80}form:focus-within{border-color:var(--blue)}::-moz-placeholder{color:var(--lightgrey);opacity:.5}::placeholder{color:var(--lightgrey);opacity:.5}input[type=text]{width:calc(100% - 80px);border-radius:4px;border:none;outline:none;margin-left:7px;background-color:var(--black);color:#fff}button[type=submit]{background-color:var(--blue);color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;width:30px;height:30px;transition:transform .3s}button[type=submit] .icon.arrow-icon{fill:#000;height:15px;width:21px}button[type=submit]:hover{transform:scale(1.1)}button[type=submit]:disabled{background-color:#aaa}.retry-button{background-color:#fff;color:#000;border:none;border-radius:5px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;padding:5px}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}.loading-message{animation:pop-in .1s;background-color:var(--yellow);color:#000;padding:10px;border-radius:8px;display:inline-block;max-width:75%;position:relative}.loading-message:before{content:"";position:absolute;left:-1px;bottom:-9px;border-top:20px solid var(--yellow);border-right:25px solid transparent;transform:rotate(10deg)}.loading-dots{display:inline-block}.loading-dots span{animation:blink 1.4s infinite both;display:inline-block}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@media screen and (max-width: 768px){.chatbot{max-height:none;max-width:none;height:100vh}.chat-history{height:70vh}}.chat-window{width:100%;height:100%;display:flex;flex-direction:column;align-items:center}.spotify-container{width:100%;height:100%;display:flex;flex-direction:row;overflow:auto;justify-content:space-between}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:#fff}.spotify-content{max-height:35vh;flex:1;display:flex;flex-direction:column;overflow:hidden;justify-content:center}.playing-text{background-color:var(--black);border-radius:20px;width:-moz-fit-content;width:fit-content;padding:5px 10px;color:#fff;display:flex;align-items:center;justify-content:flex-start;margin-top:auto}.song-container{background-color:var(--lightgrey);border-radius:10px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;overflow:hidden;margin-top:auto;margin-bottom:auto;margin-left:5px;max-width:90%;max-height:90%;min-height:150px;padding:10px;transition:box-shadow .1s;box-shadow:0 0 10px #ffffffb3}.song-container:hover{box-shadow:0 0 10px var(--yellow)}.song,.song.offline{display:flex;align-items:center;justify-content:center}.song img{max-width:100px;max-height:150px;-o-object-fit:cover;object-fit:cover;border:2px solid var(--black)}.song-info{display:flex;flex-direction:column;justify-content:center;margin-left:10px;overflow:hidden}.spotify-container p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon.spotify-icon{fill:#1db954}.playing-text .icon.spotify-icon{width:20px;height:20px;margin-right:10px;flex-shrink:0}@media screen and (max-width: 768px){.spotify-container{max-height:none;flex:1;display:flex;flex-direction:column;overflow:hidden;justify-content:center;margin:auto}.song-container{overflow:hidden;max-width:90%;min-height:150px;padding:20px}.playing-text{margin-bottom:10px}}h1{margin:0;padding:0;font-size:3em;color:var(--grey)}.projects-title{margin-bottom:20px;margin-top:20px;width:100%;text-align:center;animation:fadeIn .2s}.container{width:100%}.content{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:30px;padding:20px;justify-content:center;z-index:1;height:100%;width:100%;animation:fadeIn .2s;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.content::-webkit-scrollbar{display:none;padding-bottom:50px}@keyframes fadeIn{0%{opacity:0}to{opacity:100%}}.project-tile{display:flex;justify-content:top;align-items:left;flex-direction:column;background-color:#fff;border-radius:20px;padding:20px 30px;box-shadow:0 0 10px #0000001a;transition:.1s ease-in-out}h2,h1{font-weight:800}h2{font-size:1.5em;margin-bottom:5px}.project-tile:hover{box-shadow:0 0 10px #00000080}.note{font-size:.9em;color:var(--grey);margin-top:10px}h2{margin:0;justify-content:center;align-items:center}p{margin:0}.languages{margin-bottom:5px;background-color:var(--lightgrey);border-radius:20px;padding:2px 10px;margin-left:-10px;display:inline-block;width:-moz-fit-content;width:fit-content}.project-tile h2{display:flex;margin-bottom:5px;align-items:flex-end;justify-content:left}.project-tile .icon-link{min-width:20px;min-height:20px;margin-top:auto;margin-bottom:auto;display:flex}.project-tile .icon{margin-left:10px;margin-bottom:5px;min-width:20px;max-width:20px;max-height:20px;transition:.1s ease-in-out}.project-tile a:hover .icon{transform:scale(1.2)}a{text-decoration:underline!important}@media screen and (max-width: 768px){.container{height:auto;background-image:linear-gradient(var(--yellow),var(--blue))}.content{width:100%;flex-direction:column;overflow-y:auto}.column{width:100%;overflow-y:none}.project-tile{margin:20px 0;max-width:calc(100vw - 35px)}}div{--gap-size: 2px;--speed: .7s;--loading-speed: .7s;--loading-size: 2}.App{height:100vh;width:100vw;background-color:var(--black)}@keyframes fadeIn{0%{opacity:0;transform:scale(--loading-size)}to{opacity:100%;transform:scale(1)}}.typewriter{display:flex;max-width:-moz-fit-content;max-width:fit-content;position:fixed;top:50%;left:50%;z-index:10000;transform:translate(-50%,-50%);transition:left var(--speed),top var(--speed),transform var(--speed)}.typewriter h2{overflow:hidden;border-right:.05em solid white;white-space:nowrap;animation:typing 1s steps(9,end),blink-caret .75s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:#fff}50%{border-color:transparent}}.app-container{height:100vh;width:100vw;display:grid;grid-template-columns:65fr 35fr;grid-template-rows:65fr 35fr;margin-top:0;gap:var(--gap-size);background-color:var(--black);position:fixed;overflow:hidden}.app-container.projects{transition:opacity var(--speed);opacity:0%;z-index:0}.app-container.home{transition-delay:.6s;transition-duration:.4s;opacity:100%;z-index:1}.border{position:fixed;transform:translate(35%);width:var(--gap-size);background-color:var(--blue);height:100vh;z-index:33;left:65vw;transition:left var(--speed);transform:scale(20);opacity:0;animation:fadeIn var(--loading-speed) forwards;animation-delay:3s}.border.slide{transform:translate(0);left:50px}.border2{position:fixed;transform:translateY(35%);height:var(--gap-size);background-color:var(--yellow);top:65vh;width:100vw;z-index:3;transition:top var(--speed);transform:scale(20);opacity:0;animation:fadeIn var(--loading-speed) forwards;animation-delay:3s}.border2.slide{transform:translateY(0);top:50px}.about-me-section{grid-column:1/2;grid-row:1/2;justify-content:center;align-items:center;background-color:var(--black);z-index:1;display:flex;flex-direction:column;position:relative;width:auto;opacity:0;animation:fadeIn var(--loading-speed) forwards;animation-delay:2.75s}.projects-section{grid-column:2/3;grid-row:2/3;display:flex;justify-content:center;align-items:center;background-color:var(--black);z-index:1;color:#fff;position:relative;overflow:hidden;transform:scale(var(--loading-size));opacity:0;animation:fadeIn var(--loading-speed) forwards;animation-delay:2s}.projects-button,.projects-text{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(2em,5vw,5em);border:none}.projects-button{background-image:linear-gradient(var(--yellow),var(--blue));opacity:0;transition:opacity .5s;z-index:2;color:var(--black)}.projects-text{background:none;color:#fff;z-index:1}.projects-button:hover{opacity:1}.projects-container{background-image:linear-gradient(var(--yellow),var(--blue));display:flex;position:fixed;bottom:0;right:0;width:35vw;height:35vh}.projects-container.show{transition:width var(--speed),height var(--speed),opacity 0s;width:calc(100% - 50px);height:calc(100% - 50px);justify-content:center;z-index:5;opacity:100%}.projects-container.hidden{transition:opacity var(--speed) .5s,width var(--speed),height var(--speed);opacity:0%;width:35vw;height:35vh;z-index:0}.spotify-section{grid-column:1/2;grid-row:2/3;background-color:var(--grey);z-index:1;transform:scale(var(--loading-size));opacity:0;animation:fadeIn var(--loading-speed) forwards;animation-delay:2.25s}.chatbot-section{grid-column:2/3;grid-row:1/2;background-color:var(--grey);display:flex;justify-content:center;flex-direction:column;z-index:1;transform:scale(var(--loading-size));opacity:0;animation:fadeIn var(--loading-speed) forwards;animation-delay:2.5s}.close-button{position:fixed;top:0;left:15px;border:none;background:none;width:50px;height:50px;z-index:100;align-items:center;margin:0;padding:0}.close-button .icon{height:20px;align-items:center;fill:#fff;transition:.1s ease-in-out}.close-button:hover .icon{transform:scale(1.2)}.about-me{display:flex;flex-direction:column;z-index:100;width:auto}.about-me h2,.typewriter h2{font-weight:300;line-height:.9;color:#fff;margin:0;white-space:nowrap;font-size:clamp(2em,10vw,10em)}.about-me h2{opacity:0}.about-me h2.show{opacity:100%;margin-bottom:0}.under-text{display:flex;flex-direction:column;justify-content:center;color:#fff;margin:0;padding:0;font-size:1rem;line-height:1;text-align:right}.underbar{display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0}@media screen and (max-width: 768px){.underbar{flex-direction:column-reverse}.under-text{text-align:center}}.about-me h2 .letter{display:inline-block;transition:color 1s,transform 1s}.about-me h2 .letter.last-name:hover{transition-duration:.1s;color:var(--blue);transform:scale(1.1)}.about-me h2 .letter.first-name:hover{transition-duration:.1s;color:var(--yellow);transform:scale(1.1)}.icons{display:flex;flex-direction:row;justify-content:left;align-items:center}.icons.show{transition-delay:.5s;opacity:100%;margin:0}.icons.hide{opacity:0}.icons a{align-items:center;min-width:30px;min-height:30px;margin:10px}.icons .icon{align-items:center;fill:#fff;transition-duration:1s}.icons a:hover .icon{transition-duration:.1s;transform:scale(1.2)}.icons a:hover .icon.github-icon:hover{fill:var(--yellow)}.icons a:hover .icon.linkedin-icon:hover{fill:var(--blue)}.icons a:hover .icon.twitter-icon:hover{fill:var(--yellow)}.nav-icons{border-radius:15px;position:fixed;display:flex;flex-direction:row;justify-content:left;align-items:center;width:auto;transition:var(--speed),left var(--speed)}.nav-icons a{align-items:center;min-width:30px;min-height:30px;margin:10px}.nav-icons .icon{align-items:center;fill:#fff;transition:.1s ease-in-out}.nav-icons a:hover .icon{transform:scale(1.2)}@media (max-width: 768px){body{overflow-y:auto;margin:0;padding:0}.App{height:auto;min-height:100vh;min-height:100svh}.app-container{display:flex;flex-direction:column;height:auto;min-height:100vh;min-height:100svh;gap:0;padding:0;position:static}.about-me-section,.spotify-section,.chatbot-section{width:100%;padding:20px;min-height:100vh;min-height:100svh;box-sizing:border-box}.spotify-section{justify-content:center}.typewriter h2,.about-me h2{font-size:4em;margin-top:0}.projects-container{position:relative;width:100%;height:100%;padding:20px;box-sizing:border-box}.projects-container.show,.projects-container.hidden{opacity:100%;width:100%;transition:none}.border,.border2,.close-button{display:none}.icons{display:flex;justify-content:center;margin-top:20px}.projects-section,.projects-container{padding:0}.scroll{position:fixed;bottom:10px;left:0;color:#fff;width:100vw;text-align:center;animation:flash 2s infinite;display:flex;flex-direction:column}.scroll .icon{fill:#fff;height:10px;transform:rotate(45deg)}@keyframes flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}}:root{font-family:Courier New,Courier,monospace;line-height:1.5;font-weight:100;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--yellow: #E8FF84;--blue: #99ABFD;--black: #111111;--grey: #333333;--lightgrey: #E9E9EB;touch-action:manipulation}body{margin:0}button{font-family:inherit;cursor:pointer}input{font-family:inherit}a{text-decoration:none}