*{margin:0;padding:0;box-sizing:border-box;list-style:none}:root{--mobile-nav-width: 60%}#root{display:flex;flex-direction:column;min-height:100vh}body,html{margin:0;padding:0;min-height:100vh;display:flex;flex-direction:column}html{scroll-behavior:smooth}body{background:#ebcd85;color:#222}#header{width:100%;background-size:cover;background-position:center;background-color:#ebcd85}nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;background-color:#222;color:#f7f7f7;width:100%;position:fixed;top:0;z-index:1000;padding:10px 70px 10px 10px}.container-navbar{padding:60px 0;background-color:#ebcd85}#sideMenu{padding-right:40px}.logo{width:100px}nav ul li{display:inline-block;list-style:none;margin:10px 20px}nav ul a{color:var(--color-white);text-decoration:none;font-size:18px;position:relative;padding-bottom:5px}nav ul a:after{content:"";width:0%;height:3px;background:#e1c564;position:absolute;left:0;bottom:-1px;transition:.5s}nav ul a:hover:after{width:100%}.dropdown-menu{display:none;position:absolute;margin-top:5px;background:#424242;border-radius:5px;overflow:hidden;z-index:1000;min-width:180px;box-shadow:0 4px 8px #0000001a}.dropdown-menu li{display:block}.dropdown-menu li:last-child{border-bottom:none}.dropdown-menu li a{padding:10px;display:block;color:#f7f7f7}.dropdown:hover .dropdown-menu{display:block}.nav-btn{cursor:pointer;color:var(--color-white);text-decoration:none;font-size:18px;position:relative;padding-bottom:5px}.nav-btn:after{content:"";width:0%;height:3px;background:#e1c564;position:absolute;left:0;bottom:-1px;transition:.5s}.nav-btn:hover:after{width:100%}.nav-toggle{display:none;position:fixed;flex-direction:column;gap:5px;right:20px;cursor:pointer;z-index:1100;transition:right .3s ease-in-out}.nav-toggle div{width:30px;height:3px;background-color:#e1c564;transition:all .3s ease-in-out}.nav-toggle.active{right:calc((var(--mobile-nav-width) - 60px))}.mobile-nav{position:fixed;top:0;right:calc(-1 * var(--mobile-nav-width));width:var(--mobile-nav-width);height:100%;background-color:#222;color:#f7f7f7;display:flex;flex-direction:column;align-items:center;transition:right .3s ease-in-out;z-index:1000}.mobile-nav.active{right:0}nav .mobile-nav ul{list-style:none;text-align:left;width:100%;padding:25% 8% 8%}nav .mobile-nav ul li{display:flex;margin:12px 10px}nav .mobile-nav ul li a{text-decoration:none;color:#fff;font-size:20px;transition:color .3s}nav .mobile-nav ul li a:hover{color:#e1c564}.submenu{flex-direction:column}.submenu-header{position:relative;display:flex;align-items:center;gap:10px}.submenu-header a{color:var(--color-white);text-decoration:none;font-size:18px}.submenu-arrow{font-size:18px;transition:transform .3s ease-in-out;transform:rotate(-90deg);padding:5px}.submenu-arrow.active{transform:rotate(0)}.submenu-list{list-style:none;margin:0;padding:0;text-align:center;display:none;background-color:#222}.submenu-list.active{display:flex;flex-direction:column}nav .submenu-list li{margin:10px 0}nav .submenu-list li a{color:var(--color-white);text-decoration:none;font-size:16px;display:block;padding:5px 0}nav .submenu-list li a:hover{color:#e1c564}.hero-container{display:flex;flex:1;justify-content:center;padding:2% 5%;margin-top:60px;box-sizing:border-box;overflow:auto}.hero{display:flex;width:100%}.home-col-1{flex:2;text-align:left}.home-col-1 h1{color:#222;font-size:100px;margin-top:50px}.home-col-1 p{font-size:30px}.home-col-1 a{text-decoration:none}.home-col-1 button{display:block;margin-top:2%;width:fit-content;border:1px solid #b59824;padding:20px 50px;border-radius:6px;text-decoration:none!important;background-color:#424242;color:#dbdbdb;font-size:25px;cursor:pointer}.home-col-1 button:hover{background-color:#967e47}.featured-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin-top:20px}.featured-projects img{max-width:100%;height:auto;border-radius:10px;object-fit:cover;border:1px solid #222222;aspect-ratio:16/9}@media (min-width: 1024px){.featured-projects a:nth-child(4){display:none}}.featured-projects img:hover{border:3px solid white}.featured-projects a{text-decoration:none;color:inherit}.featured-projects p{text-decoration:none;color:#222;text-align:center}.home-col-2{flex:1;display:flex;flex-direction:column;align-items:center;padding-left:2%;padding-top:5%}.home-col-2 img{max-width:100%;height:auto;border-radius:10px;object-fit:contain}.home-col-2 p{padding-top:10px;font-size:20px}.about-container{display:flex;flex:1;justify-content:center;padding:2% 5%;margin-top:60px;box-sizing:border-box;overflow:auto}.about{display:flex;width:100%}.about-col-1{flex:1}.about-col-1 h1{font-size:60px}.about-col-1 img{max-width:90%;height:auto;border-radius:10px}.about-col-2{flex:2;margin-top:6%}.about-col-2 a{text-decoration:none;color:#2e63b3}.about-col-2 p{font-size:21px;color:#222;line-height:151%}.cursor{display:inline-block;width:10px;background-color:transparent;animation:blink 1s infinite;color:#2b2b2b}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.tab-titles{display:flex;gap:20px;margin-top:20px}.tab-links{cursor:pointer;font-size:25px;font-weight:700;padding:8px 12px;color:#222;position:relative;text-decoration:none}.tab-links:after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:#998200;transition:width .3s ease-in-out}.tab-links:hover:after,.tab-links.active-link:after{width:100%}.tab-links:hover,.tab-links.active-link{color:#4d2307}.tab-contents{display:none}.tab-contents.active-tab{display:grid;max-height:300px;overflow-y:auto;overflow-x:hidden;padding:10px}.skills-tab{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.experience-tab{grid-template-columns:repeat(2,1fr)}.education-tab{grid-template-columns:repeat(auto-fit,max-content)}.tab-contents ul{display:contents}.tab-contents ul li{box-sizing:border-box;text-align:left;overflow:hidden;width:max-content;text-wrap:wrap;padding-bottom:5px}.active-tab{display:block}.grid-content-skills,.grid-content-experience,.grid-content-education{list-style:none;margin-top:10px}.grid-content-skills li,.grid-content-experience li,.grid-content-education li{margin-bottom:5px}.grid-content-skills li span,.grid-content-experience li span,.grid-content-education li span{font-weight:700;color:#4d2307;font-size:20px}.tab-contents::-webkit-scrollbar{width:10px}.tab-contents::-webkit-scrollbar-track{background:#f1f1f1;border-radius:5px}.tab-contents::-webkit-scrollbar-thumb{background:#222;border-radius:5px}.tab-contents::-webkit-scrollbar-thumb:hover{background:#caaf6f}.projects-container{display:block;flex:1;padding:2% 5%;margin-top:60px;box-sizing:border-box;overflow:auto}.game-projects-container h1{text-align:left;font-size:60px}.game-projects-grid{display:grid;grid-template-columns:repeat(3,minmax(500px,1fr));grid-gap:40px 20px;margin-top:1%}.software-projects-container{padding-top:10px}.software-projects-container h1{text-align:left;font-size:60px}.software-projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));grid-gap:40px 20px;margin-top:1%}.project{display:block;border-radius:10px;position:relative;overflow:hidden}.project h2{color:#222;font-size:30px}.project img{width:100%;aspect-ratio:16/9;border-radius:10px;border:2px solid #967e47}.project img:hover{border:2px solid rgb(223,223,223)}.show-button button{display:block;margin-top:2%;width:fit-content;border:1px solid #b59824;padding:20px 50px;border-radius:6px;text-decoration:none!important;background-color:#424242;color:#dbdbdb;font-size:25px;cursor:pointer}.show-button button:hover{background-color:#967e47}.project-detail-container{display:flex;width:100%;margin-top:60px;padding:1% 5%}.project-detail-col-1{flex:1;max-width:800px}.project-detail-col-1 a{display:inline-block}.image-container{position:relative;display:inline-block;width:100%}.image-container img{width:100%;border-radius:10px;margin-bottom:5px;height:auto;border:2px solid #967e47}.image-navigation{position:absolute;top:47%;left:50%;width:100%;transform:translate(-50%,-50%)}.image-navigation button{padding:7px;font-size:25px;border-radius:50%;cursor:pointer;background-color:#0000;color:#fffc;border:none}.image-navigation button:hover{color:#fffffff2}.image-navigation .prev{position:absolute;left:10px;text-shadow:.05em 0 black,0 .05em black,-.05em 0 black,0 -.05em black,-.05em -.05em black,-.05em .05em black,.05em -.05em black,.05em .05em black}.image-navigation .next{position:absolute;right:10px;text-shadow:.05em 0 black,0 .05em black,-.05em 0 black,0 -.05em black,-.05em -.05em black,-.05em .05em black,.05em -.05em black,.05em .05em black}.project-detail-col-1 h1{font-size:60px;margin-bottom:5px}.project-detail-col-1 h3{margin-top:15px}.project-detail-col-1 p{font-size:19px;margin-bottom:15px}.project-detail-col-1 ul{list-style-type:none;padding:0}.project-detail-col-1 ul li{font-size:19px;margin-right:5px;display:inline-block}.project-detail-col-1 ul span{font-size:19px;margin-right:5px;margin-bottom:5px;display:inline-block}.project-detail-col-1 a{font-size:19px;text-decoration:none;color:#1461b9}.project-detail-col-2{flex:1;padding-top:65px;padding-left:40px}.project-detail-col-2 h3{font-size:40px;margin-bottom:10px}.project-detail-col-2 p{font-size:22px;margin-bottom:20px}.project-detail-col-2 ul{padding:0;list-style-type:none}.project-detail-col-2 ul li{font-size:25px;padding-left:5px;margin-bottom:20px;line-height:1}.mobile-project-detail-container{display:none}.image-gallery-container{position:relative;width:100%;max-width:800px;margin:0 auto;border-radius:10px}.gallery-wrapper{display:flex;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.gallery-wrapper::-webkit-scrollbar{display:none}.gallery-item{flex:0 0 auto;width:100%;display:flex;justify-content:center;align-items:center;border-radius:10px}.gallery-item img{width:100%;height:auto;border-radius:10px;object-fit:cover}.media-video{border-radius:12px;overflow:hidden}.media-video video{width:100%;height:auto;border:2px solid #0c0c0c}.scroll-btn{display:flex;position:absolute;top:50%;transform:translateY(-50%);z-index:10;background-color:#00000080;color:#fff;border:none;font-size:1rem;cursor:pointer;padding:5px;border-radius:5px;pointer-events:auto}.scroll-btn:hover{background-color:#000000b3}.scroll-btn.disabled{display:none;cursor:not-allowed}.scroll-btn:disabled{pointer-events:none}.scroll-btn.prev{left:10px}.scroll-btn.next{right:10px}.contact-section{margin-top:5%;margin-left:3%}.contact-section h2{font-size:60px}.contact-section p{font-size:35px;margin-top:30px}.contact-section p i{color:#b59824;font-size:30px}.social-icons a{text-decoration:none;font-size:45px;padding-right:15px;margin-top:30px;color:#ababab;display:inline-block;transition:transform .5s}.social-icons a:hover{color:#333;transform:translateY(-5px)}.btn{display:block;margin-top:2%;margin-bottom:2%;width:fit-content;border:1px solid #b59824;padding:20px 50px;border-radius:6px;text-decoration:none;background-color:#424242;color:#dbdbdb;font-size:20px}.btn:hover{background-color:#967e47}footer{width:100%;text-align:center;padding:25px 0;background:#262626;font-weight:300;margin-top:auto;color:#fff}footer i{color:#ebcd85}@media (max-width: 1024px){.nav-toggle{display:none}}@media (max-width: 820px){body{display:flex;flex-direction:column;min-height:100vh;margin:0}nav{padding-right:20px}nav ul{display:none}.nav-toggle{display:flex;z-index:1100}.mobile-nav{display:flex}nav .mobile-nav>ul{display:flex;flex-direction:column}nav .mobile-nav .submenu .submenu-list{display:none;flex-direction:column;padding-top:10%}nav .mobile-nav .submenu .submenu-list.active{display:flex}nav .submenu-arrow{padding-left:10px}nav .submenu-arrow.active{padding:5px}.hero-container{padding:1% 2%;margin-top:30px}.hero{display:block}.home-col-1{text-align:center}.home-col-1 h1{font-size:11vw}.home-col-1 p{font-size:5vw}.featured-projects{grid-template-columns:repeat(2,minmax(100px,1fr));overflow:hidden;gap:5px}.featured-projects>*:nth-child(n+5){display:none}.home-col-1 button{padding:10px 35px;font-size:4vw}.home-col-2{text-align:center}.home-col-2 img{max-width:75%}.about-container{padding:1% 2%}.about{display:block}.about-col-1{flex-direction:column;text-align:center}.about-col-1 img{max-width:70%}.about-col-2{display:flex;flex-direction:column;text-align:center;margin-top:2%}.about-col-2 p{padding-bottom:10px}.fun-facts{order:-1}.experience-tab{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.projects-container{margin-top:70px;padding:1% 2%}.game-projects-container h1{font-size:11vw}.game-projects-grid{grid-template-columns:repeat(2,minmax(150px,1fr));gap:5px}.project h2{font-size:4.5vw}.software-projects-container h1{font-size:11vw}.software-projects-grid{grid-template-columns:repeat(2,minmax(150px,1fr));gap:5px}.project-detail-container{display:none}.mobile-project-detail-container{flex:1;display:flex;flex-direction:column;margin-top:70px;padding:1% 2%}.mobile-project-detail-container h1{font-size:11vw}.dropdown-section{margin:5px 0;overflow:hidden}.dropdown-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-radius:5px}.dropdown-header h3{margin:0;font-size:6vw}.dropdown-arrow{transition:transform .3s ease-in-out}.dropdown-arrow.active{transform:rotate(180deg)}.dropdown-content{padding:10px;border-radius:0 0 5px 5px;animation:dropdownAnimation .3s ease-in-out}@keyframes dropdownAnimation{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.contact-section{text-align:center}.contact-section h2{font-size:11vw}.contact-section p{font-size:5vw}.btn{display:none}footer{margin-top:10px}}.CustomBingo{text-align:center;margin-top:75px}.CustomBingo h1{font-size:40px;padding-bottom:20px}.main-container{display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 10px}.board-container{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;position:relative;max-width:100%}.board{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);border:3px solid #333;border-radius:8px;padding:10px;width:min(90vw,520px);aspect-ratio:1 / 1;box-sizing:border-box;overflow:hidden;justify-content:center}.cell.centered{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;width:min(16vw,100px);height:min(16vw,100px);font-size:min(10px,30px);border:1px solid #ccc;padding:5px;overflow:hidden;box-sizing:border-box;transition:background-color .2s ease-in-out}.cell.uncentered{display:flex;text-align:left;white-space:normal;width:min(16vw,100px);height:min(16vw,100px);border:1px solid #ccc;padding:5px;overflow:hidden;box-sizing:border-box;transition:background-color .2s ease-in-out}.cell:hover{background-color:#0000000d}.cell.marked{background-color:#ffff0080}.tooltip-container{position:absolute;top:0;visibility:hidden;z-index:10}.tooltip-container.visible{visibility:visible}.tooltip{position:absolute;background-color:#333;color:#fff;padding:5px 8px;border-radius:4px;width:fit-content;text-align:center;z-index:100;white-space:normal;transition:opacity .3s ease-in-out}.input-container{display:flex;flex-direction:column;align-items:center;width:min(90vw,500px);margin:0 auto}.settings{text-align:left;align-self:start;padding-bottom:10px}.settings h3{font-size:23px}.settings label{font-size:20px;padding-left:6px}textarea{width:100%;height:150px;margin-bottom:10px;padding:10px;font-size:1em;border:2px solid #acacac;border-radius:4px;resize:vertical;max-height:400px}.button{font-size:1em;padding:10px 20px;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:4px;text-align:center;transition:background-color .2s ease-in-out}.button:hover{background-color:#388e3c}.import-export-buttons{display:flex;gap:5px}.settings-button{font-size:.9em;padding:5px 10px;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:2px;text-align:center;transition:background-color .2s ease-in-out}.settings-button:hover{background-color:#388e3c}.import-export-buttons label{font-size:.9em;padding:5px 10px;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:2px;text-align:center;transition:background-color .2s ease-in-out}.settings-label:hover{background-color:#388e3c}@media (max-width: 820px){.board-container{display:block;margin:0 auto}.board{width:100%;aspect-ratio:1 / 1}.input-container{width:100%}textarea{height:120px}}