@font-face {
    font-family: "BNTo";
    src: url(../fonts/big_noodle_titling_oblique.ttf);
}
::selection {
    background: #7c7c7c;
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #000000;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #1a1a1a;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #2c2c2c;
}

/* --- BASE --- */

.text_left {
    text-align: left;
}

.text_center {
    text-align: center;
}

.text_right {
    text-align: right;
}

/* --- MAIN --- */

html * {
    box-sizing: border-box;
}

body {
    margin: 4rem 0 0 0;
    padding: 0;
    background-image: url("../img/bg.jpg");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-size: 1em;
    min-height: 91vh;
}

main {
    width: 100%;
    max-width: 1440px;
    padding: 0 2rem;
}

h1 {
    color: #bef600;
    font-family: "BNTo";
    font-weight: normal;
    font-size: 6em;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    transform: skewX(-8deg);
    letter-spacing: -3px;
    user-select: none;
    text-align: center;
}

p, a {
    font-size: 1em;
    color: white;
    font-family: "BNTo";
    line-height: 1.25;
}

.is_button {
    font-size: 2em;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    font-family: "BNTo";
    border-radius: 8px;
    max-width: 800px;
    width: 75%;
    padding: 10px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    transition: transform 0.2s ease-in-out;
    user-select: none;
}

.is_button:hover, .is_button:focus, .is_button:focus-visible, .is_button:target {
    transform: translateY(-2px);
    outline-offset: 0px;
    outline: none;
    border: 1px solid #bef600;
    color: #bef600;
}

.is_button:hover::before, .is_button:focus::before, .is_button:focus-visible::before, .is_button:target::before {
    opacity: 1;
}

.is_button svg[data-lucide] {
    margin-right: 8px;
    vertical-align: middle;
}

hr {
    margin-top: 30px;
    margin-bottom: 30px;
    width: 60%;
    max-width: 600px;
    border: 1px solid #ffffff;
    border-top-width: 0;
}

.background_link {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.background_link::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
}

.mxb_link::before {
    background-image: url("/img/mxb.png");
}

.mxb_psd::before {
    background-image: url("/img/psd.png");
}

.badge_new {
    border-color: #bef600;
    animation: shake 4s infinite;
}

.badge_new::after {
    content: "New!";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: absolute;
    right: 1em;
    top: 50%;
    color: #181818;
    padding: 0.4em 0.2em;
    transform: translateY(-50%) rotate(346deg);
    background-color: #bef600;

}

@keyframes shake {
    0% {
        transform: translateX(0px);
    }

    4% {
        transform: translateX(-3px);
    }

    8% {
        transform: translateX(3px);
    }

    12% {
        transform: translateX(-3px);
    }

    16% {
        transform: translateX(3px);
    }

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

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

/* @keyframes shake {
    0% {
        right: 1em;
    }

    4% {
        right: .9em;
    }

    8% {
        right: 1.1em;
    }

    12% {
        right: .9em;
    }

    16% {
        right: 1.1em;
    }

    20% {
        right: 1em;
    }

    100% {
        right: 1em;
    }
} */

.previous_page svg {
    transition: .2s ease;
}

.previous_page:hover svg {
    transform: translateX(-.05em);
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem 0;
}

footer p {
    margin: .25em 0;
    opacity: 0.5;
}

/* --- ALERT BOXES --- */

.alert_box {
    width: 100%;
    border: 2px #bef600 solid;
    background-color: #181818da;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: .6em;
    font-size: 1.5em;
    padding: 1em;
    margin: 1em 0;
    border-radius: 8px;
    opacity: .1;
    transition: .2s ease;
    cursor: help;
}

@media screen and (max-width:425px) {
    .alert_box {
        flex-direction: column;
    }
}

.alert_box:hover, .alert_box:active {
    opacity: 1;
}

.alert_box svg {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
}

.alert_box p {
    margin: 0;
}

/* --- TABLE FILES --- */

.table_files {
    overflow-x: auto;
    color: white;
    font-family: BNTo;
    font-size: 1.5em;
    width: 100%;
    position: relative;
}

.table_files a {
    color: #bef600;
    font-family: BNTo;
    text-decoration: none;
}

.table_files table {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border-spacing:0;
    border-collapse: collapse; 
    font-size: 1em;
}

.table_files th {
    text-align: left;
    background-color: #181818da;
    border-bottom: 1px #bef600 solid;
    padding: .8rem 1rem;
    font-weight: 500;
}

.table_files td {
    padding: 1.3rem 1rem;
    background-color: #181818da;
}

/* .table_files tr:not(:last-child) td {
    border-bottom: 1px #000 solid;
} */

#top {
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0;
}

#breadcrumb {
    margin-right: auto;
    color: #ffffff;
    font-size:1.5rem;
}

#breadcrumb a {
    color: #bef600;
    text-decoration: none;
    font-family: "BNTo";
}

.table_files .is_dir .size {
    color:transparent;
    font-size:0;
}

.table_files .is_dir .size:before {
    content: "--"; 
    font-size:1.5rem;
    color:#ffffff;
}

.table_files .is_dir .download{
    visibility: hidden
}

.table_files .name {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmZmZmZmIiBzdHJva2U9Im5vbmUiPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNSw2YzAsMC42LDAuNCwxLDEsMWg1YzAtMC4zLTAuMS0wLjUtMC4zLTAuN2wtNS01QzE1LjUsMS4xLDE1LjMsMSwxNSwxVjZ6Ii8+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYsOWMtMS43LDAtMy0xLjMtMy0zVjFINkM0LjMsMSwzLDIuMywzLDR2MTZjMCwxLjcsMS4zLDMsMywzaDEyYzEuNywwLDMtMS4zLDMtM1Y5SDE2eiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll 0px 15px;
    padding: 15px 0 10px 35px;
}

.table_files .name.preview {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1maWxlLWltYWdlIj48cGF0aCBkPSJNMTUgMkg2YTIgMiAwIDAgMC0yIDJ2MTZhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjdaIi8+PHBhdGggZD0iTTE0IDJ2NGEyIDIgMCAwIDAgMiAyaDQiLz48Y2lyY2xlIGN4PSIxMCIgY3k9IjEyIiByPSIyIi8+PHBhdGggZD0ibTIwIDE3LTEuMjk2LTEuMjk2YTIuNDEgMi40MSAwIDAgMC0zLjQwOCAwTDkgMjIiLz48L3N2Zz4=) no-repeat scroll 0px 15px;
    padding: 15px 0 10px 35px;
    cursor: help;
    position: relative;
}

/* .table_files .name.preview img {
    top: -170px;
    left: 0;
    max-width: 300px;
    position: absolute;
    display: none;
} */

/* .table_files .name.preview:hover img {
    display: block;
} */

.preview_picture {
    max-width: 300px;
}

.tippy-box {
    background-color: transparent;
    border-radius: 8px;
    border: 2px #bef600 solid;
    overflow: hidden;
}

.tippy-content {
    padding: 0;

    border-radius: 8px;
}

.tippy-content img {
    display: block;
}

.table_files .name.tga {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1maWxlIj48cGF0aCBkPSJNMTUgMkg2YTIgMiAwIDAgMC0yIDJ2MTZhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0yVjdaIi8+PHBhdGggZD0iTTE0IDJ2NGEyIDIgMCAwIDAgMiAyaDQiLz48L3N2Zz4=) no-repeat scroll 0px 15px;
    padding: 15px 0 10px 35px;
}

.table_files .is_dir .name {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNiZWY2MDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1mb2xkZXIiPjxwYXRoIGQ9Ik0yMCAyMGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtNy45YTIgMiAwIDAgMS0xLjY5LS45TDkuNiAzLjlBMiAyIDAgMCAwIDcuOTMgM0g0YTIgMiAwIDAgMC0yIDJ2MTNhMiAyIDAgMCAwIDIgMloiLz48L3N2Zz4=) no-repeat scroll 0px 15px;
    padding: 15px 0 10px 35px;
}

.table_files .download {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNiZWY2MDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1kb3dubG9hZCI+PHBhdGggZD0iTTIxIDE1djRhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJ2LTQiLz48cG9seWxpbmUgcG9pbnRzPSI3IDEwIDEyIDE1IDE3IDEwIi8+PGxpbmUgeDE9IjEyIiB4Mj0iMTIiIHkxPSIxNSIgeTI9IjMiLz48L3N2Zz4=) no-repeat scroll 0px 3px;
    padding: 4px 0 4px 30px;
}

.table_files .download:hover {
    text-decoration: underline
}