@import "https://fonts.googleapis.com/css2?family=Metamorphous&display=swap";@import "https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,100..900;1,100..900&display=swap";:root{--bg-0:var(--blue-dark-0);--bg-1:var(--blue-dark-2);--bg-2:var(--purple-1);--bg-3:var(--pink-1);--overlay-bg:#00000080;--temp-hp:var(--blue-0);--healing:var(--green-light-0);--restore:var(--lime-1);--dmg:var(--red-2);--dmg-ability:var(--orange-dark-0);--severe-dmg:var(--red-1);--white-0:#f2f2f2;--black-0:#0f0f0f;--grey-0:#575252;--grey-1:#615b5b;--grey-light-0:#d0d0d0;--blue-dark-0:#1f2544;--blue-dark-1:#262d55;--blue-dark-2:#474f7a;--blue-dark-3:#596192;--blue-0:#2e4cb6;--blue-1:#1e1eb1;--blue-light-0:#396d78;--blue-light-1:#448794;--blue-light-2:#4e9cac;--blue-light-3:#5dbacc;--purple-dark-0:#372945;--purple-dark-1:#443553;--purple-dark-2:#513c66;--purple-dark-3:#573f6e;--purple-dark-4:#705988;--purple-0:#765e90;--purple-1:#81689d;--purple-clear-0:#7b419735;--magenta-0:#5d0d91;--magenta-1:#892cc5;--magenta-2:#9960a4;--pink-0:#f3acd6;--pink-1:#ffd0ec;--red-0:#931111;--red-1:#9f1212;--red-2:#ca2727;--red-3:#e32e2e;--red-4:#f13030;--red-5:#fe4141;--orange-dark-0:#b06117;--orange-0:#f27746;--lime-0:#6f7c13;--lime-1:#63a319;--green-dark-0:#1b8834;--green-0:#499255;--green-1:#53a961;--font-title:6rem;--font-xxl:4rem;--font-xl:2rem;--font-lg:1.2rem;--font-md:1.08rem;--font-sm:.9rem;--font-xsm:.8rem;--font-xxsm:.7rem}.button{background-color:var(--purple-dark-2);color:var(--white-0);cursor:pointer;border:none;border-radius:.3rem;width:fit-content;height:fit-content;padding:.5rem;font-weight:500;transition:all .2s ease-out;box-shadow:0 10px 20px #00000030,0 6px 6px #0000003b}.button:hover{text-shadow:var(--pink-1) 1px 0 10px}.button:disabled{cursor:not-allowed}.button--secondary{background-color:var(--purple-dark-4);box-shadow:none}.button--secondary-blue{background-color:var(--blue-dark-2);box-shadow:none}.button--border{border:2px solid var(--purple-dark-2);background-color:#0000}.button--dark{background-color:var(--purple-dark-0)}.button--link{padding:0;display:flex}.button--link a{color:var(--white-0);padding:.5rem}.button--link a:hover{text-decoration:none}.button--thin{align-items:center;max-height:1.5rem;display:flex}.button--danger{background-color:var(--red-2)}.button--danger:hover{color:var(--red-5);box-shadow:none;text-shadow:none;background-color:#0000;border-color:#0000}.button--success{background-color:var(--green-1)}.button--success:hover{color:var(--green-1);box-shadow:none;text-shadow:none;background-color:#0000;border-color:#0000}.button--image{display:flex}.button--image img{width:1rem}.button--small{max-height:2rem;padding:.1rem .3rem;font-size:var(--font-sm)!important}.button--small img{width:.8rem}.button--small a{font-size:var(--font-sm)}.button--large{font-size:var(--font-lg)!important}.button--large img{width:1.5rem}.button--large a{font-size:var(--font-lg)}.button--x-large{font-size:var(--font-xl)!important}.button--x-large img{width:1.5rem}.button--x-large a{font-size:var(--font-xl)}.button--pink{background-color:var(--pink-0);color:var(--purple-dark-2)}.button--blue{background-color:var(--blue-dark-1)}.button--flat{box-shadow:none}.button--X{box-shadow:none;color:var(--white-0);background-color:#0000;padding:0;position:absolute;top:.5rem;right:.5rem;font-size:var(--font-sm)!important}.button--X:hover{text-shadow:none;color:var(--red-5)}.button--bold{font-weight:700}.button--plain{box-shadow:none;color:var(--black-0);background-color:buttonface}.button--save{background-color:var(--green-light-1);color:#fff}.button--save:hover{color:var(--green-light-3);box-shadow:none;text-shadow:none;background-color:#0000;border-color:#0000}.button--left-icon img{width:1rem;margin-right:.2rem}.button--empty{box-shadow:none;background-color:#0000}.file-input{box-shadow:none;height:fit-content;font-size:var(--font-md);text-align:center;cursor:pointer;width:fit-content;margin:0;padding:.05rem 0 0}.file-input img{margin-top:.3rem}.file-input input{display:none}.file-input__add-container{border:2px solid #000;justify-content:center;align-items:center;min-height:4rem;display:flex;position:relative}.file-input__add{font-size:var(--font-lg);background-color:#3030309c;border-radius:50%;align-items:center;width:fit-content;height:1.8rem;padding:.5rem;font-weight:800;display:flex;position:absolute}label{text-align:start;font-weight:600;font-size:var(--font-xsm);flex-direction:column;margin-top:.2rem;display:flex}.input input,.input textarea{resize:none;height:1.5rem;font-size:var(--font-xsm);border:none;border-radius:.3rem;margin:.2rem 0 0;padding:.5rem;box-shadow:0 2px 4px #0006,0 7px 13px -3px #0000004d,inset 0 -3px #0003}.input__error{color:var(--red-4);margin-top:.2rem;font-weight:400}.input--label-inline{display:block}.input--label-inline input,.input--label-inline textarea{margin-left:.4rem}.input--label-md{font-size:var(--font-md);margin-top:.6rem}.input--label-md input{height:100%;font-size:var(--font-md)}.input--label-lg{font-size:var(--font-lg)}.input--label-lg input{height:100%;font-size:var(--font-lg)}.input--label-xl{font-size:var(--font-xl)}.input--label-xl input{height:100%;font-size:var(--font-xl)}.input--label-no-bold{font-weight:400}.input--fit{width:fit-content}.input--no-arrows{-moz-appearance:textfield}.input--no-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input--no-arrows::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input--medium{width:10rem}.input--small{width:6rem}.input--x-small{width:3rem}.input--empty{color:#fff;background-color:#0000;box-shadow:none!important;border:1px solid #fff!important}.link{color:var(--pink-1);align-self:center;text-decoration:none;transition:all .2s ease-out}.link:hover{text-decoration:underline}.select--label-thin{font-size:var(--font-xsm);margin-top:.2rem}.select--fit{width:fit-content}.window-dialog{background-color:var(--bg-1);color:var(--white-0);text-align:start;z-index:1;border:2px solid var(--blue-dark-0);border-radius:.3rem;margin:0;padding:.43rem 1rem 1rem;position:absolute;bottom:25%;box-shadow:0 14px 28px #1a191940,0 10px 10px #00000038}.window-dialog__title{text-align:center;-webkit-user-select:none;user-select:none;margin-bottom:.3rem}.window-dialog__content{height:100%;overflow-y:auto}.window-dialog__content form{flex-direction:column;display:flex}.window-dialog ::-webkit-scrollbar-thumb{background-color:var(--blue-dark-3)}.window-dialog ::-webkit-scrollbar-track{background-color:var(--blue-dark-0)}.box-stat{text-align:center}.box-stat__content{border:2px solid var(--blue-dark-2);background-color:var(--blue-dark-1);text-align:center;border-radius:.3rem;margin-top:.1rem;padding:.5rem;box-shadow:0 3px 8px #0000003d}.characters-page{padding:2rem}.characters-page h2{font-size:var(--font-xl)}.characters-list{flex-direction:column;gap:.3rem;width:fit-content;max-height:87vh;display:flex;overflow-y:auto}.characters-list__title{align-items:center;gap:.9rem;margin-bottom:.5rem;display:flex}.characters-list__title h2{margin:0}.character-card{background-color:var(--bg-1);border-radius:1rem;gap:1rem;width:40rem;padding:1rem;display:flex;position:relative;box-shadow:0 3px 8px #0000003d}.character-card h3{font-size:var(--font-lg)}.character-card h3 span{font-weight:300}.character-card__pic,.character-card .file-input img{object-fit:cover;border-radius:50%;width:6.5rem;height:6.5rem}.character-card__ruleset{font-size:var(--font-lg);font-weight:700;position:absolute;bottom:.4rem;right:.6rem}.character-card__open-btn{margin-top:.3rem}.character-card__delete-btn img{width:1.2rem}.new-character-card{flex-wrap:wrap}.new-character-card__inputs{flex-direction:column;gap:.5rem;width:100%;display:flex}.new-character-card__inputs label{margin-top:0}.login{text-align:center;border:3px solid var(--white-0);background-color:var(--purple-clear-0);border-radius:2rem;flex-direction:column;width:fit-content;margin:15rem auto;padding:2rem;display:flex;box-shadow:0 5px 15px #00000059}.character-sheet{background-color:var(--blue-dark-0);height:100%;position:relative;overflow-y:auto}.character-sheet__edit-btn{padding:0;position:absolute;bottom:.5rem;right:.5rem}.character-sheet__edit-btn img{width:2rem}.character-navbar{background-color:var(--blue-dark-2);gap:.1rem;display:flex}.character-navbar__tab{background-color:var(--blue-dark-0);border-radius:.3rem .3rem 0 0;padding:.2rem .3rem}.character-navbar__tab--selected{border-bottom:2px solid var(--blue-light-0)}.character-sheet-main{padding:.8rem;position:relative}.character-sheet-main__row{gap:1rem;display:flex}.character-sheet-main__col{flex-direction:column;gap:1rem;display:flex}.character-sheet-main .character-sheet-main-header{justify-content:space-between;margin-bottom:1rem;display:flex}.character-sheet-main .character-sheet-main-header__character-info{gap:.8rem;display:flex}.character-sheet-main .character-sheet-main-header__character-pic{object-fit:cover;border-radius:50%;width:6.5rem;height:6.5rem}.character-sheet-main .character-sheet-main-header__name{font-size:var(--font-xl)}.character-sheet-main .character-sheet-main-header__right{gap:1rem;display:flex}.character-sheet-main .character-sheet-main-header__inspiration{color:var(--pink-0)}.character-sheet-main .character-sheet-main-header__rest-buttons{flex-direction:column;gap:.3rem;display:flex}.character-sheet-main .character-sheet-main-header__rest-buttons button{width:100%}.character-sheet-main .character-sheet-main-header__lvl-manager{flex-direction:column;display:flex}.character-sheet-main .character-sheet-main-header__lvl-manager p{margin-bottom:.3rem}.character-sheet-main .character-sheet-ability-scores{gap:.4rem;display:flex}.character-sheet-main .character-sheet-saving-throws__title{margin:.6rem 0 .5rem}.character-sheet-main .character-sheet-saving-throws__list{gap:.4rem;display:flex}.character-sheet-main .character-sheet-attributes{flex-direction:column;gap:.8rem;width:fit-content;margin-top:1rem;display:flex}.character-sheet-main .character-sheet-attributes__row{flex-wrap:wrap;gap:.8rem;display:flex}.main-stats{text-align:center;flex-direction:column;gap:.5rem;display:flex}.main-stats__row{gap:1rem;display:flex}.main-stats__column{flex-direction:column;gap:.7rem;display:flex}.main-stats__ac{cursor:pointer;align-content:center;position:relative}.main-stats__ac img{filter:drop-shadow(0 0 .75rem #18171785);width:6.3rem}.main-stats__ac p{font-size:var(--font-xl);position:absolute;inset:2.3rem 0 0}.main-stats__ac button{background-color:var(--grey-3);font-size:var(--font-sm);position:absolute;top:2.6rem;left:1.7rem}.edit-armor-dialog__content{gap:1rem;display:flex}.edit-armor-dialog__content button[type=submit]{margin-top:.7rem}.edit-armor-dialog__items{flex-direction:column;gap:.4rem;width:100%;max-width:12.6rem;display:flex}.ability-score{background-color:var(--blue-dark-2);text-align:center;cursor:pointer;border-radius:.8rem;flex-direction:column;align-items:center;gap:.2rem;width:4rem;padding:.2rem;display:flex;box-shadow:0 3px 8px #0000003d}.ability-score__name{font-weight:700}.ability-score__value{background-color:var(--blue-dark-3);border:1px solid #0000;border-radius:.8rem;padding:.2rem .5rem}.ability-score__mod{font-size:var(--font-xsm);padding:0 .1rem 0 0}.ability-score:hover .ability-score__value{border-color:var(--pink-1)}.saving-throw{background-color:var(--blue-dark-2);cursor:pointer;border:1px solid #0000;border-radius:.8rem;justify-content:center;align-items:center;gap:.2rem;width:4.6rem;padding:.3rem;display:flex;position:relative;box-shadow:0 3px 8px #0000003d}.saving-throw__name{font-weight:700;font-size:var(--font-sm)}.saving-throw__mod{font-size:var(--font-xsm);padding:0 .1rem 0 0}.saving-throw img{width:.9rem;position:absolute;top:-.4rem;left:-.4rem}.saving-throw:hover{border-color:var(--pink-1)}:root{--progress-bar-width:200px;--progress-bar-height:200px}.hp-management{flex-direction:column;align-items:center;gap:1rem;width:fit-content;margin-bottom:1.5rem;display:flex}.hp-management__input{gap:.3rem;min-width:20rem;display:flex}.hp-management__input input{height:100%;font-size:var(--font-lg);text-align:center;max-width:4rem;margin:0}.hp-management__buttons{flex-wrap:wrap;gap:.2rem;width:100%;max-width:16rem;margin-top:.18rem;display:flex}.hp-management__buttons button{width:100%;max-width:5rem;height:2rem;padding:.2rem 0 0}.hp-management__buttons button img{width:1.4rem}.circular-hp-bar{width:var(--progress-bar-width);height:var(--progress-bar-height);border-radius:50%;justify-content:center;align-items:center;margin-bottom:.5rem;display:flex;position:relative;box-shadow:0 0 10px #10101080}.circular-hp-bar__inner-circle{width:calc(var(--progress-bar-width) - 40px);height:calc(var(--progress-bar-height) - 40px);background-color:var(--blue-dark-0);border-radius:50%;position:absolute}.circular-hp-bar__inner-circle--middle{background-color:var(--blue-dark-2);border-radius:.5rem}.circular-hp-bar__center{text-align:center;cursor:pointer;background-color:var(--blue-dark-2);border-radius:.5rem;position:relative}.circular-hp-bar__hp{font-size:var(--font-md);background-color:var(--brown-1);border-radius:1rem;margin:0;padding:.5rem}.circular-hp-bar__temp-hp{background-color:var(--temp-hp);border-top-left-radius:.5rem;border-top-right-radius:.5rem}.list-display__title{margin-bottom:.15rem;font-weight:700}.list-display__row{background-color:var(--blue-dark-3);font-size:var(--font-sm);padding:.2rem .25rem}.list-display__row:first-child{border-top-left-radius:.1rem;border-top-right-radius:.1rem}.list-display__row:last-child{border-bottom-right-radius:.1rem;border-bottom-left-radius:.1rem}.list-display__row:nth-child(2n){background-color:var(--blue-dark-2)}.edit-character-sheet-main{height:100%;position:relative;overflow-y:auto}.edit-character-sheet-main .edit-character-sheet-main-header__column{flex-direction:column;gap:.2rem;display:flex}.edit-character-sheet-main .edit-character-sheet-main-header__classes{background-color:var(--blue-dark-1);flex-direction:column;gap:.1rem;padding:.3rem;display:flex}.edit-character-sheet-main .edit-character-sheet-main-header__class-row{background-color:var(--blue-dark-2);justify-content:space-between;padding:.3rem;display:flex}.edit-character-sheet-main .edit-character-sheet-main-header__class-row--left{align-items:center;gap:.3rem;display:flex}.save-indicator{position:fixed;top:0;right:0}.save-indicator p{background-color:var(--opac-1);color:var(--green-light-3);font-size:var(--font-xsm);border-bottom-left-radius:.5rem;padding:.3rem .5rem;font-weight:700}.modal{background-color:var(--purple-0);color:#fff;border-color:#000;border-radius:.3rem;padding:1.8rem 2rem 1rem;position:fixed;inset:0;box-shadow:0 5px 15px #00000059}.modal__bg{background-color:var(--opac-0);z-index:1;width:100%;height:100%;position:fixed}.modal__title{text-align:center;-webkit-user-select:none;user-select:none;margin-bottom:.5rem}.modal__content{height:100%;overflow-y:auto}.modal__content form{flex-direction:column;display:flex}.modal:focus{outline-width:0}.errors{z-index:10;max-height:50vh;position:fixed;top:1rem;right:1rem;overflow-y:auto}.errors button{z-index:10;background-color:var(--white-0);color:#000;padding:0 .2rem;top:0;left:0}.error{background-color:var(--black-0);color:var(--red-5);border-radius:1rem;margin-bottom:.3rem;padding:1rem;font-weight:700;position:relative}.navbar{background-color:var(--bg-0);border-bottom:2px solid var(--magenta-2);gap:2rem;margin-bottom:1rem;padding:.6rem;display:flex}.navbar--open .navbar__link,.navbar--open .navbar__userbox{display:block}.navbar__hamburger-btn{display:none}@media (width<=950px){.navbar{flex-direction:column}.navbar__hamburger-btn{width:fit-content;display:block}.navbar__hamburger-btn img{width:1.4rem}.navbar__link{display:none}}.navbar__logo{width:2.6rem}.navbar__link{color:#fff;font-size:var(--font-lg);transition:all .2s ease-in-out}.navbar__link--active{color:var(--pink-1);border-bottom:1px solid var(--pink-1)}.navbar__link--active:hover{text-decoration:none}.user-box{border-bottom-left-radius:1rem;align-items:baseline;gap:1rem;display:flex;position:absolute;top:0;right:0}.user-box__menu{background-color:var(--bg-1);border-radius:.5rem;flex-direction:column;gap:.3rem;padding:.5rem;display:flex;position:absolute;top:3.1rem;right:0}.user-box img{width:2.5rem}.game-card{background-color:var(--bg-1);border-radius:1rem;flex-direction:column;gap:.6rem;padding:.3rem 1rem 1rem;transition:all .2s ease-out;display:flex;position:relative;box-shadow:0 5px 15px #00000059}.game-card--form-card{flex-direction:column}.game-card__name{font-size:var(--font-lg);margin:0}.game-card__bottom-row{justify-content:space-between;display:flex}.game-card__buttons{gap:.3rem;display:flex}.game-card__ruleset{text-align:end;font-size:var(--font-sm)}.home{text-align:center;padding:0 1.4rem}.home h1{margin-bottom:6rem}@media (width<=603px){.home h1{margin-bottom:1rem}}.play{flex-wrap:wrap;justify-content:center;gap:2rem;height:fit-content;display:flex}.play__join-game{gap:.3rem;display:flex}.play__join-game button{align-self:flex-end}.play__column{background-color:var(--bg-0);border-radius:1rem;flex-direction:column;gap:.3rem;width:15rem;max-height:25rem;padding:1rem;display:flex;overflow-y:auto;box-shadow:0 6px 12px -2px #32325d40,0 3px 7px -3px #0000004d}@media (width<=396px){.play__column{max-height:10.3rem}.play{gap:.4rem}}.modification-process{background-color:var(--bg-0);border:1px solid #000;border-radius:.3rem;height:80vh;padding:.2rem;display:flex;position:relative;overflow-y:auto;box-shadow:0 5px 15px #00000059}.modification-process__overlay{background-color:var(--overlay-bg);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modification-process__sidebar{border-right:.3rem solid var(--purple-dark-1);flex-direction:column;gap:.2rem;padding-right:.2rem;display:flex}.modification-process__sidebar-btn{background-color:var(--purple-dark-0);width:100%}.modification-process__sidebar-btn--active{background-color:var(--purple-dark-3)}.modification-process__content{color:var(--white-0);text-align:center;justify-content:center;min-width:30rem;padding:.5rem;display:flex;overflow-y:auto}.modification-process__content h2{font-size:var(--font-md)}.dnd-character-modification-process{justify-content:flex-start;width:40rem;display:flex}.dnd-character-modification-process .setup-step{margin:0 auto}.dnd-character-modification-process .setup-step__join-game{justify-content:center;align-items:center;gap:.5rem;margin:.3rem 0 1rem;display:flex}.dnd-character-modification-process .setup-step__join-game-code{gap:.3rem;display:flex}.dnd-character-modification-process .setup-step__join-game-code input{margin:0}.dnd-character-modification-process .setup-step__join-game-code button{align-self:flex-end}.dnd-character-modification-process .classes-step__class-options{margin-right:5rem}.dnd-character-modification-process .classes-step__class-options button{width:100%}.dnd-character-modification-process .classes-step__class-select-btn{position:absolute;bottom:.5rem;width:3rem!important}.dnd-character-modification-process .classes-step__lvl-container{position:absolute;top:-.05rem}.dnd-character-modification-process .classes-step__lvl-container p{font-size:var(--font-sm);white-space:nowrap}.dnd-character-modification-process .classes-step__lvl-container button{width:1rem;font-size:var(--font-md);padding:0;font-weight:700}.dnd-character-modification-process .classes-step__class-option{gap:.3rem;margin-bottom:.3rem;display:flex}.dnd-character-modification-process .class-options-step{margin:0 auto}.dnd-character-modification-process .class-options-step__class{background-color:var(--bg-1);border-radius:.3rem;margin-bottom:1rem;padding:.5rem}.dnd-character-modification-process .class-options-step__class h1{font-size:var(--font-lg);margin:0 0 .5rem}.dnd-character-modification-process .class-options-step__skills{flex-direction:column;gap:1.5rem;margin-top:.5rem;display:flex}.dnd-character-modification-process .class-options-step__starting-items{margin-top:1rem}.dnd-character-modification-process .class-options-step__starting-item-desc{white-space:pre-wrap;background:var(--bg-1);border-radius:.2rem;margin:.25rem 0 .8rem;padding:.3rem;display:block;box-shadow:0 3px 8px #0000003d}.checkbox{flex-direction:row;align-items:center;width:fit-content;display:flex}.checkbox input{margin-left:.4rem}.table{border-collapse:collapse;width:100%}.table td{text-align:start;border:2px solid #000;padding:.2rem}.table th{background-color:#11172f;border:2.5px solid #000;padding:.2rem}.table tr:nth-child(2n){background-color:#182041}.table tr:nth-child(odd){background-color:var(--blue-dark-1)}*{box-sizing:border-box;font-family:Petrona,Avenir,Helvetica,Arial,sans-serif;font-size:var(--font-md)}::-webkit-scrollbar{width:.5rem;padding-top:.3rem}::-webkit-scrollbar-track{background-color:var(--purple-dark-0)}::-webkit-scrollbar-thumb{background-color:var(--purple-dark-2);border-radius:1rem}html{max-width:fit-content}body{color:var(--white-0);background:url(/images/bg.jpg) 0 75%/cover no-repeat;width:100vw;height:100vh;margin:0;overflow:hidden}#root{height:100%}h1,h2,h3,h4,h5,h6{margin:0 0 .5rem}h1{font-size:var(--font-title);text-shadow:2px 3px 5px var(--black-0);margin-top:2rem;font-family:Metamorphous,Avenir,Helvetica,Arial,sans-serif}@media (width<=950px){h1{font-size:calc(var(--font-title) * .5);margin-top:4rem}}@media (width<=396px){h1{font-size:calc(var(--font-title) * .3)}}h2{font-size:var(--font-lg);font-family:Metamorphous,Avenir,Helvetica,Arial,sans-serif}p{font-size:var(--font-md);margin:0}ul{width:fit-content;margin:0 auto}.form__footer{justify-content:center;gap:.3rem;margin-top:1rem;display:flex}