All-Resources/[char]/codem-multicharacter/html/css/index.css

@font-face {
    font-family: "Gilroy-Bold";
    src: url("../fonts/GILROY-BOLD.TTF");
}

@font-face {
    font-family: "Gilroy-SemiBold";
    src: url("../fonts/GILROY-SEMIBOLD.TTF");
}

@font-face {
    font-family: "Gilroy-Medium";
    src: url("../fonts/GILROY-MEDIUM.TTF");
}

@font-face {
    font-family: "Gilroy-Black";
    src: url("../fonts/GILROY-BLACK.TTF");
}

@font-face {
    font-family: "Circular Std";
    src: url("../fonts/CIRCULARSTD-MEDIUM.OTF");
}

@font-face {
    font-family: "SF Compact Rounded";
    src: url("../fonts/SF-Compact-Rounded-Semibold.ttf");
}

@font-face {
    font-family: "Gilroy-Heavy";
    src: url("../fonts/GILROY-HEAVY.TTF");
}

body {
    user-select: none;
}

::-webkit-scrollbar {
    display: none;
    visibility: hidden;
    opacity: 0;
    background-color: transparent;
}

.borderred {
    border: 1px solid red;
}

.textCss {
    font-size: 2.5vw;
    font-style: normal;
    font-weight: 400;
    line-height: 99.5%;
    letter-spacing: 3.84px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.0521vw #fff388;
}

.input-type {
    outline: none;
    padding-left: 0.7vw;
    color: #fff;
    font-family: "Gilroy-SemiBold";
    font-size: 0.625vw;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.1031vw;
    border-radius: 0.2604vw;
    background: rgba(45, 43, 43, 0.614);
    overflow: hidden;
}

.boxColor {
    border-radius: 0.4167vw;
    background: #d9d9d9 !important;
    box-shadow: 0px -3px 1.1px 0px rgb(124, 124, 124) inset !important;
    opacity: 0.81;
}

.buyboxColor {
    border-radius: 0.4167vw;
    background: #fff388 !important;
    box-shadow: 0px -3px 1.1px 0px rgb(117, 106, 0) inset !important;
    opacity: 0.81;
}

select {
    outline: none;
    border: none;
}

.leftpage-enter-active {
    animation: leftpage-enter 0.5s ease forwards;
}

.leftpage-leave-active {
    animation: leftpage-leave 0.5s ease forwards;
}

@keyframes leftpage-enter {
    0% {
        transform: translateX(-100%);
    }

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

@keyframes leftpage-leave {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-200%);
    }
}

.rightpage-enter-active {
    animation: rightpage-enter 0.5s ease forwards;
}

.rightpage-leave-active {
    animation: rightpage-leave 0.5s ease forwards;
}

@keyframes rightpage-enter {
    0% {
        transform: translateX(100%);
    }

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

@keyframes rightpage-leave {
    0% {
        transform: translateX(0);
    }

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

.toppage-enter-active {
    animation: toppage-enter 0.5s ease forwards;
}

.toppage-leave-active {
    animation: toppage-leave 0.5s ease forwards;
}

@keyframes toppage-enter {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes toppage-leave {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

.custom-input:focus {
    outline: none;
    border: 1px solid white;
    border-radius: 0.2vw;
}
.OPEN_SLOT:hover {
    background: #fff388 !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 0.2vw;
}

.yesButtonCss:hover {
    background: #ff2950 !important;
    border: 1px solid #fe002e !important;
}

.noButtonCss:hover {
    background: #c9c9c9 !important;
    border: 1px solid #fff !important;
}

.OPEN_SLOT_TEXT:hover {
    color: #000 !important;
}

.text-scaleCss:hover {
    transform: scale(1.1);
    transition: 0.5s;
}

.hover-anim:hover {
    transform: scale(1.1);
    transition: 0.5s;
}
.hover-anim {
    transition: 0.5s;
}
.inner-page {
    z-index: 1;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transition: transform 1s;
    background-image: url("wallet2.png");
    background-position: 100% 100%;
    height: 102%;
    background-size: cover;
    background-repeat: no-repeat;
    transform: rotateX(45deg);
}

.purpletext {
    color: #ff33da;
}

.orangetext {
    color: #ff8b38;
}

.whitetext {
    color: #fff;
}

.bluetext {
    color: #33c9ff;
}

.greentext {
    color: #33ff7e;
}
.redtext {
    color: #ff3838;
}

.orangeplaytime {
    background: rgba(254, 105.83, 0, 0.5);
    border-radius: 0.4vw;
    border: 3px #ff8b38 solid;
    color: #ff8b38;
}

.whiteplaytime {
    background: rgba(127, 127, 127, 0.5);
    border-radius: 0.4vw;
    border: 3px #9c9c9c solid;
    color: white;
}

.purpleplaytime {
    background: rgba(254, 0, 207.43, 0.5);
    border-radius: 0.4vw;
    border: 3px #ff38db solid;
    color: #ff33da;
}

.blueplaytime {
    background: rgba(0, 186.27, 254, 0.5);
    border-radius: 0.4vw;
    border: 3px #38caff solid;
    color: #38caff;
}

.greenplaytime {
    background: rgba(0, 254, 93.13, 0.5);
    border-radius: 0.4vw;
    border: 3px #38ff81 solid;
    color: #38ff81;
}

.redplaytime {
    background: rgba(254, 0, 0, 0.5);
    border-radius: 0.4vw;
    border: 3px #ff3838 solid;
    color: #ff3838;
}

.left-icon:hover {
    animation: slide-right 0.5s ease-out both;
}

.hover-anim-2:hover {
    background-color: rgba(255, 255, 255, 0.281);
    transition: 0.5s;
}
.hover-anim-2 {
    transition: 0.5s;
}

@keyframes slide-right {
    0% {
        transform: translateX(-30px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.shadow-inner-2 {
    box-shadow: 0px -3px 1.1px 0px #47020e inset;
}