:root{
    --text: rgb(49, 55, 74);
    --text_fade: rgba(49, 55, 74, 0.5);
    --text_fade_more: rgba(33, 42, 71, 0.15);

    --primary: rgb(135, 111, 168);
    --ternary: rgb(165,225,180);
    
    --admin: rgb(117, 190, 234);
    --admin-fade: rgba(117, 189, 234, 0.2);
    
    --highlight: rgb(247, 132, 76);
    --highlight-fade: rgba(247, 133, 76, 0.2);
    
    --warn: rgb(247, 79, 76);
    /* --good: rgb(192, 225, 72); */

    --good: rgb(32, 153, 103);
    --error: rgb(234, 153, 37);

    --faded: rgba(111, 83, 69, 0.45);
    --module-bg: white;
    --background: rgb(249, 249, 249);
    --footer: rgb(27,27,27);
}

@font-face {
    font-family: fredoka;
    src: url(../fonts/Fredoka-Regular.ttf);
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: fredoka;
    src: url(../fonts/Fredoka-SemiBold.ttf);
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: fanta;
    src: url(../fonts/fanta.ttf);
    font-display: swap;
}

@font-face {
    font-family: londrina;
    src: url(../fonts/LondrinaSolid-Light.ttf);
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: londrina;
    src: url(../fonts/LondrinaSolid-Regular.ttf);
    font-weight: bold;
    font-display: swap;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: fredoka;
    background-color: var(--background);
    font-size: 16px;
    color: var(--text);
    min-height: 100vh;
    margin: 0;
}

p{
    margin: 0;
    color: var(--text_fade);
}

p .end{
    float: right;
}

a{
    color: var(--highlight);
    text-decoration: none;
    cursor: pointer;
}

a:hover{
    text-decoration: underline;
}

h1{
    font-weight: normal;
    margin: 0;
    font-family: fanta;
    font-size: 120px;
}

h2{
    font-weight: normal;
    margin: 0;
    font-family: fanta;
    font-size: 36px;
    display: flex;
    align-items: center;
    gap: 12px;
}

h2 img{
    height: 36px;
    transform: scale(1.3);
}

h3{
    font-weight: normal;
    margin: 0;
    font-family: fanta;
    font-size: 30px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}

h3 img{
    height: 1em;
}

.clamp_contain{
    max-width: 1500px;
    display: grid;
    gap: 30px;
    margin: auto;
    padding: 50px;
}

/* .clamp{
    margin: 30px auto;
    max-width: 1500px;
} */

.box {
    border: 2px solid rgb(235, 235, 235);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 2px 3px 0px rgb(235, 235, 235), 1px 1.5px 0px rgb(235, 235, 235);
    background-color: var(--module-bg);
}

.end {
    margin-left: auto;
}

.hidden{
    display: none !important;
}

.special_title h2,
.special_title h3{
    display: block;
    margin: auto;
    font-family: londrina;
    font-weight: bold;
}

header .submenu{
    margin: 0 20px;
    margin-top: -30px;
    font-size: 50px;
    display: flex;
    align-items: center;
}

header .submenu h2{
    opacity: 0.5;
}

header .submenu div{
    font-family: fanta;
    margin-left: auto;
    font-size: 20px;
}

header .submenu div .username{
    color: var(--highlight);
    font-size: 30px;
}

header .submenu div .tokens{
    color: rgb(255, 178, 62);
    font-size: 24px;
    margin-left: 10px;
    white-space: nowrap;
    cursor: help;
}

header .submenu div .tokens img{
    height: 22px;
    margin: 0 5px;
    transform: scale(1.3);
}

header nav{
    margin: 15px;
    display: flex;
    gap: 10px;
    font-size: 18px;
    margin-top: 20px;
}

header nav a{
    padding: 5px 10px;
    background-color: var(--admin);
    color: white;
    clip-path: polygon(1px 0px, 100% 0%, calc(100% - 1px) calc(100% - 1px), 0% 100%);
}

header nav a img{
    width: 18px;
    transform: scale(1.6) translateY(1px);
    margin: auto 2px;
}

header nav a.sel{
    opacity: 0.7;
}

header nav a:hover{
    opacity: 0.7;
    text-decoration: none;
}

header nav a.disabled{
    filter: grayscale(1);
}

.full{
    display: grid;
    gap: 60px;
    grid-template-columns: 1.2fr 1.9fr 1.1fr;
}

.page_desc{
    display: grid;
    gap: 8px;
    max-width: 850px;
    margin: 10px;
    clip-path: polygon(5px 0px, 100% 0%, calc(100% - 10px) calc(100% - 8px), 0% 100%);
    background-color: rgba(0,0,0,0.05);
    padding: 18px 24px;
    border-left: 9px solid var(--admin);
    animation: build-help-box 0.4s;
    transition: background-color 0.2s;
    cursor: pointer;
}

.page_desc:not(.expand):hover{
    background-color: rgba(0,0,0,0.1);
}

.page_desc>div{
    display: none;
    gap: 8px;
}

.page_desc.expand>div{
    display: grid;
    animation: desc-expand 0.4s;
}

@keyframes desc-expand{
    0%{
        opacity: 0;
        transform: translateX(-10px);
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

.page_desc h2{
    font-family: fredoka;
    font-weight: bold;
    font-size: 28px;
    user-select: none;
}

.page_desc h2 img{
    height: 30px;
}

.page_desc p{
    color: var(--text);
}


.user_list{
    display: grid;
    gap: 10px;
    margin-bottom: auto;
}

.user_list .user_list_holder{
    min-height: 100px;
    display: grid;
    gap: 10px;
}

.desc{
    display: grid;
    gap: 8px;
    margin: 10px 4px;
}

.user{
    display: grid;
    gap: 14px;
}

.user .head{
    display: grid;
    gap: 10px;
    grid-template-columns: 54px auto;
}

.user .pfp{
    height: 54px;
    width: 54px;
    margin: auto;
    border-radius: 5px;
    background-color: var(--text_fade_more);
}

.user .info{
    display: grid;
    width: 100%;
}

.file_list .info{
    display: grid;
    gap: 8px;
    width: 100%;
}

.file_list .desc h2{
    font-size: 52px;
    gap: 18px;
}

.file_list .desc h2 img{
    height: 46px;
}

.user .top{
    display: flex;
    align-items: center;
    gap: 8px;
}

.user .username{
    font-weight: bold;
    font-size: 26px;
}


.user .status{
    background-color: var(--faded);
    padding: 2px 6px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    margin-left: auto;
}

.user.admin .status{
    background-color: var(--admin);
}

.user.banned .status{
    background-color: var(--warn);
}

.user.banned{
    opacity: 0.3;
}

.user .data{
    gap: 4px;
    display: grid;
    background-color: rgba(0,0,0,0.05);
    border-radius: 6px;
    max-height: 0px;
    overflow-y: hidden;
    transition: 0.5s; 
    opacity: 0;
    transform: translateY(-16px);
    padding: 0 10px;
}

.text_interact{
    cursor: pointer;
}

.text_interact:hover{
    text-decoration: underline;
}

.user .data.open{
    opacity: 1;
    transform: translateY(0px);
    max-height: 330px;
    padding: 8px 10px;
}

.user .data.close{
    position: relative;
    opacity: 0;
    max-height: 0px;
}

.user .data hr{
    height: 1px;
    background-color: var(--text_fade_more);
    border: none;
    display: block;
    margin: 3px 0;
}


.user .line{
    display: flex;
    align-items: center;
}

.user .line .end{
    margin-left: auto;
    font-size: 16px;
    font-family: fanta;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
}

.user .line>#status{
    cursor: help;
    text-transform: capitalize;
}

.user.admin .line>#status{
    color: var(--admin);
    font-weight: bold;
}

.user .tokens{
    color: rgb(247, 179, 90);
    font-family: londrina;
    font-weight: bold;
    display: flex;
    font-size: 20px;
    align-items: center;
    gap: 8px;
}

.user .tokens img{
    height: 16px;
    margin: auto 2px;
    transform: scale(1.5);
}

.user .action{
    display: flex;
    gap: 5px;
}

button,
.button{
    font-family: inherit;
    font-size: 16px;
    border: none;
    background-color: var(--highlight);
    border-radius: 4px;
    padding: 6px 10px;
    color: white;
    cursor: pointer;
}

button:hover{
    opacity: 0.8;
}

button:disabled,
.disabled{
    opacity: 0.4;
    pointer-events: none;
    transition: 0.2s opacity;
}

.action .fleft{
    margin-left: auto;
}


/* Logins new design */
.logins{
    display: grid;
    gap: 12px;
    margin-left: 20px;
    border-left: 2px solid rgba(0,0,0,0.1);
    padding-left: 20px;
}

.logins .section{
    display: grid;
    /* grid-template-columns: auto 90px; */
    padding: 8px;
}

.logins .date{
    color: var(--text_fade);
    display: flex;
    align-items: center;
}

.logins .date img{
    margin-left: -31px;
    margin-right: 28px;
    width: 20px;
    filter: brightness(calc(249/255));
}

.logins .data{
    display: grid;
}

.logins .settings{
    display: block;
    height: 1.2em;
    cursor: pointer;
    opacity: 0;
    margin: auto;
}

.logins .line:hover .settings{
    transition: 0.2s opacity;
    opacity: 0.8;
}

.logins .info{
    display: grid;
    gap: 2px;
}

.logins .line{
    display: grid;
    grid-template-columns: 40px auto 2em;
    gap: 10px;
    padding: 6px;
    cursor: pointer;
    border-radius: 5px;
}

.logins .line:hover{
    background-color: rgba(0,0,0,0.05);
}

.logins .line .meta{
    display: flex;
    gap: 5px;
    font-size: 14px;
    align-items: center;
}

.logins .line .head{
    display: flex;
    gap: 8px;
    align-items: center;
}

.logins .line .meta span,
.logins .line .head small{
    color: var(--text_fade);
}

.logins .line .pfp{
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 5px;
}

.logins .line .no_pfp{
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.1);
}

.logins .section > button{
    margin: 14px;
    margin-bottom: auto;
}

/* Scoreboard */
.clans{
    display: grid;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    border-bottom: 2px dashed rgba(0,0,0,0.1);
    padding-bottom: 4px;
}

.clans h2{
    font-size: 50px;
    margin: auto;
}

.clans p{
    text-align: center;
    margin: auto;
    max-width: 310px;
}

.clans_list{
    display: grid;
    gap: 8px;
    margin: 20px;
}

.clans .el{
    display: flex;
    align-items: center;
    gap: 14px;
}

.clans .el.big{
    font-size: 22px;
}

.clans .el.first{
    font-size: 26px;
}

.clans .el .rank{
    transform: scale(1.4);
    font-family: fanta;
}

.clans .el .name{
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0%, calc(100% - 5px) calc(100% - 1px), 2px 100%);
    padding: 4px 12px 4px 10px;
    display: block;
    background-color: var(--text_fade_more);
    color: white;
    margin-right: auto;
}

.clans .el.big .name{
    background-color: var(--highlight);
}

.clans .el.first .name{
    background-color: var(--admin);
}

.clans .score{
    font-family: fanta;
    margin-left: auto;
    font-size: 26px;
}

.clans .big .score{
    font-size: 34px;
}


.clans .el.first .score{
    transform: scale(1.5) translateX(-8px);
}


/* Builds */

.full_builds{
    display: grid;
    gap: 45px;
    grid-template-columns: minmax(340px, 1.25fr) minmax(340px, 1.3fr) 2fr;
}

.full_builds .no_sel_msg:not(.hidden),
.full_builds .single_build:not(.hidden){
    animation: build-help-box 0.5s;
}

@keyframes build-help-box {
    0% {transform: translateX(-50px); opacity: 0;}
    100% {transform: translateX(0px); opacity: 1;}
}

.list_action{
    display: flex;
    margin: 0 5px;
    gap: 8px;
}

.list_action>div{
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.list_action>div:hover{
    opacity: 0.7;
}

.list_action>div img{
    height: 20px;
}

.file_list{
    display: grid;
    margin-bottom: auto;
    gap: 10px;
}

.file_list .list {
    display: grid;
    gap: 15px;
}

.file_list .el{
    display: grid;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    gap: 10px;
    grid-template-columns: auto 60px;
    cursor: pointer;
    transition: .2s transform;
}

.el.loading{
    cursor: wait;
    display: flex;
    align-items: center;
}

.el.loading::before{
    position: relative;
    content: "";
    width: 14px;
    border-radius: 20px;
    height: 14px;
    background-color: var(--text);
    animation: new-build-tag 0.5s infinite alternate cubic-bezier(0.5, 0.05, 1, .5);
}

.file_list .el .next{
    width: 100%;
    opacity: 0;
    margin: auto;
    transform: translateX(30px);
    transition: 0.2s;
}

.file_list .el:hover .next,
.file_list .el.selected .next{
    opacity: 0.4;
    transform: translateX(0px);
}

.file_list .el.selected .next{
    opacity: 0.6;
    transform: scale(1.2);
}

.file_list .el.new{
    border: 4px solid var(--admin) !important;
    background-color: rgba(117, 190, 234, 0.2);
}

.file_list .el .is_new{
    color: var(--admin);
    display: none;
}

.file_list .el.new .is_new{
    display: inline-block;
}

.file_list .el.selected{
    border-color: var(--text_fade_more);
    transform: translateX(20px);
}

/* .file_list .el.new{
    animation: notice-me-bounce 0.25s alternate cubic-bezier(0.5, 0.05, 1, .5) infinite;
} */

@keyframes notice-me-bounce {
    0%{
        transform: translateX(-10px);
    }

    100%{
        transform: translateX(0px);
    }
}

.build_list{
    display: grid;
    margin-bottom: auto;
    gap: 10px;
    position: sticky;
    top: 18px;
}

.build_list .list{
    display: grid;
    background-color: rgb(235, 235, 235);
    gap: 1px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
    padding: 0;
}

.build_list .list .el{
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px;
    background-color: var(--background);
    font-weight: bold;
}

.build_list .list .el .tag{
    background-color: var(--warn);
    padding: 2px 6px;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    font-weight: normal;
}

.build_list .list .el.new{
    border-left: 4px solid var(--admin);
    animation: new-build-border 0.5s infinite alternate cubic-bezier(0.5, 0.05, 1, .5);
}

.build_list.disabled{
    opacity: 0.6 !important;
}

@keyframes new-build-border {
    100%{border-left-color: var(--admin-fade)}
    0%{border-left-color: var(--admin)}
}

@keyframes new-build-tag {
    100%{opacity: 0.5;}
    0%{opacity: 1;}
}

.build_list .list .el .tag.new{
    background-color: var(--admin);
    font-weight: bold;
    animation: new-build-tag 0.5s infinite alternate cubic-bezier(0.5, 0.05, 1, .5);
}

.build_list .list .el .alpha{
    opacity: 0.5;
}

.build_list .list .el.archived .b_vers{
    text-decoration: line-through;
    opacity: 0.8;
}


.build_list .list .el img {
    height: 20px;
    transform: scale(1.4);
    opacity: 0.6;
}


.build_list .list .el .time{
    font-weight: normal;
    margin-left: auto;
}

.build_list .list .el:hover{
    background-color: rgb(235, 235, 235);;
}

.build_list .list .el.locked{
    filter: saturate(0);
    cursor: not-allowed;
    opacity: 0.5;
}

.build_list .list .el.selected{
    background-color: rgb(235, 235, 235);
}


.single_build {
    display: grid;
    margin-bottom: auto;
    gap: 10px;
    position: sticky;
    top: 18px;
}

.single_build h2{
    font-family: fredoka;
    font-weight: bold;
    font-size: 30px;
}

.single_build h3{
    font-family: fredoka;
    font-weight: bold;
    font-size: 24px;
}

.single_build .build_name{
    margin: 5px 10px;
    gap: 4px;
    align-items: flex-end;
}

.single_build .build_name .tag{
    background-color: var(--warn);
    margin: auto 0 auto auto;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 18px;
    color: white;
    font-weight: normal;
}

.single_build .build_name .tag.no_test{
    background-color: var(--warn);
}

.single_build .build_name .tag.skip{
    background-color: transparent;
    border: 2px dashed var(--text_fade);
    color: var(--text_fade);
    opacity: 0.5;
}

.single_build .build_name .tag.done{
    background-color: var(--admin);
}

.single_build .build_name::before{
    content: 'Build /';
    font-size: 20px;
    opacity: 0.7;
}

.single_build.loading{
    opacity: 0.4;
    transition: 1s opacity;
    pointer-events: none;
}


.no_sel_msg {
    max-width: 600px;
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 20px;
    position: sticky;
    top: 18px;
    user-select: none;
    opacity: 0.7 !important;
}

.no_sel_msg:not(.hidden) img{
    animation: build-help-truddy 2s infinite;
    pointer-events: none;
}

@keyframes build-help-truddy {
    0% {transform: translateX(-5px) rotate(-5deg); opacity: 1;}
    50% {transform: translateX(0px) rotate(-2deg);}
    100% {transform: translateX(-5px) rotate(-5deg); opacity: 1;}
}

.no_sel_msg img{
    width: 300px;
    transform: rotate(-5deg);
    filter: drop-shadow(2px 0px 0 rgba(0,0,0,0.1));
}

.single_build nav.classeur{
    gap: 8px;
    position: relative;
    align-items: flex-end;
    z-index: 1;
    font-size: 18px;
    top: 2px;
    margin: 0 20px;
}

.single_build nav.classeur a{
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 8px 8px 0 0;
    border: 2px solid rgb(235, 235, 235);
    color: var(--text_fade);
    background-color: var(--background);
    transition: 0.2s background-color;
}

.single_build nav.classeur a.selected{
    border-bottom-color: var(--module-bg);
    background-color: var(--module-bg);
    text-decoration: none;
}

a.warn::after{
    position: relative;
    display: inline-block;
    content: "!";
    margin: 0 4px;
    font-family: fanta;
    padding: 0.5px 6px;
    border-radius: 100px;
    font-size: x-small;
    color: white;
    transform: scale(1.8);
    background-color: var(--warn);
    animation: shake 1.5s infinite;
}

@keyframes shake {
    0% {transform: scale(1);}
    10% {transform: scale(2.1);}
    20% {transform: scale(1.6);}
    30% {transform: scale(1.85);}
    40% {transform: scale(1.68);}
    50% {transform: scale(1.7);}
    96% {transform: scale(1.7);}
    100% {transform: scale(1);}
}

.single_build nav.classeur a:hover{
    text-decoration: none;
    filter: brightness(0.95);
}

.single_build nav.classeur a.selected:hover{
    filter: brightness(1);
}

.single_build nav{
    display: flex;
    gap: 12px;
}

.single_build nav.bigger{
    font-size: 20px;
    gap: 20px;
}

.single_build nav .selected{
    text-decoration: underline;
}

.single_build .page{
    padding: 25px;
    display: grid;
    gap: 25px;
}

.single_build .page.overview{
    grid-template-columns: auto 180px;
}

.align {
    display: grid;
    gap: 20px;
}

.single_build .align{
    margin-bottom: auto;
}


.single_build .update_log h3{
    font-weight: normal;
    font-size: 18px;
    font-weight: bold;
}

.single_build .update_log h3 span{
    display: none;
}

.update_log > div{
    display: grid;
    gap: 5px;
    padding: 12px;
}

.update_log > div h3{
    color: var(--text_fade);
}

.update_log{
    border: 2px dashed rgba(0,0,0,0.2);
    border-radius: 5px;
}

.update_log .editable h3{
    color: var(--text);
}

.update_log .editable h3 span{
    display: inline;
}

.update_log textarea{
    outline: none;
    background-color: transparent;
}

.update_log h3 span{
    font-size: 14px;
    color: var(--text_fade);
}

textarea{
    font-family: inherit;
    border: none;
    resize: none;
    box-sizing: border-box;
}

textarea.fancy{
    padding: 10px;
    background-color: var(--text_fade_more);
    clip-path: polygon(2px 1px, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
    padding-left: 8px;
    border-left: 5px solid transparent;
    transition: .1s;
    outline: none;
}

.single_build .download {
    display: flex;
    gap: 10px;
    align-items: center;
}

.single_build .download button{
    padding: 15px 20px;
}

.single_build .download small{
    opacity: 0.75;
    margin-left: 5px;
}

.single_build .download.archived button{
    cursor: not-allowed;
    filter: saturate(0);
    opacity: 0.7;
}

.single_build .todo,
.single_build .user_stats{
    display: grid;
    gap: 10px;
    margin-bottom: auto;
}

.single_build .todo h3,
.single_build .user_stats h3{
    font-family: fanta;
}

.single_build .todo>div,
.single_build .user_stats>div{
    display: grid;
    gap: 5px;
}

.single_build .todo p span{
    color: var(--text);
    font-weight: bold;
}

.single_build .todo p.done{
    text-decoration: line-through;
    color: var(--text);
    opacity: 0.5;
}

.single_build .todo button:not(:disabled){
    animation: claim 1.5s infinite;
}

@keyframes claim {
    0% {transform: scale(0.8);}
    10% {transform: scale(1.1);}
    20% {transform: scale(0.95);}
    30% {transform: scale(1.02);}
    40% {transform: scale(0.99);}
    50% {transform: scale(1);}
    96% {transform: scale(1);}
    100% {transform: scale(0.8);}
}

.single_build .user_stats>div p{
    display: flex;
}

.single_build .user_stats>div p b{
    margin-left: auto;
}

.single_build .overview .left{
    gap: 20px;
}

/* Posts */
.single_build .post_module{
    display: grid;
    border: 2px dashed rgba(0,0,0,0.2);
    border-radius: 6px;
    gap: 10px;
    padding: 10px;
}

.single_build .post_module textarea{
    outline: none;
}

.single_build .post_module .action{
    gap: 10px;
    display: flex;
    align-items: center;
}

.single_build .post_module .action span{
    color: var(--text_fade);
    font-size: 14px;
    cursor: help;
    font-weight: bold;

}

.single_build .feedback .no_report{
    color: var(--warn);
}

.single_build .feedback h3 small{
    font-size: 18px;
}

.single_build .posts{
    display: grid;
    gap: 22px;
    word-break: break-word;
    margin: 5px;
}

.single_build .posts>p{
    padding-left: 8px;
    border-left: 3px solid var(--text_fade);
    opacity: 0.6;
}

.single_build .post{
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.single_build .post .pfp{
    position: relative;
    display: grid;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    background-color: var(--text_fade_more);
    border-radius: 5px;
    overflow: hidden;
}

.single_build .post .pfp img{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.single_build .post .content{
    display: grid;
    width: 100%;
    gap: 8px;
}

.single_build .post .top{
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--text_fade);
}

.single_build .post .author{
    font-weight: bold;
    text-decoration: underline 1.7px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.single_build .post .author img{
    height: 1.2em;
    display: block;
    opacity: 0.7;
}

.single_build .post .author img:hover{
    opacity: 1;
}

.single_build .post .msg .username{
    font-weight: bold;
    color: var(--text_fade);
}

.single_build .post.admin .author,
.single_build .post .msg .username.admin{
    color: var(--admin);
}

.single_build .post .msg .username.not_found{
    opacity: 0.4;
    cursor: help;
    font-weight: normal;
    text-decoration: line-through;
}

/* .single_build .post .author::after{
    font-weight: normal;
    display: inline-block;
    color: var(--text_fade);
    content: " says:";
    margin-left: 6px;
} */

.single_build .post .delete{
    height: 18px;
    opacity: 0.5;
    cursor: pointer;
}

.single_build .post .msg{
    display: grid;
    gap: 8px;
}

.single_build .post .msg p {
    color: var(--text);
}

.single_build .attach{
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    color: var(--text_fade);
}

.single_build .post_module .attach{
    border-top: 1.7px solid rgba(0,0,0,0.2);
    padding-top: 8px;
}

.single_build .stats .big_stat{
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    margin: auto;
    max-width: 700px;
}

.single_build .stats .big_stat>div{
    display: grid;
    margin: initial auto;
    text-align: center;
    gap: 5px;
}

.single_build .stats .big_stat>div span{
    font-weight: bold;
    font-size: 2em;
}

.single_build .stats .big_stat>div small{
    font-size: 0.9em;
    color: var(--text_fade);
}

.single_build .stats .player_list{
    display: grid;
    gap: 20px;
}

.single_build .stats h3 img{
    height: 1.2em;
    cursor: pointer;
}

.single_build .stats .player_list .player{
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 60px auto 110px;
}

.single_build .stats .player_list .pfp{
    aspect-ratio: 1;
    width: 100%;
    border-radius: 50px;
}

.single_build .stats .player_list div.pfp{
    background-color: var(--text_fade_more);
}

.single_build .stats .player_list .username{
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    gap: 8px;
    align-items: center;
}

.single_build .stats .player_list .username.admin{
    color: var(--admin);
}

.live-badge{
    background-color: rgb(152, 211, 80);
    font-weight: bold;
    color: white;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.7em;
    display: flex;
    gap: 4px;
    align-items: center;
}

.live-badge::before{
    content: '';
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    background-color: white;
    display: block;
    animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}

.live-badge.dead{
    background-color: var(--text_fade);
}

.live-badge.dead::before{
    content: none;
}

.live-badge.pending{
    background-color: var(--error);
}

.single_build .stats .player_list .info{
    display: grid;
    align-items: center;
    gap: 5px;
}

.single_build .stats .player_list .down{
    display: flex;
    gap: 4px;
    align-items: center;
}

.single_build .stats .player_list .down img{
    height: 18px;
}

.single_build .build_settings .text_set{
    display: grid;
    gap: 5px;
    flex-grow: 1;
}

.single_build .build_settings .text_set div{
    display: flex;
    gap: 6px;
}

.single_build .build_settings .text_set input{
    width: 100%;
}

input[type=text],
input[type=password]{
    border: none;
    flex-grow: 1;
    font: inherit;
    padding: 10px;
    background-color: var(--text_fade_more);
    clip-path: polygon(2px 1px, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
    padding-left: 8px;
    border-left: 5px solid transparent;
    transition: .1s;
    outline: none;
}

input[type=password]{
    font-family: fanta;
}

input[type=text]:focus,
input[type=password]:focus{
    border-left-color: var(--admin);
}

input[type=text]:hover,
input[type=password]:hover{
    opacity: 0.8;
}

input[type=password]::placeholder{
    font-family: fredoka;
}

.single_build .line_set{
    display: flex;
    gap: 15px;
}

.single_build .uploader,
.single_build .uploader label{
    display: flex;
    gap: 10px;
    align-items: center;
}

.single_build .uploader input[type=file]{
    display: none;
}

.single_build .uploader .end{
    padding: 10px 20px;
}

.uploader .button{
    flex-shrink: 0;
}

.uploader label #file_info{
    word-break: break-word;
}

.upload_perc .bar{
    border-radius: 4px;
    height: 24px;
    background-color: var(--text_fade_more);
    overflow: hidden;
    display: grid;
}

.upload_perc .bar span{
    width: 0%;
    transition: 0.2s;
    background-color: var(--admin);
}

.upload_perc p{
    display: flex;
    gap: 5px;
}

.radio_list{
    display: grid;
    font-size: 18px;
    gap: 10px;
    user-select: none;
}

.radio_list label{
    cursor: pointer;
    
    position: relative;
    padding-left: 32px;
}

.radio_list label small{
    opacity: 0.3;
    margin-left: 4px;
}

.radio_list input{
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio_list .checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    border-radius: 100%;
    background-color: var(--text_fade_more);
}

.radio_list label input:checked ~ .checkmark {
    background-color: var(--admin);
}

.radio_list .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    z-index: 1;
}

.radio_list label input:checked ~ .checkmark::after{
    display: block;
    top: 7px;
	left: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--background);
}

.build_settings .delete{
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 8px;
}

.build_settings .delete button{
    padding: 20px 30px;
    display: flex;
    gap: 10px;
    background-color: var(--warn);
}

.build_settings .delete button img{
    filter: brightness(100);
    height: 20px;
    transform: scale(1.2);
    margin-left: -10px;
}

.build_settings .delete button.soft{
    background-color: var(--admin);
}

/* Notif */
.notif_holder{
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: 440px;
    width: 100vw;
    display: grid;
    gap: 20px;
    padding: 30px;
    word-break: break-word;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 100vh;
    z-index: 9999;
}

.notif_holder>div{
    background-color: var(--background);
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    align-items: center;
    transition: 0.2s;
    animation: notif-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.notif_holder>div:not(.notif_out):hover{
    transform: translateX(5px);
    cursor: pointer;
}

.notif_holder .line{
    margin: -12px 0 -12px -12px;
    width: 4px;
    border-radius: 5px;
    flex-shrink: 0;
    align-self: stretch;
    background-color: var(--good);
}

.notif_holder .error .line{
    background-color: var(--error);
}

.notif_holder .info .line{
    background-color: var(--admin);
}

.notif_holder .icon{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background-size: contain;
    background-position: center;
    background-image: url(../img/good.svg);
}

.notif_holder .error .icon{
    background-image: url(../img/bad.svg);
}

.notif_holder .info .icon{
    background-image: url(../img/info.svg);
}

.notif_holder .cont{
    display: grid;
    gap: 2px;
}

.notif_holder .cont .status{
    font-weight: bold;
    font-size: 20px;
}

.notif_holder .cont .msg{
    opacity: 0.5;
}

.notif_holder .close{
    height: 14px;
    opacity: 0.5;
    margin-left: auto;
    transition: 0.2s;
}

.notif_holder>div:hover .close{
    transform: scale(1.4);
    opacity: 1;
}

@keyframes notif-in {
    0%{transform: translateX(-500px); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);}
    60%{transform: translateX(5px); opacity: 1; animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1)}
    80%{transform: translateX(-5px); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)}
    100%{transform: translateX(0px);}
}

.notif_holder>div.notif_out{
    animation: notif-out .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes notif-out {
    0%{opacity: 1;}
    100%{transform: translateX(-100px); opacity: 0;}
}

/* Dashboard settings */
.settings{
    display: grid;
    gap: 22px;
}

.settings .el{
    display: grid;
    gap: 10px;
}

.settings .set_title,
.todo h3,
.user_stats h3{
    font-size: 22px;
    font-weight: bold;
    clip-path: polygon(2px 1px, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
    padding: 4px 12px 4px 10px;
    display: block;
    background-color: var(--text);
    color: white;
    margin-right: auto;
}

.settings .set_title{
    font-size: 18px;
    font-weight: normal;
}

.settings .set_desc{
    color: var(--text_fade);
    font-size: 14px;
}

.settings .line{
    display: grid;
    gap: 8px;
    grid-template-columns: auto 85px;
}

.settings .profile_picker{
    display: grid;
    position: relative;
    margin: auto;
    border-radius: 10px;
    overflow: hidden;
    border: 2px dashed rgba(0,0,0,0.1);
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 136px;
    height: 136px;
}

.settings .profile_picker img{
    position: absolute;
    width: 120px;
    height: 120px;
    display: block;
    margin: 8px;
    border-radius: 8px;
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--text_fade_more);
}

.settings .profile_picker:hover{
    transform: scale(1.05);
}


.settings .profile_picker:hover img{
    transform: scale(1.1);
    opacity: 1;
}

.settings .profile_picker input{
    display: none;
    visibility: hidden;
}

.settings .profile_picker.loading{
    pointer-events: none;
    transform: scale(0.9);
    animation: load 1.5s infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.settings .pfp_loading{
    display: grid;
    gap: 5px;
}

.settings .pfp_loading .bar{
    width: 200px;
    background-color: var(--text_fade_more);
    height: 6px;
    display: grid;
    border-radius: 8px;
    overflow: hidden;
    margin: auto;
}

.settings .profile_picker.no_pic img{
    opacity: 0 !important;
}

.settings .profile_picker .plus{
    margin: auto;
    display: grid;
    font-size: 22px;
    color: var(--text_fade);
}

.pfp_loading .bar span{
    opacity: 0.5;
    background-color: var(--admin);
    height: 100%;
    width: 0%;
    transition: 0.2s width;
}

@keyframes load {
    0%{opacity: 0.6;}
    50%{opacity: 0.8;}
    100%{opacity: 0.6;}
}

.settings .center{
    text-align: center;
}

select{
    font: inherit;
    padding: 10px;
    background-color: transparent;
    border: 1.7px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    cursor: pointer;
    padding-right: 30px;
    background-color: var(--module-bg);
}

.settings button{
    border-radius: 0px;
    clip-path: polygon(2px 1px, 100% 0%, calc(100% - 2px) 100%, 0% 100%);
}  

/* Footer */
footer{
    margin: 0;
    margin-top: 80px;
    color: var(--background);
    line-height: 1.4;
    font-size: 15px;
    text-shadow: 1.5px 1.5px 1px rgba(0,0,0,0.3);
    clip-path: polygon(0px 30px, 100% 0%, 100% 100%, 0% 100%);
    overflow: hidden;
    background-image: url(../img/bg_full.jpg);
    background-color: var(--footer);
    background-size: 1700px;
    background-position: center;
    background-repeat: no-repeat;
}

footer img{
    user-select: none;
    pointer-events: none;
}

footer .clamp{
    margin: auto;
    display: grid;
    gap: 0 50px;
    padding: 60px 60px 30px 60px;
    max-width: 1000px;
    grid-template-areas: 
    "head l1 l2"
    "trudd l1 l2"
    "foot foot foot";
}

footer a{
    color: var(--background);
    opacity: 0.5;
}

footer .head{
    font-family: londrina;
    font-size: 20px;
    display: grid;
    gap: 15px;
    grid-area: head;
    max-width: 480px;
}

footer .head .tagline{
    display: grid;
    gap: 5px;
    margin-left: 90px;
}

footer .head .name{
    text-shadow: 3px 3px 1px rgba(0,0,0,0.3);
    transform: scale(1.2) rotate(-2deg);
    font-weight: bold;
    font-size: 50px;
    margin-left: 15px;
}

footer .head .text{
    gap: 10px;
}

footer .head .text::before{
    content: '"';
    opacity: 0.5;
    margin-right: 4px;
}

footer .head .text::after{
    content: '"';
    opacity: 0.5;
    margin-left: 4px;
}

footer .head .credit{
    font-size: 16px;
    color: var(--admin);
    text-align: right;
}

footer .list{
    display: grid;
    gap: 10px;
    margin: auto;
    align-self: center;
}

footer .list>a{
    margin-right: auto;
}

footer .list .name{
    font-family: londrina;
    font-size: 24px;
    font-weight: normal;
    text-shadow: none;
    clip-path: polygon(2px 1px, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
    padding: 2px 12px 2px 12px;
    display: block;
    background-color: var(--background);
    color: var(--text);
    margin: 0 auto 8px -4px;
}

footer .hapi{
    width: 250px;
    transform: scale(2) translateX(-90px) rotate(-8deg);
    position: relative;
    filter: drop-shadow(3px 1px 0 rgba(0,0,0,0.3));
    z-index: -1;
    grid-area: trudd;
    animation: truddy-rotate 1s alternate-reverse infinite;
}

@keyframes truddy-rotate {
    0%{transform: scale(2) translateX(-90px) rotate(-9deg);}
    100%{transform: scale(2) translateX(-88px) rotate(-7deg);}
}

footer .foot{
    position: relative;
    z-index: 1;
    display: flex;
    grid-area: foot;
    gap: 15px;
    flex-wrap: wrap;
}

footer hr{
    margin: 4px;
    border: none;
    background-color: var(--background);
    opacity: 0.5;
    width: 2px;
    transform: rotate(12deg);
    border-radius: 2px;
}

footer .disabled{
    opacity: 0.2;
}

.disclaim{
    max-width: 750px;
    margin: 20px;
}

.tos{
    max-width: 690px;
    margin: 20px;
}

/* General formatting */
.formatting{
    display: grid;
    gap: 40px;
    padding: 10px;
    line-height: 1.4;
}

.formatting>div{
    display: grid;
    gap: 15px;
}

.formatting p{
    color: var(--text);
}

.formatting h2,
.formatting h3{
    font-family: londrina;
    font-weight: bold;
    line-height: 1;
    display: block;
}

.formatting h2 {
    font-size: 60px;
}

.formatting small{
    opacity: 0.5;
}

.formatting ol,
.formatting ul{
    display: grid;
    gap: 10px;
}

.formatting strong{
    font-family: londrina;
    font-size: 18px;
    font-weight: normal;
    text-shadow: none;
    clip-path: polygon(2px 1px, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
    padding: 1px 7px 1px 5px;
    background-color: var(--text);
    color: var(--background);
    opacity: 0.7;
}

/* Modal */
.modal_holder{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    overflow-y: scroll;
}

.modal_holder.show{
    animation: show_modal_box 0.2s forwards;
    pointer-events: all;
}

@keyframes show_modal_box {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.modal_holder.hide{
    animation: hide_modal_box 0.2s forwards;
    pointer-events: all;
}

@keyframes hide_modal_box {
    0%{opacity: 1;}
    100%{opacity: 0;}
}

.modal_holder .modal_box{
    padding: 1.5em;
    background-color: white;
    max-width: 600px;
    display: grid;
    gap: 2em;
    position: relative;
    border-radius: 1em;
}

.modal_holder.show .modal_box{
    animation: glide_modal_box 0.2s forwards;
}

@keyframes glide_modal_box {
    0%{transform: translateY(20px);}
    100%{transform: translateY(0px);}
}

/* Loading module */
.loading-content{
    position: relative;
}

.loading-content .load-layer{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(210,210,210,0.4);
    display: grid;
    z-index: 99;
    animation: load_layer_show 0.2s forwards;
    border-radius: 0.5em;
}

@keyframes load_layer_show {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.loading-content .load-layer img{
    margin: auto;
    width: 50px;
    aspect-ratio: 1;
    animation: loading 1.4s infinite ease-in-out;
}

@keyframes loading {
    0%{
        transform: rotate(0deg);
    }
    10%{
        transform: rotate(-10deg);
    }
    40%{
        transform: rotate(370deg);
    }
    50%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(360deg);
    }
}