@font-face{font-family:"dportpixel";src: url("../fonts/dportpixel.woff2")format("woff2"),url("../fonts/dportpixel.woff")format("woff"),url("../fonts/dportpixel.ttf")format("truetype");}
*{touch-action:none}
body{
    font-family:"dportpixel";
    background:repeat,radial-gradient(circle,#ff4040 0%,#ff4040 50%,#802020 50%,#802020 100%);
    background-size:64px 64px;
    margin:0%;
    overflow:hidden;
    animation:anim 4s linear infinite;
}
@keyframes anim{
    0%{
        background-position:0px 0px
    }
    100%{
        background-position:256px 128px
    }
}
#bg{
    background:#ffffff80;
    overflow-y: scroll;
    width:clamp(50vh, 60%, 100%);
    height:100%;
    margin:auto;
    text-align:center;
}
#bg::-webkit-scrollbar{display:none}
#title,.title{
    width:100%;
    border-bottom:4px dotted #ff4040;
    margin-bottom:2%;
}
.icon{
    display:inline-block;
    background-color:#c0c0c0;
    width:200px;
    height:200px;
    border-radius:20%;
    margin:8px;
    overflow:hidden;
}
#lvlpercent{
    display:inline-block;
    border:solid #ff8080 8px;
    margin:auto;
    width:80%;
    height:1%;
}
.hidden{
    background:#000000;
    user-select:none;
}
.hidden:hover{
    background:#c0c0c0;
    user-select:text;
}
@keyframes achievementboxmoveandfade{
    0%{
        bottom:-10vw;
    }
    25%{
        bottom:1vw;
    }
    75%{
        bottom:1vw;
    }
    100%{
        bottom:-10vw;
    }
}
.achievementbox{
    z-index:100;
    position:absolute;
    aspect-ratio:2/1;
    width:20%;
    right:1%;
    bottom:-10vw;
    border-radius:2vw;
    background:#ffffff;
    animation:achievementboxmoveandfade 4s linear;
}
canvas.fullscreen{
    z-index:99;
    position:fixed;
    top:0%;
    height:100%;
    left:50%;
    transform:translate(-50%);
}