@font-face {
font-family: 'bahnschrift';
src: url('../fonts/bahnschrift.ttf');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "px";
src: url('../fonts/PlanetXylox-Regular.ttf');
font-weight: normal;
font-style: normal;
}

body {
background: var(--bg-main);
font-family: 'bahnschrift';
}

.footer {
background: var(--btn);
color:var(--footer-color);
padding: 10px;
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
}

.footer a {
font-family: 'px';
color: var(--footer-link-color);
font-weight: bolder;
}

.footer a:hover, .footer a:visited,.footer a:active  {
font-family: 'px';
color: var(--footer-link-alt-color);
font-weight: bolder;
}

.status-success-box {
    display: none;
}
.status-error-box {
    display: none;
}

.redeemCode {
    display: none;
}

.logo {
width: 100px;
}


.cardReward {
cursor: pointer;
width: 50%;
}

.coinReward {
    width: min(220px, 45vw);
    max-width: 220px;
    height: auto;
}

.clothitem {
    cursor: pointer;
    padding: 3px 1px 3px 1px;
    margin: 3px;
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain;
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}

.clothitem:hover {
    background-color: rgba(48, 48, 48, 0.233);
    outline: 1px solid rgba(31, 31, 31, 0.507);
    filter: brightness(120%) saturate(110%) drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.0));
}

.clothitem.active {
    background-color: rgba(170, 170, 170, 0.3);
    outline: 2px solid rgba(117, 117, 117, 0.555);
    outline-offset: -1px;
    filter: brightness(100%) saturate(100%) drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.4)) !important;
}

.clothitem.active:hover {
    filter: brightness(120%) saturate(110%) drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.2)) !important;
}

.locked {
    padding: 3px 1px 3px 1px;
    margin: 3px;
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain;
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
    cursor: not-allowed!important;
    filter: contrast(17%) brightness(45%) saturate(1.9) blur(1px) !important;
    opacity: 0.3;
}

.clothitem1 {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
    object-fit: contain;
}

nav {
    background: var(--btn-second);
}

.navstart {
    background: var(--btn);
    padding: 10px; 
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
}

.quiz {
    display: none;
}

.hidden {
    display: none!important;
}

.navbar-toggler {
color: var(--nav-bg);
border-color:var(--nav-border)
}

.navbar-toggler-icon {
background-image: var(--nav-icon);
}

.dropdown-menu {
background: var(--btn);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
}

.dropstartborder {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
text-align: center;
background: var(--btn-second);
}

.nav-link {
color:var(--nav-text);
font-family: 'px';
}

.nav-link:hover {
color:var(--nav-text-hover);
font-family: 'px';
}

.nav-link:active,.nav-link:visited {
color: var(--nav-text-active);
font-family: 'px';
}

.dropdown-item {
color:var(--nav-text);
font-family: 'px';
}

.dropdown-item:visited , .dropdown-item:active {
color:var(--nav-text);
font-family: 'px';
}

.dropdown-item:focus, .dropdown-item:hover {
color:var(--nav-text);
background-color: var(--nav-dropdown-hover-bg);
}

.g-recaptcha {
transform:scale(0.77);
transform-origin:0 0;
}

label {
font-family: 'px';
}

.form-control {
background-color: var(--input-color);
border: 1px solid var(--input-border);
}


.bg-gray {
background-color: var(--input-color) !important;
} 

.btn-custom, .btn-custom:active, .btn-custom:visited, .btn-custom:hover {
background: var(--btn-second);
font-family: 'px';
color: var(--color);
}

input {
background-color: var(--input-color);
border: 1px solid var(--input-border);
}

input:active {
background-color: var(--input-color);
border: 1px solid var(--input-border);
}

.title-container {
margin-top: 15px;
margin-right: 25px;
margin-left: 25px;
padding: 10px;
text-align: center;
background: var(--btn);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
}

.title {
font-family: 'px';
font-size: x-large;
}

.title-description {
font-size: medium;
}


.content {
margin-top: 15px;
margin-right: 25px;
margin-left: 25px;
padding: 10px;
}

.main-container {
margin-bottom: 25px;

padding: 10px;
background: var(--btn);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.55);
}

.main-title {
font-family: 'px';
text-align: center;
font-size: xx-large;
}

.main-description {
text-align: center;
font-size: medium;
}

.main {
color: var(--main);
}

.border-bg {
background: var(--btn-second);
object-fit: cover;
background-size: auto;
padding: 20px;
color: var(--color)
}

.planet-bg {
background-image: var(--planet-bg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding: 20px;
color: var(--color)
}

.char-bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}


.main-border-bg {
background: var(--background);
padding: 40px;
color: var(--main);
border-style: solid;
border-image-slice: 59 72 72 77;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch; 
border-image-source: var(--bg-img);
}

h1,h2,h3,h4,h5 {
font-family: 'px';
color:var(--header-text)
}

.table td, .table th {
border-top: 1px solid var(--hr)
}

hr {
border-top: 1px solid var(--hr);
}

.faq {
list-style-type:circle
}

a {
color: var(--imp)
}

a:hover, a:active, a:visited  {
color: var(--imp-hover)
}

.faq-question {
color: var(--imp)

}

.card-name {
color: var(--imp-hover)
}


.card-desc {
height: 200px;
overflow: scroll;
padding: 10px;
border-top: 1px solid var(--hr);

}

.faq-image {
width: 100px;
max-height: 100px;
}

.main-hr {
border-bottom: 1px solid var(--hr);
}


.card-img {
width: 200px;
max-height: 200px;
}

.mainbg-breadcrumb {
padding: 10px; padding-bottom: 0px;  padding-top: 15px;
}

.main-breadcrumb {
padding-top: 10px; background: transparent;
}

.breadcrumb a {
color: var(--main)    ;
}

.breadcrumb a:hover,a:active,a:visited {
color: var(--imp);
}


.blog {
display: inline;
}

#page_title {
font-size: xx-small;
}

.blog-date {
float: left;
text-transform: inherit;
}

.blog-author {
float: right;
}

.wardrobe {
border: transparent solid;
}


@media (min-width: 55em) {
#artlist { column-count: 2 ;}
}

@media (min-width: 100em) {
#artlist { column-count: 3 ;}
}

.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching full width */
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events:all;
}


.img1n2 {
display: flex; 
justify-content:center;
}


#settingsEmail {
display: none;
}

#settingsAPI {
display: none;
}

.s {
max-width: 300px;
}

.img1 {
z-index: 1;
}

.img2 {
position: absolute; 
z-index: 2;
top: 100;
}


.img3 {
position: absolute; 
z-index: auto;
top: 100;
}

.table tbody + tbody {
border: var(--main);
}


.img-thumbnail {
background-color: var(--img-bg);
border: 1px solid var(--img-border)
}


.carousel-control-next-icon {
background-image: var(--car-icon-next)
}

.carousel-control-prev-icon {
background-image: var(--car-icon-prev)
}
.carousel-indicators li {
background-color: var(--main);
}  


.footer-links a {
padding-right: 10px;
}

.pill-link {
color: var(--tabs) !important;
}

.nav-link .pill-link {
color: var(--tabs)  !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: var(--tabs-bg)  !important;
border-color: var(--tabs-border)  !important;
}

.character {
position: relative;
}

.cloth-btn {
position: absolute;
margin-top: 15px;
padding: 0 16px 0 16px;
width: 100%;
z-index: 10;
}

.btn-right {
float: right;
}

.icon-custom {
fill: currentColor;
}

.table {
color: var(--main);
}

.rainbow_text_animated {
background: var(--animation);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 3s ease-in-out infinite;
background-size: 400% 100%;
}

@keyframes rainbow_animation {
0%,100% {
background-position: 0 0;
}

50% {
background-position: 100% 0;
}
}


.Zebra_Pagination {
clear: both;
width: 100%;
overflow: hidden;
}

.Zebra_Pagination ol {
position: relative;
left: 50%;
list-style-type: none;
margin: 0;
padding: 0;
float: left
}

.Zebra_Pagination li {
position: relative;
float: left;
right: 50%
}

.Zebra_Pagination .pagination {
display: inline-block;
}

.Zebra_Pagination li {
display: inline;
}

.Zebra_Pagination a,
.Zebra_Pagination span {
padding: 6px 12px;
color: var(--page-bg)    ;
text-decoration: none;
background-color: var(--page-border);
border: 1px solid var(--page-border);
display: block;
float: left;
position: relative;
margin-left: -1px;
}

.Zebra_Pagination li.active a {
color: var(--page-border);
cursor: default;
background-color: var(--page-bg)    ;
border-color: var(--page-bg)    ;
}

.Zebra_Pagination li a:hover,
.Zebra_Pagination li span:hover {
color: var(--page-bg)    ;
background-color: var(--page-border);
border-color:var(--page-border);
}

.Zebra_Pagination li.disabled a {
color: var(--page-border);
background-color: var(--page-bg)    ;
border-color: var(--page-border);
cursor: default;
}

.Zebra_Pagination li.disabled a:hover {
color: var(--page-border);  ;
background-color: var(--page-bg)    ;
border-color: var(--page-border);
}

.page-item.active .page-link {
color: var(--page-border);
background-color: var(--page-bg)    ;
border-color: var(--page-bg)    ;
}

.page-item.disabled .page-link {
display: none !important;
}

.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}


.note-container {
display: inline;
width: 500px;
}

.note-stuff {
float: right;
text-transform: inherit;
}

.note-author {
float: left;
}

.note-report {
color:var(--chat-report);
text-decoration: underline;
font-weight: bold;
cursor: pointer;
}

.note-msg {
height: 40px;
overflow: scroll;
margin-bottom: 10px;
background-color: var(--chatbox);
}

.note-msgs {
max-height: 500px;
overflow: scroll;
}

@media only screen and (max-width: 1200px) {
#first {
order: 0;
}
#second {
order: 1;
}
#third {
order: 2;
}
#fourth {
order: 3;
}
}

@media only screen and (max-width: 768px) and (max-width: 576px) {
    .content {
        margin-right: 0px;
        margin-left: 0px;
        padding: 0px;
    }

    img {
        max-width: 50%;
    }

    .main-border-bg {
        padding: 15px;
    }
}


@media only screen and (max-width: 1200px) and (max-width: 992px) {
    .content {
        margin-right: 5px;
        margin-left: 5px;
        padding: 5px;
    }

    img {
        max-width: 75%;
    }

    .main-border-bg {
        padding: 25px;
    }
}

/* Signature shimmer effect */
img[src*="/content/sigs/"] {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

img[src*="/content/sigs/"]:hover {
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        filter: brightness(1) saturate(1);
    }
    25% {
        filter: brightness(1.2) saturate(1.3);
    }
    50% {
        filter: brightness(1.4) saturate(1.5) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }
    75% {
        filter: brightness(1.2) saturate(1.3);
    }
    100% {
        filter: brightness(1) saturate(1);
    }
}