* {
    box-sizing: border-box;
    font-weight: lighter;
    margin: 0px;
    padding: 0px;
    scroll-behavior: smooth;
    scrollbar-color: #434343a8 #17161482;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: #00000000;
}



/* transition */
@view-transition {
    navigation: auto;
}

.body#body {
    view-transition-name: switch;
}
::view-transition-old(switch) {
    animation-name: switch;
}
::view-transition-new(switch) {
    animation-name: switch;
}

@keyframes switch {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}



/* no scrollbar */
.noscrol {
    scrollbar-width: none;
}



.nosel {
    user-select: none;
}



::selection {
    background-color: var(--rfb-green);
    color: var(--text-bl);
}



html {
    height: 100vh;
    scroll-behavior: smooth;
}



body {
    background-color: var(--body);
    padding-top: 100px;
    overscroll-behavior-y: contain;
    overflow-x: hidden;
    overflow-y: auto;
}



.button-small {
    align-items: center;
    background-color: #58585a;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    height: 40px;
    outline: 3px solid #1e1e1f;
}
.button-small:active {
    height: 34px;
    /* outline: 3px solid #ffffff34; */
}

.button-small .btn-con {
    display: block;
    background-color: #d0d1d4;
    border: 3px solid #eff0f0;
    height: calc(100% - 6px);
    width: 100%;
}
.button-small:hover .btn-con {
    background-color: #b1b2b5;
}
.button-small:active .btn-con {
    background-color: #b1b2b5;
    height: 100%;
}



.button-outline:focus-visible, .button-outline:hover:focus-visible, .button-outline:active:focus-visible {
    background-color: #ffffff00;
    outline: var(--focus-outline-wh) !important;
}



.button {
    align-items: center;
    background-color: #58585a;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    height: 60px;
    margin: var(--button-margin);
    outline: var(--button-outline);
}
.button:active {
    height: 54px;
}

.button .btn-con {
    display: block;
    background-color: #d0d1d4;
    border-bottom: 3px solid #e3e3e5;
    border-left: 3px solid #ecedee;
    border-right: 3px solid #e3e3e5;
    border-top: 3px solid #ecedee;
    height: calc(100% - 6px);
    width: 100%;
}
.button:hover .btn-con {
    background-color: #b1b2b5;
    border-bottom: 3px solid #e0e0e1;
    border-left: 3px solid #eff0f0;
    border-right: 3px solid #e0e0e1;
    border-top: 3px solid #eff0f0;
}
.button:active .btn-con {
    background-color: #b1b2b5;
    border-bottom: 3px solid #e0e0e1;
    border-left: 3px solid #eff0f0;
    border-right: 3px solid #e0e0e1;
    border-top: 3px solid #eff0f0;
    height: 100%;
}


.button-disabled {
    align-items: center;
    background-color: #8c8d90;
    cursor: url('/media/assets/icons/texture/Blocked.cur'), not-allowed;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    height: 60px;
    margin: var(--button-margin);
    outline: 3px solid #58585a;
}

.button-disabled .btn-con {
    display: block;
    background-color: #b1b2b5;
    height: calc(100% - 6px);
    width: 100%;
}


.button-disabled-pressed {
    align-items: center;
    background-color: #8c8d90;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    height: 54px;
    margin: var(--button-margin);
    outline: 3px solid #58585a;
}

.button-outline:focus-visible .button-disabled-pressed {
    outline: 3px solid #ffffff00;
}

.button-disabled-pressed .btn-con {
    display: block;
    background-color: #b1b2b5;
    height: 100%;
    width: 100%;
}


.button-active {
    align-items: center;
    background-color: #1d4d13;
    cursor: pointer;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    height: 60px;
    margin: var(--button-margin);
    outline: 3px solid #1e1e1f;
}
.button-active:active {
    height: 54px;
}

.button-active .btn-con {
    display: block;
    background-color: #3c8527;
    border-bottom: 3px solid #4f913c;
    border-left: 3px solid #639d52;
    border-right: 3px solid #4f913c;
    border-top: 3px solid #639d52;
    height: calc(100% - 6px);
    width: 100%;
}
.button-active:hover .btn-con {
    background-color: #2a641c;
    border-bottom: 3px solid #699260;
    border-left: 3px solid #7fa277;
    border-right: 3px solid #699260;
    border-top: 3px solid #7fa277;
}
.button-active:active .btn-con {
    background-color: #1d4d13;
    border-bottom: 3px solid #608259;
    border-left: 3px solid #779471;
    border-right: 3px solid #608259;
    border-top: 3px solid #779471;
    height: 100%;
}

/* .button-trigger .btn-con {
    display: block;
    background-color: #3c8527;
    border: 3px solid #4f913c;
    height: calc(100% - 6px);
    width: 100%;
}
.button-trigger:hover .btn-con {
    background-color: #2a641c;
    border: 3px solid #699260;
}
.button-trigger:active .btn-con {
    background-color: #1d4d13;
    border: 3px solid #608259;
    height: 100%;
} */



.btn-sz-one {
    min-width: 250px;
}
.btn-sz-two {
    min-width: 300px;
}
.btn-sz-square {
    min-width: 60px;
}
.btn-sz-small {
    min-width: 70px;
}
.btn-sz-full {
    width: 100%;
}



input {
    background-color: #656465;
    border-bottom: 3px solid #868686;
    border-left: 3px solid #494949;
    border-right: 3px solid #868686;
    border-top: 3px solid #494949;
    font-family: "Mojangles", "Unicode";
    color: #fff;
}



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

a:focus-visible {
    background-color: var(--rfb-green-very-very-transparent);
    outline: 3px solid var(--rfb-green);
}

a:hover {
    color: var(--rfb-blue);
}

a:focus-visible:hover {
    background-color: var(--rfb-blue-very-very-transparent);
    outline: 3px solid var(--rfb-blue);
}

a:focus-visible:active {
    background-color: var(--rfb-blue);
    color: #000;
    outline: 3px solid var(--rfb-blue);
}

a::selection {
    background-color: var(--rfb-blue);
    color: #005368;
}


img {
    color: #ffffff00;
}

img.pxl {
    image-rendering: pixelated;
}



h1 {
    font-size: 2rem;
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



h2 {
    font-size: 1.5rem;
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



h3 {
    font-size: 1.17rem;
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



h4 {
    font-size: 1rem;
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



h5 {
    font-size: 0.83rem;
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



h6 {
    font-size: 0.67rem;
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



p {
    overflow: hidden;
    padding-left: 1px;
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



ul {
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



li {
    text-overflow: ellipsis;
    white-space: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
}



.large-font {
    font-family: "RFBStoreSetLoud", "Noto Sans TC", "Noto Sans SC", "Noto Sans JP", "Noto Sans Myanmar", "Noto Sans KR", "Noto Sans Khmer", "Lato";
}

.small-font {
    font-family: "Mojangles", "Unicode";
}



.color-wh {
    color: var(--text-wh);
}

.color-wh_fd {
    color: var(--text-wh_fd);
}

.color-bl {
    color: var(--text-bl);
}

.color-bl_fd {
    color: var(--text-bl_fd);
}



hr {
    height: 0.5px;
    border: none;
    background: #c2c2c2;
}



/* @media for header size */



@media only screen and (max-width: 456px) {
    body {
        scrollbar-width: none;
    }
}



@media only screen and (max-height: 500px) {
    body {
        padding-top: 60px;
    }
}