@import"https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap";.app{position:relative;width:100vw;margin:0;padding:0}.app hr{width:100%;border:none;height:3px;margin:0;padding:0}.app hr.white{background:linear-gradient(to right,var(--main),var(--main),white,var(--main),var(--main))}.app hr.main{background:linear-gradient(to right,white,white,var(--main),white,white)}.header{position:fixed;top:0;left:0;right:0;height:var(--header-height);display:flex;justify-content:space-between;align-items:center;padding:0 2em;z-index:100;background-color:var(--tertiary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:white 2px solid;box-shadow:0 1px 5px #fff}.header .logo{width:75px;margin-top:5px}.header .header__menu .selected{color:var(--main)}.header .header__menu.phone{display:flex;flex-direction:row;align-items:center;justify-content:center;position:fixed;top:0;left:0;right:0;height:var(--header-height);background-color:var(--tertiary);z-index:100}.header .header__menu a{color:#fff;margin:0 1em}.header .header__menu a:hover{color:var(--main)}@media screen and (max-width: 768px){.header .header__menu a{margin:0 .6em}}.header .header__menu .linkedin-icon{position:absolute;top:15px;right:20px}.header .header__menu .linkedin-icon:hover{color:var(--main)}.transform{transform:translate(-50%,-50%)!important}@media screen and (orientation: portrait){.hide{display:none}}.bubbles{position:relative;width:100vw;height:100vh;margin:0;padding:0;overflow:hidden}.bubbles .home{margin:10vw;background-color:none;z-index:10}@media screen and (orientation: portrait){.bubbles .home{margin-top:20vh}}.bubbles .home .avatar{height:120px;width:120px;margin:0 auto;padding:1.5em;will-change:filter;transition:filter .3s;border-radius:50%}.bubbles .home .avatar img{height:120px;width:120px;border-radius:50%;cursor:pointer}.bubbles .home .avatar:hover{filter:drop-shadow(0 0 2em var(--main));animation:avatar-spin 5s infinite linear}@keyframes avatar-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bubbles .home .name{width:50%;height:100px;margin:0 auto;cursor:pointer;color:#fff}.bubbles .home .name h1{font-size:3em;font-weight:500;margin:20px 0;padding:0;color:#fff;text-shadow:3px 10px 5px rgba(0,0,0,.5);cursor:pointer}.bubbles .home .name h1:hover{animation:growing 1.5s infinite alternate}@keyframes growing{0%{transform:scale(1)}to{transform:scale(1.25)}}@media screen and (orientation: portrait){.bubbles .home .name h1{font-size:1.7em}}.bubbles .home .job{color:var(--main);font-size:1.5em;font-weight:500;margin:0;padding:0;text-shadow:3px 10px 5px rgba(0,0,0,.5)}.bubbles .home .job:hover{animation:color 5s infinite alternate}@keyframes color{0%{color:var(--main);transform:scale(1);text-shadow:3px 10px 5px rgba(0,0,0,.5)}25%{color:var(--secondary);transform:scale(1.5);text-shadow:3px 10px 5px rgba(0,0,0,.5)}50%{color:var(--main);transform:scale(1);text-shadow:3px 10px 5px rgba(0,0,0,.5)}to{color:var(--secondary);transform:scale(1.5);text-shadow:3px 10px 5px rgba(0,0,0,.5)}}.bubbles .home .job h2{cursor:pointer}@media screen and (orientation: portrait){.bubbles .home .job h2{font-size:1em}}.bubbles .home .card{padding:2em}.bubbles .home .card .arrow{transform:scale(1.8);cursor:pointer;color:var(--main)}.bubbles .home .card .arrow:hover{color:#fff}#about{position:relative;width:100vw;min-height:90vh;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:center;padding:0;margin:0;color:#fff;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;font-size:1.5em;line-height:1.5;font-weight:500;font-family:inherit;overflow:hidden;padding-top:5vh}#about .about-card{width:40%;max-width:100%;border:1px solid white;background-color:var(--secondary);padding:20px;align-items:center;text-align:center;min-height:60vh}#about .about-card .about-card-main-content{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;text-align:center;padding-bottom:10px}#about .about-card .about-card-main-content .about-divider{background:#fff;border:1px solid #61dafb;border-radius:20px;margin:20px}#about .about-card .about-card-main-content .about-typo{max-width:95%}@media screen and (orientation: portrait){#about .about-card .about-card-main-content{flex-direction:column;justify-content:space-evenly;align-items:center}}@media screen and (orientation: portrait){#about .about-card{width:70%;height:auto;margin:10px 0}}@media screen and (orientation: portrait){#about .about-element{width:70%;height:auto;margin:10px 0}#about .about-element h1{font-size:2em}}#about .about-element img{width:100px;height:100px;border-radius:50px}#about .about-element p{text-align:justify}@media screen and (orientation: portrait){#about .about-element p{text-align:center;font-size:medium}}#about #course p{text-align:center}@media screen and (orientation: portrait){#about{flex-direction:column;justify-content:space-evenly;align-items:center;min-height:100vh;padding:20px 0}}#about .card{position:absolute;bottom:-50px;padding:2em}#about .card .arrow{transform:scale(1.8);cursor:pointer;color:var(--main)}#about .card .arrow:hover{color:#fff}#stack{position:relative;width:100vw;min-height:90vh;padding:0;margin:0;color:#fff;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;font-size:1.5em;line-height:1.5;font-weight:500;font-family:inherit;overflow:hidden;padding-top:10vh}#stack h1{width:50%;font-size:2.5em;text-align:left;margin-top:5vh;padding:0 7vw;border-bottom:white 2px solid}@media screen and (orientation: portrait){#stack h1{width:50%;padding:0 10vw;font-size:1.5em;margin-top:5vh}}#stack #stack-container{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:center;padding-top:5vh}#stack #stack-container .stack-element{width:40%;height:200px}#stack #stack-container .stack-element img{width:50px;height:50px;object-fit:contain;margin:5px}#stack #stack-container .stack-element .row-card{width:100%;height:auto}#stack #stack-container .stack-element .stack-logos{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:center}@media screen and (orientation: portrait){#stack #stack-container .stack-element .stack-logos{margin:0;padding:0}}@media screen and (orientation: portrait){#stack #stack-container .stack-element{width:80%;height:auto;margin:10px}}#home-portfolio{position:relative;width:100vw;min-height:80vh;padding:0;margin:0;color:#000;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;font-size:1.5em;line-height:1.5;font-weight:500;font-family:inherit;overflow:hidden;padding-top:10vh}#home-portfolio h1{width:50%;font-size:2.5em;text-align:right;margin-top:5vh;margin-left:auto;margin-right:0;padding:0 7vw;border-bottom:white 2px solid}@media screen and (orientation: portrait){#home-portfolio h1{width:50%;padding:0 10vw;font-size:1.5em;margin-top:5vh}}.container{width:100vw;display:flex;justify-content:center;height:60vh;gap:0 10px}.container>a{flex:0 0 190px;border-radius:.5rem;transition:.5s ease-in-out;cursor:pointer;box-shadow:1px 5px 15px var(--tertiary);border:white 2px solid;position:relative;overflow:hidden}.container>a:nth-of-type(1){background:url(/assets/sites/ayakashi-phone.png) no-repeat 50%/contain}.container>a:nth-of-type(2){background:url(/assets/sites/jdrg-phone.png) no-repeat 50%/cover}.container>a:nth-of-type(3){background:url(/assets/sites/randoms-phone.png) no-repeat 50%/cover}.container>a:nth-of-type(4){background:url(/assets/sites/ohmyfood-phone.png) no-repeat 50%/cover}.container>a .content{position:absolute;bottom:0;width:100vw;font-size:1.5rem;color:#fff;display:flex;align-items:center;padding:15px 0;opacity:0;flex-direction:column;height:100%;justify-content:flex-end;background:#02022e;background:linear-gradient(0deg,#1c292bac,#fff0);transform:translatey(100%) translate(-25%);transition:opacity .5s ease-in-out,transform .5s .2s;visibility:hidden}.container>a .content span{display:block;margin:5px auto;font-size:1.2rem}.container>a:hover{background-color:#000;flex:0 0 50vw;box-shadow:1px 3px 15px var(--main);transform:translatey(-30px)}.container>a:hover:nth-of-type(1){background:url(/assets/sites/ayakashi.png) no-repeat 50%/contain}.container>a:hover:nth-of-type(2){background:url(/assets/sites/jdrg.png) no-repeat 50%/contain}.container>a:hover:nth-of-type(3){background:url(/assets/sites/randoms.png) no-repeat 50%/contain}.container>a:hover:nth-of-type(4){background:url(/assets/sites/ohmyfood.png) no-repeat 50%/contain}.container>a:hover .content{opacity:1;transform:translatey(0) translate(-25%);visibility:visible}#projects-list-phone{display:flex;flex-direction:row;justify-content:center;align-items:center;margin:5px}#projects-list-phone .project-phone{width:60px;height:120px;object-fit:cover;object-position:center;border-radius:5px;margin:10px}#projects-list-phone .projects-icons{width:60px;height:120px;object-fit:cover;object-position:center;border-radius:5px;box-shadow:1px 1px 5px var(--tertiary);opacity:.5}#projects-list-phone .projects-icons.selected{opacity:1}#contact{position:relative;width:100vw;min-height:90vh;padding:0;margin:0;color:#fff;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;font-size:1.5em;line-height:1.5;font-weight:500;font-family:inherit;background-color:var(--tertiary);overflow:hidden;padding-top:10vh}#contact h1{width:50%;font-size:2.5em;text-align:left;margin-top:5vh;margin-left:0;margin-right:auto;padding:0 7vw;border-bottom:white 2px solid}@media screen and (orientation: portrait){#contact h1{width:50%;padding:0 10vw;font-size:1.2em;margin-top:5vh}}#contact .contact-container{width:40vw;margin:0;padding:20px 0}@media screen and (orientation: portrait){#contact .contact-container{width:80vw;margin:0;padding:20px 0}}.footer{margin-top:50px;margin-bottom:20px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;margin:0;padding:0;text-align:center;color-scheme:light dark;color:#ffffffde;--main: #61dafb;--secondary: rgba(91, 128, 174, .471);--tertiary: #1a1e23;--header-height: 65px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;display:flex;place-items:center;min-width:100vw;min-height:100vh;background:var(--tertiary)}h1{font-size:3em;line-height:1.1;color:var(--main)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}