.character-top-container{width:100%;height:750px;background:#111}.character-top-container .header-image{width:100%;height:100%;position:absolute;top:-100px;z-index:1}.character-top-container .header-image.fighter{background:url("/public/img/pristontale/background/characters/fighter_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.archer{background:url("/public/img/pristontale/background/characters/archer_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.priestess{background:url("/public/img/pristontale/background/characters/priestess_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.mechanician{background:url("/public/img/pristontale/background/characters/mechanician_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.magician{background:url("/public/img/pristontale/background/characters/magician_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.atalanta{background:url("/public/img/pristontale/background/characters/atalanta_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.assassin{background:url("/public/img/pristontale/background/characters/assassin_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.pikeman{background:url("/public/img/pristontale/background/characters/pikeman_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.knight{background:url("/public/img/pristontale/background/characters/knight_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-image.shaman{background:url("/public/img/pristontale/background/characters/shaman_top_bg.png") no-repeat center;background-size:cover}.character-top-container .header-box{width:100%;display:flex;flex-direction:column;position:relative;top:100px;left:0;z-index:10;gap:1rem}.character-top-container .header-box .name{font-family:"Charm",cursive;font-weight:700;font-size:3.5rem;text-shadow:3px 3px 2px rgba(0,0,0,.5);letter-spacing:.05rem;color:#ddd}.character-top-container .header-box .name h1{font-family:"Charm",cursive;font-weight:700;font-size:3.5rem;text-shadow:3px 3px 2px rgba(0,0,0,.5);letter-spacing:.05rem;color:#ddd;margin:0;padding:0}.character-top-container .header-box .slogan{text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1.2rem;letter-spacing:.02rem;color:#e6af67}.character-top-container .header-box .slogan h2{font-family:"Roboto",system-ui;font-weight:500;font-size:1.2rem;letter-spacing:.02rem;color:#e6af67;margin:0;padding:0}.character-top-container .header-box .description{max-width:600px;text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1rem;letter-spacing:.02rem;color:#ddd}.character-stats-container{width:100%;inset:0;position:relative;top:-350px;margin-bottom:100px;z-index:10}.character-stats-container .stats-box-container{display:flex;flex-direction:column;justify-content:flex-start}.character-stats-container .stats-box-container .stats-box{display:flex;flex-direction:column;max-width:500px;min-height:200px;background-color:rgba(34,34,34,.71);border:1px rgba(230,175,103,.53) solid;justify-content:flex-start;margin-bottom:2rem}.character-stats-container .stats-box-container .stats-box .stats-box-header{position:relative;top:0;height:45px;display:flex;flex-direction:column;background-color:rgba(20,20,20,.5)}.character-stats-container .stats-box-container .stats-box .stats-box-header .stats-icon{position:relative;top:-20px;left:-20px;color:#e6af67;font-size:2.5rem}.character-stats-container .stats-box-container .stats-box .stats-box-header .title{position:relative;top:-35px;left:25px;text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1rem;letter-spacing:.02rem;color:#eee}.character-stats-container .stats-box-container .stats-box .base-stats{display:flex;flex-direction:column;padding:1rem;gap:1rem}.character-stats-container .stats-box-container .stats-box .base-stats .base-icon{font-size:1.2rem;position:relative;top:2px;right:5px}.character-stats-container .stats-box-container .stats-box .base-stats .stat{display:flex;flex-wrap:wrap;gap:1rem}.character-stats-container .stats-box-container .stats-box .base-stats .stat .name{flex:1 1;max-width:100px;text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1rem;letter-spacing:.02rem;color:#eee}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines{flex:1 1;background-color:#222;border-radius:5px;border:1px rgba(230,175,103,.34) solid}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar{height:20px;border-radius:5px;border:1px rgba(230,175,103,.34) solid;background-color:#e6af67;text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1rem;letter-spacing:.02rem;color:#eee;text-align:center}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-10{width:10%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-20{width:20%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-30{width:30%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-40{width:40%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-50{width:50%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-60{width:60%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-70{width:70%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-80{width:80%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-90{width:90%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .lines .bar.w-100{width:100%}.character-stats-container .stats-box-container .stats-box .base-stats .stat .bars{flex:1 1;display:flex;justify-content:space-evenly;gap:.5rem}.character-stats-container .stats-box-container .stats-box .base-stats .stat .bars .bar{width:60px;height:20px;background-color:rgba(230,175,103,.83);border-radius:5px;border:1px rgba(230,175,103,.39) solid}.character-stats-container .stats-box-container .stats-box .base-stats .stat .bars .bar-empty{width:60px;height:20px;background-color:#222;border-radius:5px;border:1px rgba(230,175,103,.34) solid}.character-stats-container .stats-box-container .stats-box .base-stats .stat .field{flex:1 1;display:flex;flex-direction:row;justify-content:space-between}.character-stats-container .stats-box-container .stats-box .base-stats .stat .field .name{text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:.9rem;letter-spacing:.02rem;color:#eee}.character-stats-container .stats-box-container .stats-box .base-stats .stat .field .name span{font-size:1.5rem;color:#e6af67;position:relative;top:3px;left:-5px}.character-stats-container .stats-box-container .stats-box .base-stats .stat .field .value{text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:.9rem;letter-spacing:.02rem;color:#e6af67;position:relative;top:9px}.character-skills-container{width:100%;height:100vh;position:relative;top:-350px;z-index:10;margin-bottom:200px}@media(max-width: 1280px){.character-skills-container{margin-bottom:1800px}}@media(max-width: 665px){.character-skills-container{margin-bottom:2800px}}.character-skills-container .skills-box{width:100%;display:flex;flex-direction:column;justify-content:flex-start}.character-skills-container .skills-box .skill-section{display:flex;flex-direction:column;padding:1rem}.character-skills-container .skills-box .skill-section .skill-header{height:45px;display:flex;flex-direction:row;justify-content:flex-start}.character-skills-container .skills-box .skill-section .skill-header .header-level{width:60px;height:50px;display:flex;position:relative;top:-5px;left:-5px;color:#e6af67;background-color:rgba(166,117,55,.51);border:1px rgba(230,175,103,.63) solid;border-radius:10px;justify-content:center;align-items:center;text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:2.5rem;letter-spacing:.02rem}.character-skills-container .skills-box .skill-section .skill-header .header-name{width:100%;height:35px;text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1.5rem;letter-spacing:.02rem;color:#e6b26f;background-color:rgba(230,175,103,.36);border-top:1px rgba(230,175,103,.38) solid;border-bottom:1px rgba(230,175,103,.38) solid;border-right:1px rgba(230,175,103,.38) solid;border-top-right-radius:100px;border-bottom-right-radius:10px;position:relative;top:3px;left:-5px;padding-left:1rem}.character-skills-container .skills-box .skill-section .skill-previews{display:flex;flex-direction:row;justify-content:flex-start;gap:1rem;margin-top:1rem;flex-wrap:wrap}.character-skills-container .skills-box .skill-section .skill-previews .skill-box{position:relative;width:291px;max-height:225px;display:flex;flex-direction:column;background-color:rgba(34,34,34,.5);border:1px rgba(230,175,103,.53) solid;border-radius:4px;gap:.5rem;padding:1rem;overflow:hidden}@media(max-width: 662px){.character-skills-container .skills-box .skill-section .skill-previews .skill-box{width:100%}}.character-skills-container .skills-box .skill-section .skill-previews .skill-box.primal{background-color:rgba(34,34,34,.5);box-shadow:#6666c8 0 0 10px 1px;border:1px #6666c8 solid;border-radius:4px;gap:.5rem;padding:1rem;overflow:hidden}.character-skills-container .skills-box .skill-section .skill-previews .skill-box.ultimate{background-color:rgba(34,34,34,.5);box-shadow:#c1404c 0 0 10px 1px;border:1px #c1404c solid;border-radius:4px;gap:.5rem;padding:1rem;overflow:hidden}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .special-title{width:100%;height:30px;position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;font-family:"Roboto",system-ui;font-weight:500;font-size:1rem;letter-spacing:.02rem;text-transform:uppercase;color:hsla(0,0%,100%,.7);z-index:20}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .special-title.primal{background-color:rgba(102,102,200,.5)}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .special-title.ultimate{background-color:rgba(193,64,76,.5)}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .5s ease-in-out;z-index:20;display:block}.character-skills-container .skills-box .skill-section .skill-previews .skill-box:hover .preview{opacity:1}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .icon{display:flex;justify-content:center;align-items:center;pointer-events:none}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .icon img{border-radius:100px;border:1px rgba(230,175,103,.45) solid;overflow:hidden}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .name{text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1.5rem;letter-spacing:.02rem;color:#e6b26f;text-align:center;pointer-events:none}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level{text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:.9rem;letter-spacing:.02rem;color:#ccc;text-align:center;pointer-events:none}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type{text-shadow:none;border-radius:5px;padding:.3rem .3rem .3rem .3rem;margin-left:.5rem;color:#eee}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type.attack{background-color:rgba(230,175,103,.73)}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type.passive{background-color:rgba(179,103,230,.73)}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type.buff{background-color:rgba(129,140,243,.62)}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type.debuff{background-color:#a8424b}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type.healing{background-color:#498e4b}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .level .type.summon{background-color:#4f9a90}.character-skills-container .skills-box .skill-section .skill-previews .skill-box .description{text-shadow:2px 2px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:400;font-size:.85rem;letter-spacing:.02rem;color:#aaa;text-align:center;padding-top:.5rem;pointer-events:none}.container-characters{width:100%;position:relative;background:url("/public/img/pristontale/background/dark-bg.png") no-repeat center center;background-size:cover;min-height:100vh;top:-350px;display:flex;flex-direction:column;z-index:1;filter:sepia(0%) grayscale(0%);padding-bottom:300px}.container-characters .separator{top:-10px}.container-characters .section-container{display:flex;flex-direction:column;justify-content:center}.container-characters .section-container .section-title{display:flex;padding:3rem 0 1rem 0;color:#e6af67;text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:300;font-size:2.8rem;letter-spacing:.02rem;justify-content:center}.container-characters .section-container .section-subtext{max-width:600px;display:flex;justify-content:center;text-align:center;color:#eee;text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:300;font-size:1rem;letter-spacing:.02rem;padding-bottom:3rem}.container-characters .characters-block{display:flex;flex-direction:row;flex-wrap:wrap;min-height:250px;gap:3rem;justify-content:center}.container-characters .characters-block .character-box a{max-width:200px;display:flex;flex-direction:column;background-color:rgba(17,17,17,.79);border:1px rgba(230,175,103,.35) solid;justify-content:center;align-items:center;border-radius:5px;background:url("/public/img/pristontale/background/char_bg.png") no-repeat center center;background-size:cover;margin-bottom:2rem;text-decoration:none}.container-characters .characters-block .character-box a .name{color:#ccc;text-shadow:3px 3px 2px rgba(0,0,0,.5);font-family:"Roboto",system-ui;font-weight:500;font-size:1.4rem;position:relative;z-index:25}.container-characters .characters-block .character-box a .image{transform:scale(1.3)}.container-characters .characters-block .character-box a .icon{position:relative;top:20px;overflow:hidden;border-radius:5px}.container-characters .characters-block .character-box a:hover{cursor:pointer;box-shadow:#e6af67 2px 2px 10px}.container-characters .characters-block .character-box a:hover .image{transform:scale(1.4)}.footer-container{margin-top:-350px}