body{margin:0;padding:0;overflow-x:hidden;background:#352f44}*{box-sizing:border-box;font-family:Ubuntu,serif}.loader{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.App{height:100%;width:100%;display:flex;flex-direction:column;align-items:center;padding:20px 10px}.App .main-container{display:flex;justify-content:space-between;width:60%;margin-bottom:100px;background:#0003;box-shadow:0 4px 6px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:15px}.App .main-container .container-info{height:100%;width:100%}.App .main-container .container-info .header{display:flex;gap:10px}.App .main-container .container-info .header .primary-color-header,.App .main-container .container-info .header .secondary-color-header{font-family:Londrina Outline,sans-serif;font-size:34px;font-weight:800;letter-spacing:3px}.App .main-container .container-info .header .primary-color-header{color:linen}.App .main-container .container-info .header .secondary-color-header{color:#b9b4c7}.App .main-container .container-info hr{width:5%;margin-left:0;margin-right:auto;height:5px;background-color:#b9b4c7;border:none;border-radius:5px}.App .main-container .container-info .content{margin-top:10px;font-size:18px;color:linen;line-height:1.6;letter-spacing:.5px}.App #floating-patreon-btn{position:fixed;bottom:20px;right:20px;background-color:#ff424d;color:#fff;padding:10px;font-family:Arial,sans-serif;font-weight:700;border-radius:100%;box-shadow:0 4px 8px #0003;text-decoration:none;display:flex;align-items:center;z-index:9999;transition:background-color .3s ease}.App #floating-patreon-btn :hover,.App #floating-patreon-btn :focus{background-color:#e03e47;outline:none}.App #floating-patreon-btn span{-webkit-user-select:none;user-select:none}@media screen and (max-width: 1350px){.App .main-container,.App .playlist-container{width:80%}}@media screen and (max-width: 1050px){.App .main-container,.App .playlist-container{width:90%}}@media screen and (max-width: 820px){.App .main-container .container-info hr,.App .playlist-container .container-info hr{width:10%}}@media screen and (max-width: 600px){.App .main-container .container-info hr,.App .playlist-container .container-info hr{width:15%}.App #floating-patreon-btn{bottom:80px}}.main-container .container-info .content{margin-top:10px;font-size:18px;color:linen;line-height:1.6;letter-spacing:.5px}.main-container .container-info .skill-carousel{width:100%;height:250px;display:flex;gap:50px;overflow-x:scroll;padding:20px;-webkit-user-select:none;user-select:none}.main-container .container-info .skill-carousel .skill{height:100%;aspect-ratio:1;padding:20px;background-color:#0003;border-radius:10px;filter:grayscale(100%);transform:scale(1);transition:all .3s ease-in-out}.main-container .container-info .skill-carousel .skill .skill-icon{width:100%;height:100%;-webkit-user-drag:none}.main-container .container-info .skill-carousel .skill:hover{filter:grayscale(0%);transform:scale(1.1)}.main-container .container-info .skill-carousel::-webkit-scrollbar{height:10px}.main-container .container-info .skill-carousel::-webkit-scrollbar-thumb{background:#b9b4c7cc;border-radius:10px}.main-container .container-info .skill-carousel::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}.navbar-container{position:fixed;bottom:0;margin-bottom:20px;z-index:100;display:flex;justify-content:space-between;background:#00000080;box-shadow:0 4px 6px #0000001a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:10px;padding:15px;width:30%;min-width:fit-content}.navbar-container .navbar{width:100%;display:flex;justify-content:space-between;gap:10px}.navbar-container .navbar .nav-btn{background-color:transparent;border:none;outline:none;cursor:pointer;color:linen;padding:5px 7px;font-size:16px;position:relative;transition:all .5s ease-in-out}.navbar-container .navbar .nav-btn:before,.navbar-container .navbar .nav-btn:after{content:"";position:absolute;height:2px;background-color:#b9b4c7;width:0;transition:all .5s ease-in-out}.navbar-container .navbar .nav-btn:before{top:0;right:0}.navbar-container .navbar .nav-btn:after{bottom:0;left:0}.navbar-container .navbar .nav-btn.active{color:#b9b4c7}.navbar-container .navbar .nav-btn.active:before,.navbar-container .navbar .nav-btn.active:after{width:100%}.navbar-container .navbar .nav-btn:hover{transform:scale(1.1);color:#b9b4c7}@media screen and (max-width: 450px){.navbar-container .navbar .nav-btn{font-size:12px}}.top-card-container{display:flex;justify-content:space-between;width:60%;height:200px;margin-bottom:20px;background:#0003;box-shadow:0 4px 6px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:10px;padding:15px}.top-card-container .show-contact{position:absolute;display:none;top:0;right:0;background-color:linen;box-shadow:-2px 2px 2px #0000001a;border:none;border-top-right-radius:10px;border-bottom-left-radius:7px;padding:5px 7px;outline:none;justify-content:center}.top-card-container .show-contact i{font-size:10px;color:#352f44}.top-card-container .container-info{width:100%;height:100%;display:flex;justify-content:space-between;gap:10px}.top-card-container .container-info .about{display:flex;width:60%;gap:30px}.top-card-container .container-info .about .image-container{height:100%}.top-card-container .container-info .about .image-container img{height:100%;border-radius:10px}.top-card-container .container-info .about .bio{display:flex;flex-direction:column;align-items:start;gap:10%}.top-card-container .container-info .about .bio .name{display:flex;gap:10px}.top-card-container .container-info .about .bio .name .first-name,.top-card-container .container-info .about .bio .name .last-name{font-family:Londrina Outline,sans-serif;font-size:34px;font-style:italic;font-weight:800}.top-card-container .container-info .about .bio .name .first-name{color:linen}.top-card-container .container-info .about .bio .name .last-name{color:#b9b4c7}.top-card-container .container-info .about .bio .statement{font-size:16px;background:linen;padding:5px;border-radius:5px;color:#352f44}.top-card-container .container-info .contact-info{width:40%;height:100%;display:flex;flex-direction:column;gap:10%}.top-card-container .container-info .contact-info .info-row{height:40%;display:flex;align-items:center;gap:5%}.top-card-container .container-info .contact-info .info-row .icon-holder{display:flex;justify-content:center;align-items:center;width:50px;height:50px;background:#0003;box-shadow:-1px -1px 2px #0000004d;border-radius:10px;padding:10px}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button{display:flex;justify-content:center;align-items:center;background:none;border:none;margin:0;padding:0;cursor:pointer;perspective:1000px}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button svg{width:24px;height:24px;fill:#b9b4c7;transition:transform .6s ease,fill .3s ease;transform-style:preserve-3d}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button:hover svg{fill:linen}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button.none svg{transform:scaleX(1)}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button.hold svg{transform:scaleX(-1);transition-duration:.2s}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button.flipped svg{transform:scaleX(-1)}.top-card-container .container-info .contact-info .info-row .email{display:flex;gap:10px;align-items:center;justify-content:space-between;transform:scale(1);transition:all .3s ease-in-out}.top-card-container .container-info .contact-info .info-row .email a{text-decoration:none;font-size:16px;color:#b9b4c7}.top-card-container .container-info .contact-info .info-row .email a:hover{transform:scale(1.05);color:linen}.top-card-container .container-info .contact-info .socials{width:100%;display:flex;gap:20px}.top-card-container .container-info .contact-info .socials a{border:1px solid rgb(185,180,199);border-radius:10px;display:flex;justify-content:center;align-items:center;text-decoration:none;width:50px;aspect-ratio:1;transform:scale(1);transition:all .3s ease-in-out}.top-card-container .container-info .contact-info .socials a svg{width:22px;height:22px;fill:#b9b4c7}.top-card-container .container-info .contact-info .socials a:hover{border:1px solid rgb(250,240,230);transform:scale(1.1)}.top-card-container .container-info .contact-info .socials a:hover svg{fill:linen}@media screen and (max-width: 1350px){.top-card-container{width:80%}}@media screen and (max-width: 1050px){.top-card-container{width:90%}}@media screen and (max-width: 900px){.top-card-container .container-info{width:100%;height:100%}.top-card-container .container-info .about{width:60%}.top-card-container .container-info .about .bio .name .first-name,.top-card-container .container-info .about .bio .name .last-name{font-size:28px}.top-card-container .container-info .about .bio .statement{font-size:16px}.top-card-container .container-info .contact-info .info-row .icon-holder{width:35px;height:35px;border-radius:5px}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button svg{width:18px;height:18px}.top-card-container .container-info .contact-info .info-row .email a{font-size:16px}.top-card-container .container-info .contact-info .socials a{width:35px;aspect-ratio:1;border-radius:5px}.top-card-container .container-info .contact-info .socials a svg{width:18px;height:18px}}@media screen and (max-width: 820px){.top-card-container{height:150px;transition:all .5s ease-in-out}.top-card-container .show-contact{position:absolute;display:flex;top:0;right:0}.top-card-container .container-info{width:100%;height:100%;flex-direction:column;gap:20px}.top-card-container .container-info .about{width:100%;height:120px}.top-card-container .container-info .about .bio .name .first-name,.top-card-container .container-info .about .bio .name .last-name{font-size:40px}.top-card-container .container-info .about .bio .statement{font-size:20px}.top-card-container .container-info .contact-info{display:flex;opacity:0;width:100%;padding:10px;gap:10px;z-index:-1;top:-50;transform:translateY(-100px);pointer-events:none;transition:all .5s ease-in-out}.top-card-container .container-info .contact-info .info-row{gap:20px}.top-card-container .container-info .contact-info .info-row .icon-holder{width:40px;height:40px;border-radius:5px}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button svg{width:20px;height:20px}.top-card-container .container-info .contact-info .info-row .email a{font-size:16px}.top-card-container .container-info .contact-info .socials{justify-content:start;gap:20px}.top-card-container .container-info .contact-info .socials a{width:40px;aspect-ratio:1;border-radius:5px}.top-card-container .container-info .contact-info .socials a svg{width:20px;height:20px}.top-card-container.show{height:300px}.top-card-container.show .container-info .contact-info{opacity:1;z-index:0;pointer-events:all;transform:translateY(0)}}@media screen and (max-width: 600px){.top-card-container{height:120px}.top-card-container .container-info{width:100%;height:100%}.top-card-container .container-info .about{height:90px}.top-card-container .container-info .about .bio .name .first-name,.top-card-container .container-info .about .bio .name .last-name{font-size:34px}.top-card-container .container-info .about .bio .statement{font-size:16px}.top-card-container .container-info .contact-info .info-row .icon-holder{width:35px;height:35px}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button svg{width:18px;height:18px}.top-card-container .container-info .contact-info .info-row .email a{font-size:14px}.top-card-container .container-info .contact-info .socials a{width:35px}.top-card-container .container-info .contact-info .socials a svg{width:18px;height:18px}.top-card-container.show{height:240px}}@media screen and (max-width: 450px){.top-card-container{height:100px}.top-card-container .container-info .about{height:70px}.top-card-container .container-info .about .bio .name .first-name,.top-card-container .container-info .about .bio .name .last-name{font-size:24px}.top-card-container .container-info .about .bio .statement{font-size:14px}.top-card-container .container-info .contact-info .info-row .icon-holder{width:30px;height:30px}.top-card-container .container-info .contact-info .info-row .icon-holder .flip-button svg{width:16px;height:16px}.top-card-container .container-info .contact-info .info-row .email a{font-size:14px}.top-card-container .container-info .contact-info .socials a{width:30px}.top-card-container .container-info .contact-info .socials a svg{width:16px;height:16px}.top-card-container.show{height:200px}}.main-container .container-info .project-type{display:flex;flex-wrap:wrap;align-items:center;gap:30px;margin:20px 0;color:linen}.main-container .container-info .project-type .project-type-item{font-size:16px;cursor:pointer;transform:scale(1);transition:all .3s ease-in-out;position:relative}.main-container .container-info .project-type .project-type-item:hover{color:#b9b4c7;transform:scale(1.1)}.main-container .container-info .project-type .project-type-item:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:#b9b4c7;transition:width .4s ease-in-out}.main-container .container-info .project-type .project-type-item.active{color:#b9b4c7}.main-container .container-info .project-type .project-type-item.active:after{width:100%}.main-container .container-info .projects{width:100%;height:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(266.67px,1fr));gap:20px;margin:0 auto}.main-container .container-info .projects .project-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;width:100%;height:200px}.main-container .container-info .projects .project-card .project-name{font-size:16px;color:linen;transform:scale(1);cursor:pointer;word-break:keep-all;text-align:center;transition:all .3s ease-in-out}.main-container .container-info .projects .project-card .image-container{position:relative;height:150px;aspect-ratio:16/9;overflow:hidden;border-radius:10px}.main-container .container-info .projects .project-card .image-container img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:all .3s ease-in-out}.main-container .container-info .projects .project-card .image-container .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .3s ease-in-out}.main-container .container-info .projects .project-card .image-container .overlay i{color:#fff;font-size:2rem}.main-container .container-info .projects .project-card:hover .project-name{color:#b9b4c7;transform:scale(1.1)}.main-container .container-info .projects .project-card:hover img{transform:scale(1.1)}.main-container .container-info .projects .project-card:hover .overlay{opacity:1}@media screen and (max-width: 450px){.main-container .container-info .project-type{gap:20px}}.main-container .container-info .timeline{width:100%;position:relative;display:flex;flex-direction:column;justify-content:start}.main-container .container-info .timeline:before{content:"";position:absolute;left:18px;top:15px;bottom:35px;width:3px;background-color:#b9b4c780;z-index:0}.main-container .container-info .timeline .timeline-item{position:relative;display:flex;margin-bottom:30px;z-index:1}.main-container .container-info .timeline .dot{width:10px;height:10px;border-radius:50%;background-color:#352f44;box-sizing:content-box;border:5px solid rgba(185,180,199,.5);position:absolute;left:10px;top:15px}.main-container .container-info .timeline .content{margin-left:40px;border-radius:5px;color:linen}.main-container .container-info .timeline .content .title{font-size:18px;font-weight:700}.main-container .container-info .timeline .content .middle{font-size:16px}.main-container .container-info .timeline .content .duration{font-size:14px;color:#b9b4c7}.main-container .container-info .timeline .content ul{margin:0;padding:0 auto}.main-container .container-info .download-container{width:100%;display:flex;justify-content:flex-end}.main-container .container-info .download-container .download-btn{background:#352f44;color:linen;outline:none;border:none;border-radius:10px;padding:10px;font-size:18px;display:flex;justify-content:center;align-items:center;gap:10px;box-shadow:0 4px 6px #0000001a;transition:box-shadow .3s ease;cursor:pointer}.main-container .container-info .download-container .download-btn:hover{box-shadow:0 8px 12px #0003}.main-container .container-info .blogs{width:100%;height:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:20px auto}.main-container .container-info .blogs .blog-card{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;width:100%;background:#352f44;border-radius:10px}.main-container .container-info .blogs .blog-card .blog-image{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden}.main-container .container-info .blogs .blog-card .blog-image img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1);transition:all .3s ease-in-out}.main-container .container-info .blogs .blog-card .content{width:100%;padding:0 15px 15px}.main-container .container-info .blogs .blog-card .content .blog-title{font-size:20px;font-weight:700;color:linen;transition:all .3s ease-in-out}.main-container .container-info .blogs .blog-card .content .blog-brief{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:linen}.main-container .container-info .blogs .blog-card:hover .blog-image img{transform:scale(1.1)}.main-container .container-info .blogs .blog-card:hover .content .blog-title{color:#b9b4c7}@media screen and (max-width: 450px){.main-container .container-info .blogs{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}