body {
    background-color: #1E1E1E;
    /* background: rgb(2, 1, 28);
    background: linear-gradient(339deg, rgba(2, 1, 28, 1) 0%, rgba(1, 1, 40, 1) 35%, rgba(3, 3, 66, 1) 100%); */
    color: white;
    font-family: Verdana, sans-serif;
    padding: 0;
    margin: 0;
}

.button-icon {
    height: 32px;
    margin-bottom: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

a.button,
button {
    background-color: #009879;
    /* Green */
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    border-radius: 3px;
    transition: background-color 0.5s;
}

a.button:hover,
button:hover {
    background-color: #1bb898;
}

div.left {
    max-width: 1000px;
    display: block;
    text-align: left;
    padding: 20px;
}

div.right {
    max-width: 800px;
    display: block;
    text-align: right;
    padding: 20px;
}

h4 {
    color: #009879;
    font-size: 20px;
}

ul li {
    margin: 8px;
}

a {
    color: 009879;
    text-decoration: none
}

.screenshot {
    max-width: 100%;
    display: block;
    margin-top: 50px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.console {
    font-family: consolas;
    color: #009879;
}

dialog {
    background: #eee;
    padding: 20px;
    text-align: center;
    color: black;
}

dialog h2 {
    color: black !important;
    font-weight: bold;
    font-size: medium;
}

dialog::backdrop {
    background: black;
    opacity: 0.7;
}

select,
input {
    background: #1E1E1E;
    border: none;
    width: 85%;
    height: 40px;
    color: lightgray;
    padding: 8px 10px;
    display: inline-block;
    font-size: 16px;
    margin: 5px 0px;
    border-radius: 5px;
}

select:focus,
input:focus {
    outline: 1px solid darkslategray;
}

#nav {
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid darkslategray;
    overflow: hidden;
    width: 100%;
    margin: 0;
    background-color: #252526;
}

#nav a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 8px;
    text-decoration: none;
    font-size: 17px;
}

#nav a:hover {
    background-color: #ddd;
    color: black;
}

#nav a.active {
    text-decoration: underline;
    color: white;
}

#nav .icon {
    display: none;
    padding: 14px 16px !important;
}

.filters {
    border-radius: 5px;
    background: #2B2B2D;
    /* background: #11114b; */
    display: inline-block;
    padding: 10px;
    margin: 5px;
}

.filters h3 {
    margin-top: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid darkslategray;
    padding-bottom: 10px;
    color: lightgray;
    font-weight: bold;
}

.item-rarity-description {
    display: inline-block;
    background-color: #999;
    border-radius: 2px;
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 10px;
    font-size: 9pt;
}

.mythic {
    background-color: #822423;
}

.legendary {
    background-color: #9B8755;
}

.epic {
    background-color: #6A55A4;
}

.rare {
    background-color: #4D8ABC;
}

.unrevealed {
    background-color: #666;
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 672px) {
    #nav a:not(:first-child) {
        display: none;
    }
    #nav a.icon {
        float: right;
        display: block;
    }
    #nav a.nav-icon {
        display: inline-block;
    }
}

.main_content img {
    max-width: 500px;
    border-radius: 5px;
    margin: 10px;
}


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 672px) {
    #nav {
        text-align: left;
    }
    #nav.responsive {
        position: relative;
    }
    #nav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    #nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    #nav.responsive a.nav-icon {
        float: left;
        display: block;
        text-align: left;
    }
    .main_content .filters img {
        width: 95%;
        display: block;
    }
}

.twitter {
    height: 20px;
}

.discord {
    height: 20px;
}

.nav-me img {
    height: 20px;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 2px 4px 8px 0 rgba(255, 255, 255, 1);
    transition: 0.3s;
    border-radius: 5px;
    background: white;
    color: black;
    width: 200px;
    display: inline-block;
    margin: 10px;
    overflow: hidden;
    font-size: 10pt;
}

.card h4 {
    font-size: 12pt;
}

.card:hover {
    box-shadow: 2px 4px 8px 0 rgba(204, 112, 112, 1);
}

.card img {
    border-radius: 5px 5px 0 0;
    width: 200px;
    height: 200px;
}

.card-body {
    padding: 2px 10px;
    height: 150;
    overflow: hidden;
}

#recentProfits .card {
    /* Add shadows to create the "card" effect */
    width: 150px;
}

#recentProfits .card img {
    width: 150px;
    height: 150px;
    margin: 0;
}

#recentProfits .card-body {
    padding: 5px;
    height: 80px;
}

#recentProfits {
    font-size: 12px;
}

#recentProfits h4 {
    font-size: 15px;
    margin: 0px
}

#recentProfits p {
    margin-top: 5px
}

input[type="checkbox"] {
    position: relative;
    left: 20px;
    height: 22px;
    top: 0px;
    z-index: 0;
    visibility: hidden;
}

input[type="checkbox"]+label {
    position: relative;
    display: block;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.4;
    padding-left: 50px;
    position: relative;
    margin-top: -30px;
}

input[type="checkbox"]+label:before {
    width: 40px;
    height: 20px;
    border-radius: 20px;
    border: 2px solid #2B2B2D;
    background-color: #1E1E1E;
    content: "";
    margin-right: 15px;
    transition: background-color 0.5s linear;
    z-index: 5;
    position: absolute;
    left: 0px;
}

input[type="checkbox"]+label:after {
    width: 19px;
    height: 19px;
    border-radius: 20px;
    background-color: darkslategray;
    content: "";
    transition: margin 0.1s linear;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 10;
}

input[type="checkbox"]:disabled+label,
input[type="checkbox"]:disabled+label:before,
input[type="checkbox"]:disabled+label:after {
    cursor: not-allowed;
    color: gray
}

input[type="checkbox"]:checked+label:before {
    background-color: #009879;
}

input[type="checkbox"]:checked+label:after {
    margin: 0 0 0 20px;
}

.ad {
    border: 1px solid silver;
    color: whitesmoke;
    width: 270px;
    text-align: center;
    border-radius: 3px;
    background-image: linear-gradient(to right, rgba(17, 17, 102, 0.6) 0%, rgba(41, 41, 155, 0.6) 51%, rgba(17, 17, 102, 0.6) 100%);
    transition: 0.5s;
    padding: 5px;
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
    background-size: 200% auto;
}

.ad:hover {
    background-position: right center;
}

.ad img {
    height: 45px;
    margin: auto;
    display: inline-block;
    vertical-align: middle;
}


/* Loading */

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 32px;
    height: 32px;
    margin: 0px;
    border: 4px solid #777;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #777 transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}