body{display:flex;min-height:100dvh;min-width:100dvw;margin:0;padding:0}:root{display:flex;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-bg-color: #0f0f0f;--secondary-bg-color: #1d1c1d;--tertiary-bg-color: #232323;--quaternary-bg-color: #424242;--font-color: #aca8c0;--primary-highlight-color: #7126fe;--secondary-highlight-color: #8b4dfe;background:var(--primary-bg-color);color:var(--font-color)}#root{display:flex;min-height:100dvh;min-width:100dvw;margin:0;padding:0;justify-content:center}.navLink{position:absolute;top:50%;transform:translateY(-50%)}.logo{height:6em;will-change:filter;transition:filter .3s;outline-style:solid;outline-color:#fff}.logo:hover{filter:drop-shadow(0 0 2em #f31010cc)}.roster-builder{display:flex;flex-direction:column;align-items:start;width:50dvw}hr{display:inline-block;width:100%;border-bottom:solid var(--font-color);border-width:1px}.player-pool{display:flex;flex-wrap:wrap}.player-option{background-color:var(--secondary-bg-color);width:15%;padding-bottom:5px;margin:.5em;cursor:pointer}.player-option:hover{background-color:var(--tertiary-bg-color)}.center{display:flex;align-self:center}button{display:flex;justify-content:center;height:25px;width:25px;border-radius:50%;background-color:var(--primary-highlight-color);border:none;text-align:center;font-size:18px;font-weight:700;margin:1em}button:hover{background-color:var(--secondary-highlight-color)}.buttons{align-self:center}.modal-overlay{position:fixed;inset:0;background-color:#000c;display:flex;justify-content:center;align-items:center}.modal-content{width:auto;height:auto;min-width:20em;min-height:15em;justify-content:center;background-color:var(--tertiary-bg-color);border-radius:8px;box-shadow:0 4px 8px #0003;position:relative;padding:10px}.modal-close-button{position:absolute;top:10px;right:10px;background:none;border:none;font-size:20px;cursor:pointer}.roster{display:grid;width:40dvw;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);justify-content:space-evenly;padding:1em .25em;margin:1em;border-radius:1em;border-style:solid;border:#383838}.team-name{grid-column:2 / 5;align-self:center;border-radius:.25em;width:50%;background-color:var(--primary-bg-color)}.bl-indicator{grid-column:1;grid-row:1}.br-indicator{grid-column:5;grid-row:1}.tank-box{grid-column:1;grid-row:2}.healer-box{grid-column:2;grid-row:2}.dps1-box{grid-column:3;grid-row:2}.dps2-box{grid-column:4;grid-row:2}.dps3-box{grid-column:5;grid-row:2}.center-flex{display:flex;align-items:center;justify-content:center;flex-direction:column}.input{border:none;display:inline;font-family:inherit;font-size:x-large;font-weight:600;text-align:center;justify-self:center}.header{font-weight:200;text-align:center;margin-bottom:.5em}.dropdown{margin:0 1em .5em;width:80%;font-size:1.25em;border-radius:.25em;border:var(--secondary-bg-color);background-color:var(--secondary-bg-color)}.sliderContainer{margin-left:.5em}label{margin:.5em;justify-self:center}.dropdown-label{display:block;text-align:left;margin:0 auto;font-weight:700}input{accent-color:var(--primary-highlight-color);width:1em;height:1em}.deathknight{color:#c41e3a}.demonhunter{color:#a330c9}.druid{color:#ff7c0a}.evoker{color:#33937f}.hunter{color:#aad372}.mage{color:#3fc7eb}.monk{color:#00ff98}.paladin{color:#f48cba}.priest{color:#fff}.rogue{color:#fff468}.shaman{color:#0070dd}.warlock{color:#8788ee}.warrior{color:#c69b6d}