#welcome{text-align:center;max-width:500px;margin:0 auto}#welcome h2,#welcome p{margin-bottom:1rem}#welcome p{color:#e98f8f}#welcome img{margin-top:2rem;width:100%}.player{background-color:#004643;border:1px solid #eeeff2;border-radius:40px;padding:15px;width:25rem;font-size:14px;outline:none}.player:focus{border-color:#eeeff2}@media (max-width: 768px){.player{width:20rem;font-size:12px;padding:12px}}@media (max-width: 480px){.player{width:15rem;font-size:10px;padding:10px}#welcome{padding:0 10px}}.option{padding:10px;border:2px solid #ccc;border-radius:5px;cursor:pointer;transition:background-color .3s,transform .3s}.option.selected{background-color:#888484}.option.correct{background-color:#4caf50;color:#fff}.option.wrong{background-color:#e62618;color:#fff}.option:hover{transform:scale(1.05)}.option:active{transform:scale(.95)}@media (max-width: 768px){.option{padding:8px;font-size:.9rem}}@media (max-width: 480px){.option{padding:6px;font-size:.8rem}}.timer{position:relative;width:120px;height:120px}.timer-svg{width:100%;height:100%;position:absolute;left:0;top:0}.timer-circle{fill:transparent;stroke:#f2f5f2;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1s linear}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:34px;font-family:Arial,sans-serif;color:#fffcfc}.timer-container{display:flex;justify-content:center;align-items:center}p{margin:20px}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .5s ease-in}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .5s ease-in}#options-container{display:flex;flex-direction:column;gap:18px;background-color:#004643;margin:25px}.timer-container{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.button-container{display:flex;justify-content:space-between;margin-top:20px}.back-button{position:absolute;top:10px;left:10px;padding:10px;margin-top:0;cursor:pointer;transition:background-color .3s,transform .3s;display:flex;align-items:center;justify-content:center;background:none;border:none;font-size:1rem}.back-button:hover{background-color:#2a3f4b;color:#fff;transform:scale(1.05)}.back-button:active{transform:scale(.95)}.skip-button,.next-button{padding:10px 20px;cursor:pointer;transition:background-color .3s,transform .3s}.skip-button:hover,.next-button:hover{background-color:#f8c660;color:#fff;transform:scale(1.05)}.skip-button:active,.next-button:active{transform:scale(.95)}#question{background-color:#004643}@media (max-width: 768px){#options-container{margin:15px;gap:10px}.button-container{flex-direction:column;gap:10px;margin-top:15px}.back-button{top:5px;left:5px;font-size:.9rem;padding:8px}.skip-button,.next-button{padding:8px 16px}}@media (max-width: 480px){.button-container{flex-direction:column;gap:5px;margin-top:10px}.back-button{font-size:.8rem;padding:6px}.skip-button,.next-button{padding:6px 12px}}#gameover{text-align:center;padding:5px}.player-info{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.player-image img{width:100px;height:100px;border-radius:50%;margin:20px}.player-name-score{text-align:left}.ranking{margin-top:20px}.ranking ul{list-style-type:none;padding:0}.ranking-item{display:flex;justify-content:space-between;background-color:#f8c660;padding:10px;margin:5px 0;border-radius:5px}.ranking-position{font-weight:700;margin-right:10px}.ranking-name{flex-grow:1;text-align:left}.ranking-score{font-weight:700}.reset-button{margin-top:20px;padding:10px 20px;background-color:#f8c660;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:1rem}.reset-button:hover{background-color:#c00}#category{text-align:center;max-width:500px}#category h2,#category p{margin-bottom:1rem;justify-content:center}#category p{color:#ecd7d7}#category button{display:flex;background-color:#f8c660;justify-content:center}.App{text-align:center;padding-top:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.App h1{margin-bottom:2rem}*{padding:0;margin:0;font-family:Raleway,sans-serif;color:#fff}body,html{min-height:100vh;height:100%;background-color:#004643}img{max-width:100%}button{border-radius:15px;border:1px solid #f8c660;background-color:#ffad09;color:#fff;text-align:center;font-size:28px;padding:16px;width:220px;transition:all .5s;cursor:pointer;margin:36px;font-weight:700}button{cursor:pointer;display:inline-block;position:relative;transition:.5s}button:after{content:"»";position:absolute;opacity:0;top:14px;right:-20px;transition:.5s}button:hover{padding-right:24px;padding-left:8px}button:hover:after{opacity:1;right:10px}button:hover{background:#e4ac3b}