body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f7fc; color: #333; } .container { max-width: 600px; margin: 20px auto; background: white; padding: 20px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .title { font-size: 28px; font-weight: bold; text-align: center; color: #e26f22; margin-bottom: 20px; } .profile-section { display: flex; align-items: center; justify-content: center; gap: 20px; } .profile-img { width: 100px; height: 100px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .progress-circle { display: flex; flex-direction: column; align-items: center; gap: 15px; } .circle-container { position: relative; width: 100px; height: 100px; } .circle { width: 100px; height: 100px; transform: rotate(-90deg); } .background-ring { stroke: #f0f0f0; stroke-width: 10; fill: none; } .progress-ring { stroke-width: 10; fill: none; stroke: #e26f22; stroke-dasharray: 251; stroke-dashoffset: 251; transition: stroke-dashoffset 0.5s ease; } .circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: bold; } .progress-bar { margin-top: 15px; background-color: #ddd; border-radius: 10px; height: 10px; width: 100%; } .progress-hp, .progress-stamina { height: 100%; border-radius: 10px; transition: width 0.5s ease; } .progress-hp { background-color: #e26f22; } .progress-stamina { background-color: #4ba100; } .fire-stats { display: flex; justify-content: space-between; background-color: #f9f9f9; padding: 10px; margin-top: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .stat { text-align: center; } .button { display: block; background-color: #e26f22; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-size: 16px; margin: 20px auto; text-align: center; width: 50%; }