.menubar{background-color:#000000;width:100%;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;border-radius:0;position:fixed;top:0;left:0;box-sizing:border-box;z-index:1000}.brand-name{font-weight:700;text-decoration:none;font-size:14px;color:#ffffff;transition:color .2s ease-in-out,border-color .2s ease-in-out}.brand-name:hover{color:red}.nav-brand,.nav-logo{cursor:default}.nav-logo{height:40px;transition:transform .2s ease-in-out}.nav-logo:hover{transform:scale(1.25)}.nav-link{padding:8px 12px;cursor:pointer;border:1px solid transparent;border-radius:10px;text-decoration:none;font-size:14px;color:#ffffff;transition:color .2s ease-in-out,border-color .2s ease-in-out}.nav-link:hover{padding:8px 12px;background-color:#dadada;color:red;border:1px solid red}.boxtTrait_list{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(8,auto);grid-gap:6px;gap:6px}.boxtTrait_item{width:250px;height:40px;padding:8px 12px;background-color:#3c3a3a;border-radius:10px;text-decoration:none;font-size:18px;color:#ffffff;cursor:default}.Trait_logo{margin:-10px;padding:2px;height:35px}.percentage{min-width:50px;margin-left:auto;text-align:right;font-size:14px;color:#ffffff}.historybox_traits{display:flex;margin-top:50px;max-width:635px;max-height:1000px;height:245px;overflow:auto}.trait_reroll_head{background-image:linear-gradient(90deg,rgb(163,37,163),rgb(255,105,180) 25%,rgb(255,0,0) 50%,rgb(255,105,180) 75%,rgb(163,37,163))}.Mythic-text,.trait_reroll_head{color:transparent;background-size:300% 100%;background-position:0 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:trait-gradient-shift 20s linear infinite}.Mythic-text{background-image:linear-gradient(90deg,rgb(0,255,255),rgb(21,58,195) 16.6%,rgb(163,37,163) 33.3%,rgb(255,105,180) 50%,rgb(255,0,0) 66.6%,orange 83.3%,rgb(0,255,255))}.Golden-text{background-image:linear-gradient(90deg,rgb(255,196,0),rgb(188,144,0) 30%,rgb(255,196,0) 50%,rgb(188,144,0) 80%,rgb(255,196,0))}.Epic-text,.Golden-text{color:transparent;background-size:300% 100%;background-position:0 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:trait-gradient-shift 20s linear infinite}.Epic-text{background-image:linear-gradient(90deg,rgb(219,0,219),rgb(255,96,255) 30%,rgb(219,0,219) 50%,rgb(255,96,255) 80%,rgb(219,0,219))}.Rare-text{color:transparent;background-image:linear-gradient(90deg,blue,rgb(79,79,255) 30%,blue 50%,rgb(79,79,255) 80%,blue);background-size:300% 100%;background-position:0 0;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:trait-gradient-shift 20s linear infinite}@keyframes trait-gradient-shift{to{background-position:0 0}0%{background-position:300% 0}}.animated-button-single{border:2px solid #ffffff;border-radius:12px;background-image:linear-gradient(90deg,rgb(44,255,40),rgb(60,253,42) 30%,rgb(18,219,0) 50%,rgb(3,155,0) 80%,rgb(3,155,0));font-size:14px;font-weight:700;color:white;padding:10px 20px;cursor:pointer;transition:all .4s ease;text-shadow:1px 1px 2px rgba(0,0,0,.2);background-size:200% 100%;background-position:40% 0}.animated-button-single:hover{font-size:16px;background-position:100% 0}.animated-button-reroll-for-trait{border:2px solid #ffffff;border-radius:12px;background-image:linear-gradient(90deg,rgb(0,234,255),rgb(111,111,255) 30%,rgb(79,79,255) 50%,blue 80%,blue);font-size:14px;font-weight:700;color:white;padding:10px 20px;cursor:pointer;transition:all .4s ease;text-shadow:1px 1px 2px rgba(0,0,0,.2);background-size:200% 100%;background-position:0 0}.animated-button-reroll-for-trait:hover{font-size:16px;background-position:100% 0}.animated-button-reset{border:2px solid #ffffff;border-radius:12px;background-image:linear-gradient(90deg,rgb(255,46,46),rgb(223,5,5) 30%,rgb(217,0,0) 50%,rgb(138,0,0) 80%,rgb(138,0,0));font-size:14px;font-weight:700;color:white;padding:10px 20px;cursor:pointer;transition:all .4s ease;text-shadow:1px 1px 2px rgba(0,0,0,.2);background-size:200% 100%;background-position:50% 0}.animated-button-reset:hover{font-size:16px;background-position:100% 0}.animated-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:100px;padding:10px 35px 10px 10px;height:40px;flex-grow:1;text-align:center;border:2px solid #ccc;border-radius:12px;background-color:#ffffff;background-image:url(/picture/arrow_down.svg);font-size:16px;font-weight:700;color:rgb(0,0,0);cursor:pointer;transition:all .4s ease;text-shadow:1px 1px 2px rgba(0,0,0,.2);background-repeat:no-repeat;background-position:right 10px center;background-size:auto 1em}.animated-select option{background-color:white;color:black;font-size:14px}.animated-select:focus{font-size:16px;background-image:url(/picture/arrow_up.svg);background-repeat:no-repeat;background-position:right 10px center;background-size:auto 1em}body{margin:0;padding:0;font-family:Open Sans,Roboto,sans-serif;background-color:#1a1a1a;color:white}.main-container{display:flex;flex-direction:row;justify-content:space-between;padding:20px;max-width:1200px;margin:50px auto 0;gap:20px}.result-container,.trait-list-container{flex:1 1;display:flex;flex-direction:column;gap:15px}.page-title{font-size:24px}.page-title,.reroll-counter{text-align:center;margin-bottom:15px}.reroll-counter{font-size:20px}.trait-item-content{display:flex;align-items:center;gap:10px}.trait-percentage{margin-left:auto;font-size:14px;color:#ccc}.buttons-container{display:flex;flex-direction:column;gap:15px;margin-top:20px}.reroll-for-trait-container{display:flex;flex-direction:column;gap:10px}.result-content{background-color:#272727;border-radius:15px;padding:20px;box-shadow:0 4px 8px rgba(0,0,0,.2)}.trait-description-container{display:flex;flex-direction:row;gap:20px}.trait-description-section,.trait-image-section{flex:1 1;display:flex;flex-direction:column;align-items:center;text-align:center}.section-label{font-weight:700;margin-bottom:10px}.result-trait-image{width:80px;height:80px;margin-bottom:10px}.result-trait-name{font-size:20px;font-weight:700;margin-bottom:10px}.result-trait-description{white-space:pre-line;text-align:left;padding:10px;background-color:rgba(0,0,0,.2);border-radius:10px}.history-trait-image{width:40px;height:40px;margin:5px;border-radius:5px}.creator-info{text-align:center;margin:20px 0;font-size:14px;color:#888}.boxtTrait_item{width:100%;box-sizing:border-box}@media screen and (max-width:992px){.main-container{padding:15px}.trait-description-container{flex-direction:column}.boxtTrait_list{max-height:300px;overflow-y:auto;grid-template-columns:repeat(2,1fr);gap:5px}.boxtTrait_item{height:auto;min-height:0;font-size:16px;padding:6px 8px}.Trait_logo{height:26px}}@media screen and (max-width:768px){.main-container{flex-direction:column;margin-top:20px;padding:10px}.boxtTrait_list{max-height:300px;overflow-y:auto;grid-template-columns:repeat(2,1fr);gap:5px}.boxtTrait_item{height:auto;min-height:0;font-size:14px;padding:6px 8px}.Trait_logo{height:26px}.percentage{min-width:40px;text-align:right;font-size:10px;color:#ffffff}.trait-description-container{flex-direction:column;gap:15px}.buttons-container{flex-direction:column}.animated-button,.animated-select{font-size:14px;padding:8px 16px}.page-title,.reroll-counter{font-size:20px}.result-trait-image{width:60px;height:60px}.result-trait-name{font-size:18px}.historybox_traits{height:150px;margin-top:20px}.history-trait-image{width:30px;height:30px}}@media screen and (max-width:412px){.main-container{padding:8px}.boxtTrait_list{max-height:300px;overflow-y:auto;grid-template-columns:repeat(2,1fr);gap:5px}.boxtTrait_item{height:auto;min-height:0;font-size:12px;padding:6px 8px}.Trait_logo{height:26px}.percentage{min-width:40px;text-align:right;font-size:10px;color:#ffffff}.trait-percentage{font-size:12px}.result-content{padding:12px}.buttons-container{gap:10px}.animated-button,.animated-select{font-size:12px;padding:6px 12px}}@media screen and (max-height:700px){.main-container{margin-top:10px}.page-title,.reroll-counter{margin-bottom:10px}.boxtTrait_list{max-height:300px;overflow-y:auto;grid-template-columns:repeat(2,1fr);gap:5px}.boxtTrait_item{width:140px;height:auto;min-height:0;font-size:12px;padding:6px 8px}.Trait_logo{height:26px}.percentage{min-width:40px;text-align:right;font-size:10px;color:#ffffff}.historybox_traits{height:120px}.result-content{padding:12px}.buttons-container{margin-top:10px;gap:8px}}@media screen and (max-height:500px){.main-container{flex-direction:row;margin-top:5px}.boxtTrait_list{max-height:200px;overflow-y:auto;grid-template-columns:repeat(2,1fr);gap:4px}.boxtTrait_item{height:auto;min-height:0;font-size:12px;padding:4px 6px}.Trait_logo{height:22px}.percentage{min-width:40px;text-align:right;font-size:10px;color:#ffffff}.historybox_traits{height:80px;margin-top:10px}.trait-description-container{flex-direction:row}.buttons-container{flex-direction:row;flex-wrap:wrap;justify-content:space-between}.reroll-for-trait-container{flex:1 1;min-width:150px}}