styles.css

.attribute {
    text-align: left;
    color: white;

    display: inline-block;
    padding: 5px;

    border-radius: 4px;
    max-height: min-content;
}
.attribute:hover {
    /* font-weight: 500; */
    text-shadow: 0px 2px 5px white;
}
.at_container {
    /* position: fixed;
    height: auto;
    width: 100%;

    top: 0;
    left: 0;
    right: 0; */

    overflow: overlay;
    width: 100%;

    border-radius: 4px;
}

/* TOP RIGHT */
.tr_container {
    /* position: fixed;
    top: 0;
    right: 0; */

    border-radius: 4px;
    margin-top: 5px;
    margin-right: 5px;
}
.debug {
    text-align: center;
    color: white;

    /* top: 5px;
    right: 5px;
    bottom: auto; */
    /* width: 300px; */
    padding: 5px;

    border-radius: 4px;
}
.bar {
    /* position: fixed; */
    height: 20px;
    width: 0%;

    border-radius: 4px;
}
.barholder {
    height: 20px;
    /* width: 100%; */
    background-color: #ffffff10;
    /* top: 21%;
    right: 5px; */
    display: block;

    border-radius: 4px;
    margin-top: 5px;
}
.inventory {
    text-align: center;
    color: white;

    /* right: 5px;
    width: 300px; */
    padding: 5px;

    border-radius: 4px;
    margin-top: 5px;

    max-height: 250px;
    /*275px;*/
    overflow-y: scroll;
}
.sortinventory {
    position: fixed;

    margin-left: 5px;
    margin-top: 5px;
}

/* BOTTOM RIGHT */
.br_container {
    /* position: fixed;
    bottom: 0;
    right: 0; */

    border-radius: 4px;
    /* margin-bottom: 5px;
    margin-right: 5px; */

    padding: 5px;
    grid-gap: 5px 0px;
    grid-template-columns: auto;
    grid-auto-flow: dense;
    display: grid;

    align-items: stretch;
    justify-items: stretch;

    width: 318px;
}
.iteminfo {
    text-align: left;
    color: white;

    /* height: min-content; */
    /* width: 300px; 300px*/
    align-self: end;
    padding: 5px;

    border-radius: 4px;
    display: none;
}
.quests {
    text-align: center;
    color: white;

    /* height: min-content; */
    /* margin-top: 5px; */
    /* width: 300px; */
    align-self: end;
    padding: 5px;

    border-radius: 4px;
}

/* BOTTOM LEFT */
.bl_container {
    /* position: fixed;
    bottom: 0;
    left: 0; */

    border-radius: 4px;
    margin-bottom: 5px;
    margin-left: 5px;

    /* display: grid; */
}
.locations {
    text-align: center;
    color: white;

    /* bottom: 5px;
    right: 5px;
    width: 300px;*/
    padding: 5px;

    border-radius: 4px;
    margin-top: 5px;
}
.actions {
    text-align: center;
    color: white;

    /* bottom: 5px;
    left: 5px;
    width: 300px;*/
    padding: 5px;

    border-radius: 4px;
    margin-top: 5px;
}
#chestinv.actions {
    max-height: 250px;
    overflow-y: scroll;
}

/* MAIN GRID */
.grid-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto;
  /* grid-template-areas: ". . . ." ". . . tr_c" "bl_c blr_c . br_c"; */
  grid-template-areas: ". . . tr_c" ". . . ." "bl_c blr_c . br_c";

  margin-bottom: -100%;

  overflow: overlay;
  /* min-height: 375px; */
}

.bl_c {
  grid-area: bl_c;
  align-self: end;

  overflow: overlay;
}

.blr_c {
  grid-area: blr_c;
  align-self: end;

  overflow: overlay;
}

.tr_c {
  grid-area: tr_c;
  justify-self: end;

  /* overflow: overlay; */
}

.tl_c {
    width: max-content;
    grid-auto-flow:
    column; height:
    min-content;
    display: grid;
    grid-gap: 5px;
    margin: 5px;
}

.br_c {
  grid-area: br_c;
  justify-self: end;
  align-self: end;

  overflow: overlay;
}

info {
    background-color: #0181ff25;
    font-size: 14px;
    text-align: left;
    padding: 5px;

    border: 2px transparent;
    border-radius: 4px;
    border-left: solid 5px #0181ff;

    animation-direction: alternate;
    opacity: 0;

    max-width: 100%;

    box-shadow: inset 0px 2px 10px #00000025;
}
info + info {
    margin-top: 5px;
}
.info {
    text-align: center;
    color: #0181ff;

    /* width: 300px; */
    width: 100%;
    display: grid;
}

.button {
    background-color: #00000035;
    border: none;
    color: white;
    padding: 5px 10px;
    text-align: center;
    display: inline-block;

    border-radius: 4px;

    box-shadow: inset 2px 2px 10px #00000025;
}
.button + .button {
    margin-left: 5px;
    margin-top: 5px;
}
.button:hover, .button:focus {
    box-shadow: inset 0px 0px 50px #00000050;
    text-shadow: 0px 2px 5px white;
}
.button:active {
    box-shadow: inset 0px 0px 50px #00000080;
}

@keyframes fadeInOut {
    0% { opacity: 0; display: none; }
    25% { opacity: 1; display: block; }
    50% { opacity: 1; display: block; }
    75% { opacity: 0; display: none; }
    100% { opacity: 0; display: none; }
}

::-webkit-scrollbar { width: 6px; height: 6px; }
/* Track */
::-webkit-scrollbar-track { background: #00000010; }
/* Handle */
::-webkit-scrollbar-thumb { background: #00000026; }
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #00000056; }

.default_colors {
    border: 2px solid #00000010;
    background-color: #0d4c7d;
}
.default_colors_nb {
    background-color: #0d4c7d;
}
.bronze {
    border: 2px solid #00000010;
    background-color: #cd7f32;
}
.silver {
    border: 2px solid #00000010;
    background-color: #c0c0c0;
}
.gold {
    border: 2px solid #00000010;
    background-color: #d8c250;
}

w { font-weight: 500;}
d { text-decoration: dotted underline; }
d:hover { filter: brightness(1.25); }
a { text-decoration: none; color: gray; }
a:hover { text-decoration: none; color: #256dd1bb; }
a:active { text-decoration: none; color: #256dd1aa; }
a:visited { text-decoration: none; color: #256dd1; }
hr { border-style: ridge; }

* { font-family: 'Rubik', sans-serif; user-select: none; }
div { transition: width 1.25s ease-out; }
html { width: 100%; height: 100%; }
body {
    background-color: #161d2d;
    box-shadow: inset 0px 0px 100px #00000045;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* TESTING AREA */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 15vh; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
    margin: auto;
    padding: 20px;
    width: 60%;

    border: 2px solid #00000010;
    border-radius: 4px;
    background-color: white;/*#0d4c7d*/
    color: black;

    max-height: 60vh;
    overflow-y: scroll;
}
.close {
    color: #ddd;
    float: right;
    /* font-size: 28px; */
    font-size: 2.25vw;
    font-weight: bold;

    line-height: 100%;
    padding: 0px 0.5vw 0px 0.5vw;
    border: dashed 2px #ddd;

    right: 20%;
    position: fixed;
    background-color: white;
}
.close:hover,
.close:focus {
    color: red;
    text-decoration: none;
    cursor: pointer;

    border-color: #fdd;
}

.earlyaccess {
    padding: 4px;
    border: 2px solid #3cc153;
    border-left: 5px solid #3cc153;
    border-radius: 2px;
    background-color: #3cc15356;
    font-size: 12px;

    color: #0d701c;
}
.version {
    padding: 4px;
    border: 2px solid #256dd1;
    border-left: 5px solid #256dd1;
    border-radius: 2px;
    background-color: #256dd156;
    font-size: 12px;

    /* color: #70111e; */
    color: #0f366d;
}
.warnversion {
    padding: 4px;
    border: 2px solid #d6353a;
    border-left: 5px solid #d6353a;
    border-radius: 2px;
    background-color: #d6353a56;
    font-size: 12px;

    /* color: #70111e; */
    color: #6b0b0e;
}
.earlyaccess:hover, .version:hover, .warnversion:hover {
    box-shadow: inset 0px 0px 1px 50px #ffffff56;
}

/* Changelog Use Only */
.changed {
    border-radius: 2px;
    font-size: 11px;

    padding: 3px;
    margin-right: 4px;

    display: inline;

    box-shadow: 1px 1px 1px -1px #00000050;
}
.changed:hover {
    box-shadow: inset 0px 0px 1px 10px #ffffff76;
}
.new {
    border: 1px solid #edc24296;
    background-color: #edc24256;
    color: #755a0c;
}
.fixed {
    border: 1px solid #3cc15396;
    background-color: #3cc15356;
    color: #0d701c;
}
.updated {
    border: 1px solid #256dd196;
    background-color: #256dd156;
    color: #0f366d;
}
.bug {
    border: 1px solid #d6353a96;
    background-color: #d6353a56;
    color: #6b0b0e;
}

/* Modal Misc */
li {
    margin: 5px;
}
.linkbutton {
    font-size: 16px;

    padding: 2.5px 5px;
    text-align: center;
    display: inline-block;

    border-radius: 2px;
}
.green {
    background-color: #3cc15356;
    border: 2px dashed #3cc153;
    color: #0d701c;
}
.red {
    background-color: #d6353a56;
    border: 2px dashed #d6353a;
    color: #6b0b0e;
}
.linkbutton:hover { box-shadow: inset 0px 0px 1px 50px #ffffff76; }
.linkbutton.green { color: #0d701c; }
.linkbutton.red { color: #6b0b0e; }

.code {
    font-size: 11px;
    color: black;
    background-color: #f1f1f1;

    border: 1px solid lightgray;
    border-radius: 2px;
    padding: 3px;
    margin: 2px 0px 2px 0px;
    white-space: pre-wrap;

    box-shadow: 1px 1px 1px -1px #00000050;
}
.code:hover { border-color: #2f2f2f; background-color: #313131; color: white; }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-content {
    display: none;
    position: absolute;

    border: 2px solid #00000010;
    border-radius: 4px;
    background-color: #0A3C63;

    min-width: 50%;
    overflow: auto;
    z-index: 1;

    margin-top: 30px;
    margin-left: 5px;
}
.dropdown-content a {
    color: white;
    font-size: 12px;

    padding: 5px 10px;
    text-decoration: none;
    display: block;
}
.dropdown a:hover { box-shadow: inset 0px 0px 50px #00000050; }
.show { display: block; }