.char-area{position:absolute;top:0;left:clamp(380px,28vw,500px);width:calc(100% - clamp(380px,28vw,500px));height:100%}.charcreator{position:absolute;top:0;right:0;bottom:0;left:0;font-family:Roboto;font-size:16px;line-height:1.5;color:#cdcdcd}.creator,.handler,.navigation{width:clamp(380px,28vw,500px)}.navigation{position:absolute;left:0;top:0;height:30px;margin:10px 0;display:flex;justify-content:center;flex-direction:row;border-right:1px solid rgba(128,128,128,.06);box-shadow:0 1px 25px #0000001a}.navigation li{width:100%;text-transform:uppercase;font-size:1.4rem;padding:15px 0;min-height:35px;color:#6b6b6b;background:#fff;transition:all .5s ease;display:flex;justify-content:center;align-items:center;position:relative}.navigation li:after{content:"";position:absolute;right:-1px;height:100%;width:2px;background:#6a50aa;opacity:0;transition:all .5s ease}.navigation li:hover{filter:brightness(1.25);color:#000}.navigation li.active{color:#fff;background:#6a50aa;box-shadow:3.58px 7.562px 10px #6836af73,5.137px 7.384px 150px #5732dc59}.navigation li.locked{opacity:.35;cursor:not-allowed}.navigation li.active:after{opacity:1;box-shadow:#6a50aa 0 -5px 7px,#3a81bc 0 4px 15px}.creator{position:absolute;left:0;top:60px;height:calc(100vh - 60px);background:#f9f9f9;box-shadow:0 1px 25px #0000001a}.handler{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;overflow:hidden}.slides{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;width:100%;height:100%;transition:transform .5s cubic-bezier(.22,1,.36,1)}.slides .slide{width:100%;height:100%;min-height:100%;flex:0 0 100%;overflow:hidden}.header{position:relative;overflow:hidden;width:100%;height:7.5rem;margin:auto;box-shadow:#00000040 0 1px 1px,#0003 0 2px 5px;display:flex;justify-content:center;align-items:center;background:url(../images/charcreator/header.jpg) top right/cover;font-family:Futura}.header h2{position:relative;width:90%;text-align:center;font-size:3rem;font-style:italic;font-variant:small-caps;color:#f0f0f0;letter-spacing:.1rem;text-shadow:0 0 .2rem rgba(0,0,0,.25)}.header h2:before{content:attr(data-before);position:absolute;margin:auto;top:-.85rem;left:0;width:100%;font-variant:small-caps;font-style:italic;font-size:4.4rem;line-height:4.4rem;letter-spacing:.2rem;color:#b4b4b4;filter:blur(.25rem);opacity:.6}.slidecontainer{height:calc(98% - 150px);width:95%;margin:auto;margin-top:.5rem;overflow-y:auto}.infotext{width:95%;margin:.8rem auto 0;display:flex;flex-direction:column;text-align:center;color:#333;font-size:1.25rem}.slidebox{width:95%;margin:0 auto;display:flex;flex-direction:column}label{width:95%;margin:1rem auto .5rem;padding:0 .75rem;display:inline-block;font-size:1.5rem;letter-spacing:-.01rem;color:#752cbd;border-left:.3rem solid #752cbd;border-radius:.3rem;background:#752cbd1a;font-family:Futura}.form-control{margin:0 auto;width:92%}.form-control ul{padding:.5rem 1rem;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;list-style:none}.form-control ul li{width:1.5rem;height:1.5rem;border-radius:100%;transition:all .2s ease}.form-control ul li.active{transform:scale(1.1);box-shadow:0 0 .5rem #191919bf}.form-control ul li:hover{transform:scale(.9);box-shadow:0 0 .5rem #9b7edb73}.form-control ul li.active:hover{transform:scale(1.1);box-shadow:0 0 .5rem #191919bf}.pagenav{width:95%;margin:2rem auto 0;display:flex;justify-content:flex-end;font-size:1.2rem}.pagenav button{padding:.75rem 1.5rem;margin:0 .1rem;border:none;border-radius:.3rem;color:#fafafa;background:#6a50aa;transition:.2s ease}.pagenav button:hover{cursor:pointer;background:#6a50aabf}.pagenav button.inactive{cursor:not-allowed;color:#64646480;background:#969696bf}.genderbox{margin:.5rem auto;width:95%;display:flex;justify-content:center}.genderbox .gender{cursor:pointer;width:50%;filter:grayscale(100%);transition:transform 1.5s cubic-bezier(.22,1,.36,1),filter 1.5s cubic-bezier(.22,1,.36,1)}.genderbox .gender:hover{filter:grayscale(30%) drop-shadow(0 0 .5rem rgba(117,44,189,.5));z-index:20}.genderbox .gender.active{filter:grayscale(0%) drop-shadow(0 0 .4rem rgba(117,44,189,.8));z-index:10}.genderbox .male{transform:translate(1.3rem)}.genderbox .female{transform:translate(-1.3rem) scaleX(-1)}.parentsbox{margin:.5rem auto;width:95%;display:flex;justify-content:center;background:url(../images/charcreator/parents-bg.jpg);background-size:cover;padding:1.5rem .5rem 0;border-radius:.3rem;border:.1rem solid rgb(255,255,255)}.parentsbox .face-portrait{width:50%;position:relative;filter:brightness(.95);filter:drop-shadow(0 0 .5rem rgba(255,255,255,.15))}.parentsbox .male{transform:translate(-1.7rem);z-index:0}.parentsbox .female{transform:translate(1.7rem);z-index:5}.checkwindow{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:hidden;background-color:#000000e6}.checkwindow .content{background-color:#fefefe;margin:15% auto;padding:.5rem 1rem;border:.1rem solid #888;width:50%;border-radius:.5rem;color:#000}.checkwindow .content p{margin:.5rem 0}.checkwindow .content .note{color:#f66;font-weight:600}.checkwindow .content .checkbtns{margin-top:1rem;width:100%;display:inline-flex;justify-content:flex-end;gap:.5rem}.checkwindow .content .checkbtns .confirm-btn{cursor:pointer;text-align:center;padding:.5rem .75rem;border:none;border-radius:.3rem;color:#fff;background:#4c0}.checkwindow .content .checkbtns .confirm-btn:hover{color:#000;background:#9f6}.checkwindow .content .checkbtns .abort-btn{cursor:pointer;text-align:center;padding:.5rem .75rem;border:none;border-radius:.3rem;color:#fff;background:#f33}.checkwindow .content .checkbtns .abort-btn:hover{color:#000;background:#ff8080}input{border:.1rem solid rgba(0,0,0,.1);border-radius:.3rem;width:100%;padding:.5rem 1rem;color:#555;font-size:1.1rem;transition:border .75s ease,background .75s ease}input.invalid{border-color:#ff505099;background:#ff50501a}input[type=range]{margin:.5rem auto;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:.2em .1em;height:.2rem;border:.1rem solid rgba(0,0,0,.2);border-radius:.3rem;background:#6a50aa1a;box-shadow:0 5px 10px #00000012;opacity:.7;transition:all .3s}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.2rem;height:1.2rem;border-radius:50%;background:#6a50aa;cursor:pointer;border:.15rem solid white;box-shadow:0 0 .4rem #6a50aa80;transition:transform .15s ease}input:focus{outline:none;border:.1rem solid rgba(0,0,0,.25);background:#6a50aa1a}input[type=range]:focus{background:#6a50aa4d}.error{width:100%;padding:.25rem .75rem;margin-bottom:.5rem;border-left:.3rem solid rgb(255,80,80);border-radius:.3rem;background:#ff50501a;font-size:1rem;color:#ff5050d9;display:inline-block;letter-spacing:-.01rem}.fade-enter-active,.fade-leave-active{transition:opacity .5s ease}::-webkit-scrollbar{width:.5rem}::-webkit-scrollbar-track{background:#00000040;border-radius:.3rem}::-webkit-scrollbar-thumb{background:#752cbd80;border-radius:.3rem}::-webkit-scrollbar-thumb:hover{background:#752cbdcc}.inventory{position:absolute;width:100%;height:100vh;top:0;left:0;padding:4rem 2.5rem;font-family:Agdasima;color:#4e407a}.inventory-boxes{display:inline-flex;width:100%}h1{color:#4e407a;height:2.6rem;font-size:2.2rem;font-weight:800;font-variant:small-caps;filter:drop-shadow(0 0 2px rgba(99,75,160,.75))}h2{color:#4e407a;font-size:1.8rem;font-weight:500;font-variant:small-caps;filter:drop-shadow(0 0 .1rem rgba(222,222,222,.5))}h2 .bold{font-weight:800;margin-left:.1rem}.box{margin:0 .25rem;padding:.25rem .5rem;height:75vh;border-radius:.5rem;box-shadow:0 .25rem .5rem #00000080;background:#bab0d6e6}.player-data{width:28%}.player-inventory,.entity-inventory{width:20%}.itemlist{padding:0 0 .5rem}.itemlist .item{display:inline-flex;height:3.8rem;width:100%;border-radius:.25rem;margin:.15rem 0;background:#9b7edb40;padding:.15rem .5rem}.itemlist .item:hover{background:#9b7edbcc}.itemlist .item .item-icon{margin:auto 0;width:3.2rem;height:3.2rem;border-radius:.25rem;padding:1rem}.itemlist .item .item-data{width:100%;height:3.5rem;padding:0 0 0 .5rem}.itemlist .item .item-data .name{position:relative;top:0;font-size:1.35rem}.itemlist .item .item-data .description{position:relative;top:-.25rem;font-size:1rem}.itemlist .item .item-data .leftover{position:relative;bottom:0;width:100%;height:.8rem}.itemlist .item .item-data .leftover .leftover-text{position:relative;width:100%;height:.8rem;text-align:center;line-height:.6rem;font-size:.6rem;z-index:2;color:#dcdcdc}.itemlist .item .item-data .leftover .leftover-bar{position:relative;top:-.9rem;width:100%;background:#00000040;height:.8rem;padding:.1rem;border-radius:.25rem}.itemlist .item .item-data .leftover .leftover-bar .leftover-bar-inner{height:.6rem;border-radius:.2rem;background:#634ba0;filter:drop-shadow(0 0 1px rgba(0,0,0,.5))}.playermenu{position:absolute;top:1rem;left:1.5rem;width:28rem;border-right:.1rem solid rgba(128,128,128,.6);box-shadow:0 .25rem .5rem #0000001a;font-family:Agdasima;color:silver}.playermenuHeader{position:relative;overflow:hidden;width:100%;height:6.5rem;display:flex;justify-content:center;align-items:center;background:url(../images/playermenu/headerBG.jpg) top right/cover}.playermenuHeader h2{position:relative;margin:-1.4rem auto 0;width:90%;font-size:2.6rem;font-variant:small-caps}.playermenuHeader h2:before{content:attr(data-before);position:absolute;margin:auto;top:.25rem;left:.25rem;width:100%;opacity:.6;line-height:3.9rem;font-size:3.9rem;filter:blur(.2rem)}.playermenuContent{height:35rem;background:#323232;border-top:.25rem solid rgba(117,44,189,.5);padding:.5rem}.serverversion{position:absolute;bottom:.25rem;left:1.5%;font-family:Roboto;text-align:left;letter-spacing:-.075rem;font-size:1rem;color:#646464;z-index:100}.support{position:absolute;top:7.5%;left:10%;background:#9696c880;color:#000;z-index:100;padding:15px;border-radius:.5rem;border-left:7px solid #9b7edb;font-family:Futura;filter:drop-shadow(0 0 2px rgba(180,170,170,.75));letter-spacing:-.11rem}.support h1.title{font-size:2.5vh}.support p.message{font-size:1.5vh}.deathscreen{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;font-family:Futura;text-align:center;background:#000}.deathscreen .title-big{position:relative;top:20%;font-family:Watcher;font-variant-caps:all-small-caps;font-weight:900;font-size:14.5vh;color:#7a1111;filter:drop-shadow(0 0 3px rgb(122,7,7));letter-spacing:-1px;z-index:1;animation:basefade 3.5s ease-in-out infinite}.deathscreen .title-small{position:relative;top:15%;font-family:Watcher;font-variant-caps:all-small-caps;font-size:4.5vh;color:#b4aaaa;filter:drop-shadow(0 0 2px rgba(180,170,170,.75));letter-spacing:10px;z-index:2}.deathscreen .quotes{position:absolute;top:89%;width:100%;letter-spacing:-.12rem;z-index:2}.deathscreen .quotes .quotetext{font-size:22px;color:#b4aaaa;filter:drop-shadow(0 0 1px rgba(100,150,150,.25))}.deathscreen .quotes .quoteauthor{position:relative;top:-7px;left:25%;font-size:15px;color:#969696;filter:drop-shadow(0 0 1px rgba(150,150,150,.25))}.deathscreen .bar-container{position:absolute;top:92%;width:100%;z-index:2}.deathscreen .bar-container .bar-time{position:relative;top:19px;width:100%;font-size:16px;font-family:Agdasima;color:#afafafbf;filter:drop-shadow(0 0 2px rgb(5,5,5))}.deathscreen .bar-container .bar{margin:0 auto;width:90%;background:#8c373740;height:20px;padding:2px;border-radius:3px}.deathscreen .bar-container .bar .bar-inner{height:16px;border-radius:3px;background:#7a0707;transition:width 1.5s ease-out}.deathscreen>*{position:relative;z-index:2}.deathscreen:before{content:"";position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(circle at 45% 15%,rgba(120,0,0,.15),transparent 38%),radial-gradient(circle at 55% 85%,rgba(120,0,0,.18),transparent 28%),radial-gradient(circle at 5% 66%,rgba(160,0,0,.15),transparent 28%),radial-gradient(circle at 90% 33%,rgba(160,0,0,.18),transparent 38%);filter:blur(35px);animation:deathpulse 5s ease-in-out infinite;pointer-events:none}.deathscreen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#00000026,#000000bf),repeating-linear-gradient(0deg,rgba(255,255,255,.25) 0px,rgba(255,255,255,.25) 1px,transparent 1px,transparent 3px);opacity:.25;pointer-events:none}.fade-enter-active,.fade-leave-active{transition:opacity .75s ease-in-out}.fade-enter-from,.fade-leave-to{opacity:0}.fade-enter-to,.fade-leave-from{opacity:1}@keyframes basefade{0%{opacity:1}50%{opacity:.75}to{opacity:1}}@keyframes deathpulse{0%,to{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}.speedometer{position:absolute;font-family:Agdasima;color:#e2e0e0;left:15.8%;bottom:1.7vh;display:flex;align-items:flex-end;justify-content:start;flex-direction:column;width:280px;height:140px;background-color:#000000a6;padding:10px;border-radius:6px;text-transform:uppercase;font-size:75px}.speedometer .data{width:100%;height:80px;display:flex;align-items:flex-end;justify-content:space-between}.speedometer .data .speed{width:120px;text-align:right}.speedometer .data .type{font-size:21px;font-style:italic;margin-bottom:50px;margin-left:3px;color:#bbb}.speedometer .data .mileage{font-size:18px;margin-bottom:11px;color:#bbb}.speedometer .data .gear{position:absolute;right:10px;top:0;font-size:24px}.speedometer .data .gear-value{animation:gear 1.4s forwards}.speedometer .rpm{position:relative;width:100%;height:18px;display:flex;align-items:center;justify-content:flex-start;padding-left:20px}.speedometer .rpm :before{content:"";position:absolute;top:0;left:0;background:url(../images/interface/rpm.png) no-repeat;background-size:100%;width:15px;height:15px;margin:2px 10px 0 0}.speedometer .rpm .rpm-background{width:100%;height:14px;padding:1px;background:#00000040;border-radius:5px}.speedometer .rpm .rpm-inner{height:12px;background:#a60000;border-radius:5px;transition:width .5s,background-color .75s}.speedometer .fuel{position:relative;width:100%;height:18px;display:flex;align-items:center;justify-content:flex-start;padding-left:20px}.speedometer .fuel :before{content:"";position:absolute;top:0;left:0;background:url(../images/interface/fuel.png) no-repeat;background-size:100%;width:15px;height:15px;margin:2px 10px 0 0}.speedometer .fuel .fuel-background{width:100%;height:14px;padding:1px;background:#00000040;border-radius:5px}.speedometer .fuel .fuel-inner{height:12px;background:#1fff00;border-radius:5px;transition:width .75s,background-color .75s}@keyframes gear{0%{transform:scale(1)}20%{transform:scale(1.4)}to{transform:scale(1)}}