:root{--bg-primary: #121212;--bg-secundary: #1e1e1e;--divider: #333333;--text: #FFFFFF;--highlight: #bb86fc}*{margin:0;padding:0;box-sizing:border-box}#root{font-family:Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text);display:flex;flex-direction:column;align-items:center;min-height:100vh}.header{background-color:var(--bg-secundary);padding:20px;border-bottom:1px solid var(--divider);width:100%}.header>header{display:flex;justify-content:space-between;align-items:center}.title,.add-new-btn{font-family:Roboto,sans-serif;background-color:inherit;transition:background-color .3s ease,color .3s ease}.title{font-size:1.5rem;font-weight:700;color:inherit;margin:0;border:none}.title:hover{color:var(--highlight)}.add-new-btn{font-size:1rem;color:var(--highlight);text-decoration:none;padding:5px 10px;border:1px solid var(--highlight);border-radius:4px}.add-new-btn:hover{background-color:var(--highlight);color:var(--bg-primary)}.projectsToShowContainer{display:flex;justify-content:space-around;margin-top:20px}.projectsToShowContainer>div{display:flex;align-items:center;gap:10px}.projectsToShowContainer input[type=radio]{accent-color:var(--highlight)}.projectsToShowContainer label{font-size:1rem;color:var(--text)}.projects-list{flex:1;padding:20px;width:100%}.projects-section{margin-bottom:40px;display:flex;flex-direction:column;align-items:center}.projects-section>h3{font-size:1.2rem;color:var(--highlight);margin-bottom:10px;align-self:flex-start}.projects-section>ul{width:100%;list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center}.dashed-line{width:100%;border-top:2px dashed var(--divider);margin:20px 0}.project{background-color:var(--bg-secundary);padding:20px;border-radius:8px;box-shadow:0 2px 4px #0009;margin:0 30px 30px;width:100%;max-width:400px}@media screen and (max-width: 600px){.project{margin:0 0 30px}}.project:hover{box-shadow:0 4px 8px #000c}.project-image{margin:0 auto 10px;width:100%;height:200px;background-color:#2e2e2e;border:1px dashed #333333;border-radius:4px;color:var(--highlight);font-size:1em;position:relative;background-repeat:no-repeat;background-size:contain;background-position:center}.project-image:hover{border-color:#bb86fc}.icon{position:absolute;transition:transform .3s ease,color .3s ease}.icon:hover{transform:scale(1.2);color:#fff}.fa-star{top:10px;left:10px}.fa-trash{bottom:10px;right:10px}.fa-up-right-from-square{top:10px;right:10px}.message-box{position:fixed;bottom:50px;left:50px;background-color:#1e1e1e;color:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 4px 8px #0009;max-width:300px;width:fit-content;box-sizing:border-box}.message-box h4{margin:0;font-size:1rem;color:#fff;font-weight:500}.loading-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:9999}.loading-container div{text-align:center;background-color:#1e1e1e;padding:20px 30px;border-radius:8px;box-shadow:0 4px 8px #0009}.loading-container i{font-size:2rem;color:#bb86fc;margin-bottom:10px}.loading-container h3{margin:10px 0 0;font-size:1.2rem;color:#fff}.dialog-container{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:9999}.dialog-box{position:absolute;background-color:#1e1e1e;padding:20px 30px;border-radius:8px;box-shadow:0 4px 8px #0009;text-align:center;max-width:300px;width:100%;box-sizing:border-box}.dialog-box h3{margin:0 0 20px;font-size:1.5rem;color:#fff}.dialog-box button{padding:10px 20px;margin:5px;border:none;border-radius:4px;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease,color .3s ease}.dialog-box button:first-of-type{background-color:#4caf50;color:#121212}.dialog-box button:first-of-type:hover{background-color:#45a045}.dialog-box button:last-of-type{background-color:#f44336;color:#fff}.dialog-box button:last-of-type:hover{background-color:#e53935}.project-creator{margin-top:60px;width:100%;max-width:400px;background-color:#1e1e1e;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0009}.project-creator>div>label{display:block;font-size:1rem;color:#fff;margin-bottom:5px}input[type=text]{width:100%;padding:10px;margin-bottom:20px;border:1px solid #333333;border-radius:4px;background-color:#2e2e2e;color:#fff;font-size:1rem}input[type=text]:focus{border-color:#bb86fc;outline:none}input[type=checkbox]{accent-color:#bb86fc;margin-right:10px}input[type=checkbox]+label{display:inline-block;margin-bottom:20px}.create-btn{display:block;width:100%;padding:10px 0;border:none;border-radius:4px;background-color:#bb86fc;color:#121212;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease}.create-btn:hover{background-color:#9b70cf}.image-capturer{margin-bottom:20px}.image-capturer>input[type=file]{display:none}input[type=file]{width:100%;padding:10px;margin-bottom:20px;border:1px solid #333333;border-radius:4px;background-color:#2e2e2e;color:#fff;font-size:1rem}.file-input{display:flex;justify-content:center;align-items:center;height:200px;background-color:#2e2e2e;border:1px dashed #333333;border-radius:4px;color:#bb86fc;cursor:pointer;background-repeat:no-repeat;background-size:contain;background-position:center}.file-input i{font-size:2rem}.file-input:hover{border-color:#bb86fc}