:root {
    color-scheme: light dark;
    font-family: munro !important;
    letter-spacing: 1px;
    color: white !important;
    scrollbar-color: transparent;
    scrollbar-arrow-color: transparent;
    --scrollbar-color-thumb: white;
    --scrollbar-color-track: transparent;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
    font-weight: bolder;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
    
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    :root {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    :root::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    :root::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    :root::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

a{
    cursor: pointer;
}

input[type="checkbox"] {
  -webkit-appearance: none; /* For Webkit browsers */
  -moz-appearance: none;    /* For Mozilla browsers */
  appearance: none;
  /* Add custom styles here */
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 0px;
  background-color: #00000050;
  margin-right: 10px;
  cursor: pointer;
  position: relative; /* For positioning the checkmark */
}

input[type="checkbox"]:checked {
  background-color: #ffffff75; /* Example: Green when checked */
}

input[type="checkbox"]:checked::after {
  content: '✓'; /* Checkmark symbol */
  color: white;
  font-size: 1vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

label{
    font-size: 1vw !important;
    font-family: munro !important;
    letter-spacing: 1px !important;
    font-weight: bolder !important;
    border: 1px solid white;
    color: white !important;
    border-radius: 0px;
    background-color: #00000050;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



#playerhealthbar_container{
    width: 100%;
    height: 2vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
#playerhealthbar{
    background-color: red;
    height: 2vh;
    transition: width 0.1s ease-in-out;
}
#playerhealthbar_text{
    height: 2vh;
    width: 100%;
    top: 2px;
    align-items: center;
    text-align: center;
    position: absolute;
    font-size: 1.5vh;
    color: white;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}
#playermanabar_container{
    width: 100%;
    height: 2vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
#playermanabar{
    background-color: blue;
    height: 2vh;
    transition: width 0.1s ease-in-out;
}
#playermanabar_text{
    height: 2vh;
    width: 100%;
    align-items: center;
    text-align: center;
    font-size: 1.5vh;
    color: white;
    position: absolute;
    top: calc(2vh + 4px);
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}
#playerstaminabar_container{
    width: 100%;
    height: 2vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
#playerstaminabar{
    background-color: yellow;
    height: 2vh;
    transition: width 0.1s ease-in-out;
}
#playerstaminabar_text{
    height: 2vh;
    width: 100%;
    align-items: center;
    text-align: center;
    font-size: 1.5vh;
    font-weight: bolder;
    color: white;
    position: absolute;
    top: calc(4vh + 6px);
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}
#playerxpbar_container{
    width: 100%;
    height: 2vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
#playerxpbar{
    background-color: #DDD;
    height: 2vh;
    transition: width 0.1s ease-in-out;
}
#playerxpbar_text{
    height: 2vh;
    width: 100%;
    align-items: center;
    text-align: center;
    font-size: 1.5vh;
    font-weight: bolder;
    color: white;
    position: absolute;
    top: calc(6vh + 8px);
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}
#playername{
    color: white;
}
.player-nametag{
    font-size: 0.75vw !important; 
    text-align: center;
    cursor: default;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.npc-nametag{
    font-size: 0.75vw !important;
    text-align: center;
    cursor: default;
    color: rgb(0, 200, 0) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.enemy-nametag{
    font-size: 0.75vw !important;
    text-align: center;
    cursor: default;
    color: rgb(200, 0, 0) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.boss-nametag{
    font-size: 3vw !important;
    text-align: center;
    cursor: default;
    color: rgb(200, 0, 0) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.damage-player{
    font-size: 1.5vw !important;
    text-align: center;
    cursor: default;
    color:rgb(255, 255, 255) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.damage-heal{
    font-size: 1.5vw !important;
    text-align: center;
    cursor: default;
    color:rgb(255, 128, 128) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.damage-mana{
    font-size: 1.5vw !important;
    text-align: center;
    cursor: default;
    color:rgb(128, 128, 255) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.damage-enemy{
    font-size: 1.5vw !important;
    text-align: center;
    cursor: default;
    color:rgb(200, 0, 0) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}
.damage-timer{
    font-size: 1.5vw !important;
    text-align: center;
    cursor: default;
    color:rgb(255, 255, 0) !important;
    font-weight: bolder;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}

.teamname{
    color: white;
}
.teamhealthbar_container{
    width: 100%;
    height: 0.66vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
.teamhealthbar{
    background-color: red;
    height: 0.66vh;
    transition: width 0.1s ease-in-out;
}
.teammanabar_container{
    width: 100%;
    height: 0.66vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
.teammanabar{
    background-color: blue;
    height: 0.66vh;
    transition: width 0.1s ease-in-out;
}
.teamstaminabar_container{
    width: 100%;
    height: 0.66vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
.teamstaminabar{
    background-color: yellow;
    height: 0.66vh;
    transition: width 0.1s ease-in-out;
}
.teamxpbar_container{
    width: 100%;
    height: 0.66vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
.teamxpbar{
    background-color: #DDD;
    height: 0.66vh;
    transition: width 0.1s ease-in-out;
}

.enemyhpbar-container{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    outline: none;
    color: white !important;
    cursor: default;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.enemyhpbar{
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
    height: 100%;
    transition: width 0.1s ease-in-out;
}

.enemyhpbar-text{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    font-size: 0.75vw;
    text-align: center;
    transition: width 0.1s ease-in-out;
}

.worldenemyhealthbar_container{
    width: 100%;
    height: 4vh;
    border: 1px solid white;
    overflow: hidden;
    display: block;
}
.worldenemyhealthbar{
    background-color: red;
    height: 4vh;
    transition: width 0.1s ease-in-out;
}
.worldenemyhealthbar_text{
    height: 4vh;
    width: 100%;
    top: 2px;
    align-items: center;
    text-align: center;
    position: absolute;
    font-size: 3vh;
    font-weight: bolder;
    color: white;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}
.worldenemyname_text{
    height: 4vh;
    width: 100%;
    align-items: center;
    text-align: center;
    position: absolute;
    font-size: 3vh;
    font-weight: bolder;
    color: white;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.hidden{
    display: none;
}

.borderbox{
    border: 1px solid white;
    color: white !important;
    overflow: hidden;
}

.readable-textbox{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    font-family: munro !important;
    outline: none;
    padding: 4px;
    color: white !important;
    font-weight: bolder;
    font-size: 1vw;
    cursor: default;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.cooldown{
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgb(125, 125, 125);
    color: rgb(125, 125, 125) !important;
    text-decoration: line-through;
}

.title-textbox{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    font-weight: bolder;
    outline: none;
    color: white !important;
    font-size: 24pt !important;
    cursor: default;
    text-align: center;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.input-box{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    font-family: munro !important;
    outline: none;
    font-weight: bolder;
    color: white !important;
    font-size: 1vw;
    cursor: default;
    overflow: hidden;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.gold-display{
    text-align: right !important;
    font-size: 1vw !important;
    font-weight: bolder;
}

.scrollable {
    overflow-y: scroll !important;
}

.list-box{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    font-family: munro !important;
    outline: none;
    color: white !important;
    font-size: 1vw;
    cursor: default;
    pointer-events: none;
    font-weight: bolder;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    letter-spacing: 2px;
    overflow-y: scroll;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

option {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding-top:4px;
    padding-bottom: 4px;
}
option:checked {
    background: linear-gradient(#DDD, #DDD);
    color: white;
}
option:active {
    background: linear-gradient(#DDD, #DDD);
    color: white;
}
option:focus {
    background: linear-gradient(#DDD, #DDD);
    color: white;
}
option:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.tablecontainer{
    width: 100%;
    text-align: center;
}

.menutable{
    padding: 0.5vw;
    text-align: center;
    width: 100%;
    color: white !important;
    font-weight: bolder;
}

.title-box{
    text-align: center;
    font-size: 1vw;
}

.indextitle {
    text-align: left;
    width: 100%;
    font-size: 1.5vw;
    font-weight: bolder;
    color: white !important;
    
}

.indexdescription {
    padding: 1vw;
    text-align: left;
    width: 100%;
    color: white !important;
    font-weight: bolder;
}

.indexkey {
    text-align: left;
    width: 60%;
    color: white !important;
    font-weight: bolder;
}

.indexvalue{
    text-align: right;
    width: 40%;
    color: white !important;
    font-weight: bolder;
}

.interact-button{
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid white;
    font-family: munro !important;
    outline: none;
    color: white !important;
    cursor: pointer;
    font-size: 0.75vw;
    font-weight: bolder;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.interact-button:hover{
    background-color: rgba(0, 0, 0, 0.75);
    border: 3px solid rgb(219, 255, 255);
}

.active-button{
    background-color: rgb(0, 0, 0) !important;
    border: 3px solid rgb(219, 255, 255) !important;
}

.start-button{
    background-color: rgba(0, 0, 0, 0.5);
    border: 4px solid white;
    font-family: munro !important;
    outline: none;
    color: light-dark(white, white) !important;
    cursor: pointer;
    font-size: 2vw !important;
    font-weight: bolder;
    text-shadow:
    -1px -1px 0 #000, /* Top-left shadow */
    1px -1px 0 #000,  /* Top-right shadow */
    -1px 1px 0 #000,  /* Bottom-left shadow */
    1px 1px 0 #000;   /* Bottom-right shadow */
}

.start-button:hover{
    background-color: rgba(0, 0, 0, 0.75);
    border: 6px solid rgb(219, 255, 255);
    
}

.startscreen-textbox{
    background-color: rgba(0, 0, 0, 0.5);
    border: 4px solid white;
    
    outline: none;
    padding: 4px;
    color: white !important;
    font-size: 1vw !important;
    cursor: default;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
}

.credits_title{
    font-size: 1.25vw !important;
    text-align: center !important;
    margin: 8px !important;
}

.credits_developer{
    text-align: center !important;
    margin: 8px !important;
}

.credits_music{
    text-align: center !important;
    margin: 8px !important;
}

#teamtext {
    font-size: 12px;
}

.HP {
    padding-top: 2vh;
}

.Level {
    padding-top: 2vh;
}

.FoodPoints {
    padding-top: 2vh;
}

.HealthAttributePoints {
    padding-top: 2vh;
}

.Stats {
    padding-top: 2vh;
}

.MovementSpeed {
    padding-top: 2vh;
}

.BaseDamage {
    padding-top: 2vh;
}

.DodgeChance {
    padding-top: 2vh;
}

.PhysicalDefense {
    padding-top: 2vh;
}

.AdditionalPhysicalDefense_percent {
    padding-top: 2vh;
}

.skill-box {
    font-size: 0.7vw !important;
    text-align: center;
    font-weight: bolder;
}

.chatmessage{
    margin: 2px;
    border-top: 1px solid white;
}
.chatbroadcast{
    margin:2px;
    border: 2px solid white;
    font-weight: bolder;
    text-align: center;
}

.emblem{
    aspect-ratio: 1/1;
    background-color: #00000050;
    border: 1px solid white;
    display: inline-table;
    height: 1.5vh;
    vertical-align: middle;
}

.usernametext{
    display: inline-table;
    height: 100%;
}

.usernamecontainer{
    width: 100%;
}

.itemtext {
    text-align: center;
}

.item-Common{
    color: white !important;
}

.item-Uncommon{
    color: rgb(0, 136, 255) !important;
}

.item-Rare{
    color: rgb(255, 255, 0) !important;
}

.item-Epic{
    color: rgb(217, 0, 255) !important;
}

.item-Legendary{
    color: rgb(255, 68, 0) !important;
}

.chatcontainer {
  text-align: center;
  display: flex;
  align-items: end; /* Vertically centers content */
  justify-content: center;
}

.typewriter {
    color: white;
    background-color: #00000050;
    padding: 4px;
    border: 1px solid white;
}

.smalltext {
    font-size: 0.5vw;
    text-align: center;
}

.questbubbletext {
    font-size: 2.5vw;
    text-align: center;
    height:100%;
    width: 100%;
}

#New-Quest {
    color: rgb(255, 255, 0) !important;
}

#Quest-Waiting {
    color: rgb(170, 170, 170) !important;
}

#Quest-Dialogue {
    color: white !important;
}

#Quest-Turn-In {
    color: rgb(255, 255, 0) !important;
}

.mapblock:hover {
    border: 2px solid white;
    cursor: pointer;
}

.map-selected {
    border: 2px solid white;
}

.map-here {
    background-color: #4f4fff50;
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-star {
    font-size: 1vw;
}

.maptitle {
    font-size: 2vw;
    text-align: center;
    color: white !important;
}

.mapdescription {
    font-size: 1vw;
    padding: 1vw;
    color: white !important;
}

#EncyclopediaContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.encyclopedia-image {
    width: 99%;
    height: 40%;
    background-color:#ffffff50;
    border: 1px solid white;
    display: none;
}

.skillcontentcontainer {
    border: 1px solid white;
    width: 90%;
    padding: 2%;
}

.skillscontenttitle{
    font-size: 1.5vw;
}

.skill {
    display: inline-table;
}

.monster-namecontainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: column;
}
.monster-namecard{
    font-size: 1.5vw;
    margin-top: 1vh;
}
.content_name{
    width: 70%;
    font-size: 1.25vw;
}
.content_type{
    width: 28%;
    font-size: 1vw;
    text-align: right;
}
.content_description{
    width: 100%;
    margin: 2%;
}

.content_healthcost {
    width: 30%;
}
.content_manacost {
    width: 30%;
}
.content_staminacost {
    width: 30%;
}
.content_cooldown {
    width: 100%;
}

.BaseStats{
    text-align: center;
}

.IsUsable.value{
    display: none;
}
.IsSetable.value{
    display: none;
}
.IsConsumable.value{
    display: none;
}
.Undropable.value{
    display: none;
}
.Untradeable.value{
    display: none;
}
.Unsellable.value{
    display: none;
}

.map-desc-box {
    border-bottom: 1px solid white;
}

.help_title{
    font-size: 2vw;
    text-align: center;
}

.question{
    font-size: 1.5vw;
}

.helpquestion{
    margin: 1vw;
}