html{scroll-behavior:smooth}*{box-sizing:border-box}body{color:#26211f;background-color:#f7f2eb;margin:0;font-family:Arial,Helvetica,sans-serif}.page{min-height:100vh}.navbar{color:#fff;background-color:#26211f;justify-content:space-between;align-items:center;padding:24px 5%;display:flex}.logo{margin:0}.nav-links{align-items:center;gap:20px;display:flex}.nav-links a{color:#fff;font-weight:700;text-decoration:none}.nav-links a:hover{color:#f4c7ab}.nav-links a:focus{color:#f4c7ab;outline-offset:4px;outline:2px solid #f4c7ab}.dropdown{padding:8px 0;position:relative}.dropdown-button{color:#fff;font:inherit;cursor:pointer;background:0 0;border:none;padding:8px 0;font-weight:700}.dropdown-button:hover{color:#f4c7ab}.dropdown-menu{z-index:10;background-color:#fff;border-radius:12px;min-width:160px;display:none;position:absolute;top:100%;right:0;overflow:hidden;box-shadow:0 8px 24px #00000029}.dropdown-menu a{color:#26211f;padding:12px 16px;text-decoration:none;display:block}.dropdown-menu a:hover{color:#7a3e2d;background-color:#f4efe8}.dropdown:hover .dropdown-menu{display:block}.header{text-align:center;color:#fff;background-color:#26211f;padding:60px 20px}.header h1{margin:0 0 16px;font-size:42px}.header p{margin:0;font-size:18px}main{width:min(1100px,90%);margin:0 auto}.intro{text-align:center;padding:48px 0 24px}.intro h1,.intro h2{margin-bottom:12px;font-size:32px}.intro p{max-width:700px;margin:0 auto;line-height:1.6}.page-section{width:min(800px,90%);margin:0 auto;padding:60px 0;line-height:1.7}.page-section h1{font-size:40px}.projects{grid-template-columns:1fr;gap:32px;padding:24px 0 60px;display:grid}.project-card{cursor:pointer;background-color:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 24px #0000001f}.project-card img{object-fit:cover;width:100%;height:260px;display:block}.project-image{cursor:pointer}.project-content{padding:24px}.project-content h3{margin-top:0;font-size:26px}.tech{color:#7a3e2d}.project-details{margin-top:20px}.project-details p{line-height:1.5}.project-content a{color:#fff;background-color:#26211f;border-radius:999px;margin-top:16px;padding:12px 18px;text-decoration:none;display:inline-block}.project-content a:hover{background-color:#7a3e2d}.details-button{color:#fff;cursor:pointer;background-color:#7a3e2d;border:none;border-radius:999px;margin-top:16px;padding:10px 16px;font-weight:700}.details-button:hover{background-color:#26211f}.preview-button{color:#fff;cursor:pointer;background-color:#26211f;border:none;border-radius:999px;margin-top:24px;padding:12px 20px;font-weight:700}.preview-button:hover{background-color:#7a3e2d}.search-section{text-align:center;width:min(700px,90%);margin:0 auto 32px}.search-section label{margin-bottom:8px;font-weight:700;display:block}.search-section input{border:2px solid #d7c9bc;border-radius:999px;width:100%;padding:14px 18px;font-size:16px}.search-section input:focus{border-color:#7a3e2d;outline:none;box-shadow:0 0 0 4px #7a3e2d26}.search-section p{color:#5f5650;margin-top:12px}.no-results{text-align:center;color:#7a3e2d;padding-bottom:48px;font-weight:700}.popup-background{z-index:1000;background-color:#000000d9;justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;inset:0}.popup-box{color:#26211f;background-color:#fff;border-radius:20px;width:min(900px,95%);max-height:90vh;padding:32px;position:relative;overflow-y:auto}.popup-image{object-fit:contain;background-color:#f4efe8;border-radius:12px;width:100%;max-height:400px}.popup-close{color:#26211f;cursor:pointer;background:0 0;border:none;font-size:40px;position:absolute;top:12px;right:20px}.popup-box h2{margin-top:24px;font-size:32px}.popup-box p{line-height:1.6}.popup-box a{color:#fff;background-color:#26211f;border-radius:999px;margin-top:16px;padding:12px 18px;text-decoration:none;display:inline-block}.popup-box a:hover{background-color:#7a3e2d}.joke-game{text-align:center;width:min(800px,90%);margin:0 auto;padding:60px 0}.joke-game h1{margin-bottom:12px;font-size:40px}.score{color:#7a3e2d;font-weight:700}.joke-card{background-color:#fff;border-radius:20px;margin-top:32px;padding:32px;box-shadow:0 8px 24px #0000001f}.joke-card h2{margin-bottom:24px;font-size:28px}.joke-card label{margin-bottom:8px;font-weight:700;display:block}.joke-card input{border:2px solid #d7c9bc;border-radius:999px;width:100%;padding:14px 18px;font-size:16px}.joke-card input:focus{border-color:#7a3e2d;outline:none;box-shadow:0 0 0 4px #7a3e2d26}.joke-buttons{flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px;display:flex}.joke-buttons button{color:#fff;cursor:pointer;background-color:#26211f;border:none;border-radius:999px;padding:12px 20px;font-weight:700}.joke-buttons button:hover{background-color:#7a3e2d}.punchline-box{text-align:left;background-color:#f4efe8;border-radius:16px;margin-top:24px;padding:20px}.auth-page{text-align:center;width:min(500px,90%);margin:0 auto;padding:60px 0}.auth-page h1{margin-bottom:12px;font-size:40px}.auth-form{text-align:left;background-color:#fff;border-radius:20px;flex-direction:column;gap:12px;margin-top:32px;padding:32px;display:flex;box-shadow:0 8px 24px #0000001f}.auth-form label{font-weight:700}.auth-form input{border:2px solid #d7c9bc;border-radius:999px;padding:14px 18px;font-size:16px}.auth-form input:focus{border-color:#7a3e2d;outline:none;box-shadow:0 0 0 4px #7a3e2d26}.auth-form button,.auth-link-button{color:#fff;cursor:pointer;text-align:center;background-color:#26211f;border:none;border-radius:999px;margin-top:16px;padding:12px 20px;font-weight:700;text-decoration:none;display:inline-block}.auth-form button:hover,.auth-link-button:hover{background-color:#7a3e2d}.auth-message{color:#7a3e2d;margin-top:20px;font-weight:700}.error{color:#9b1c1c}.footer{text-align:center;color:#fff;background-color:#26211f;padding:24px}@media (width>=800px){.projects{grid-template-columns:repeat(3,1fr)}.project-card img{height:200px}}@media (width<=600px){.navbar{flex-direction:column;gap:16px}.nav-links{text-align:center;flex-direction:column}.dropdown-menu{margin-top:8px;position:static}}