body {
    background-color: #111;
    color: white;
    font-family: "Montserrat", sans-serif;
    margin: 0;
}
body * {
    font-family: "Montserrat", sans-serif;
}
/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(14, 14, 14); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #303030; 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #1c1c1c; 
  }
#caseinfo {
    display: block;
    margin-left: 3%;
    margin-top: 3%;
}
#casename {
    margin-bottom: 0;
}
#casedescription {
    margin-top: 2px;
}
#caseopenbutton {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
}
#cataloguebutton {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
    cursor: pointer;
}
.item {
    margin-left: 0.5em;
    position: relative;
    height: 22em;
    width: 16em;
    background-color: rgb(36, 36, 36);
}
.item * {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
#catalogue .imgBox {
    position: relative;
    top: 0.5em;
    background-color: #111;
    margin-top: 0.5em;
    width: 14em;
    height: 10em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
}
.imgBox {
    position: relative;
    top: 0.2em;
    background-color: #111;
    margin-top: 0.2em;
    width: 15em;
    height: 10em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
}
.imgBox img { 
    margin-bottom: 0;
    max-height: 100px;
    width: auto;
    position: absolute;
    top: 50%;
    left: 47%;
    transform: translate(-50%, -50%);
} 
.item h3 {
    margin-top: 0;
    margin-bottom: 0.3em;
}
.item p {
    color: #111;
    background-color: #fff;
    margin-right: 0.5em;
    margin-bottom: 0.2em;
    margin-top: 0.1em;
}
.removeItem {
    color: red;
    position: absolute;
    right: 0em;
    margin-top: 0.2em;
    z-index: 10;
    cursor: pointer;
}
#catalogue {
    background-color: rgb(22, 22, 22);
    position: absolute;
    width: 90%;
    height: 95%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;  
    box-shadow: 15px 15px 15px 15px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    overflow: auto;
}
#itemgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px; 
}
.item .addItemButton {
    position: absolute;
    bottom: 0.5em;
    font-family: "Montserrat Bold", sans-serif;
    font-size: large;
    width: 12.3em;
    padding: 0; 
    border-color: #4CAF50;
    border: 5px solid;
    color: #4CAF50;
    background-color: rgb(36, 36, 36);
    transition-duration: 0.4s;
    cursor: pointer;
}
.item .addItemButton:hover {
    color: #fff;
    background-color: #4CAF50;
    border-color: #4CAF50;
}
.closeCatalogue {
    position: absolute;
    top: -8px;
    right: 0.2em;
    cursor: pointer;
    z-index: 4;
}
#catalogue * {
    margin-left: 0.5em;
    margin-right: 0.5em;
}
.catalogueHeader {
    position: sticky;
    top: -2px;
    padding-top: 1em;
    height: 5%;
    background-color: rgb(22, 22, 22);
    width: 99%;
    z-index: 3;
}
#search {
    border: 0;
    padding: 10px 25px;
    margin-left: 0.5em;
}
#casegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
    grid-column-gap: 0px;
    grid-row-gap: 10px; 
}
#settingsbutton {
    position: absolute;
    font-size: 4em;
    top: -1em;
    right: 0.3em;
    cursor: pointer;
}
#settings {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 50%;
    background-color: rgb(22, 22, 22);
    box-shadow: 15px 15px 15px 15px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.closeSettings {
    position: absolute;
    top: -8px;
    right: 0.6em;
    cursor: pointer;
}
#settings h1 {
    margin-left: 0.5em;
    margin-top: 0.2 em;
}
#houseEdge {
    border: 0;
    padding: 10px 25px;
}
.settingsdiv {
    text-align: center;
    position: absolute;
    left:  50%;
    transform: translate(-50%);
}
header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    color: rgb(49, 49, 49);
}
#sharecase {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
    cursor: pointer;
}
#sharecase:hover {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: rgb(224, 224, 224);
    color: #111;
    cursor: pointer;
}
#cataloguebutton:hover {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: rgb(224, 224, 224);
    color: #111;
    cursor: pointer;
}
#error {
    color: rgb(255, 59, 48);
}
#catalogue select {
    border: 0;
    padding: 10px 25px;
    margin-left: 0.5em;
}
#settings button {
    margin-top: 0.3em;
    margin-bottom: 0.5em;
    border: none;
    padding: 10px 1.92em;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
    cursor: pointer;
}
#totalOdds {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
}
select {
    border: 0;
    padding: 10px 25px;
    width: 15.4em;
}
#vinebutton {
    margin-top: 3em;
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
}
#recalcOdds {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
    cursor: pointer;
}
#recalcOdds:hover {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: rgb(224, 224, 224);
    color: #111;
    cursor: pointer;
}
#recalcOdds2 {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: #fff;
    color: #111;
    cursor: pointer;
}
#recalcOdds2:hover {
    border: none;
    padding: 10px 25px;
    font-family: "Montserrat Medium", sans-serif;
    background-color: rgb(224, 224, 224);
    color: #111;
    cursor: pointer;
}
.allthebuttons * {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
.allthebuttons button {
    min-width: 15.4em;
}