html {
    background-color: black;
    color: white;
}

.container {
    display: none;
    grid-template-areas: "nightlord stonesword-keys day-info"
                         "shifting-earth mage-towers day-info";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 97vh;
    padding: 5px;
}

b {
    align-self: center;
    justify-self: center;
}

b u {
    font-size: 2em;
}

.section {
    border: 1px solid rgb(30, 30, 30);
    margin: 1px;
}

/*************************
Nightlord selection modal
*************************/
div.nightlord-modal-content h1 {
    text-align: center;
}

.modal {
    position: fixed;
    z-index: 9998;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.nightlord-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid white;
    background: rgb(25, 25, 25);
    padding: 20px;
    border-radius: 8px;
    width: 75%;
    height: auto;
}

.nightlord-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1%;
}

.nightlord-grid img {
    width: 100%;
    height: auto;
    margin-top: 10%;
    object-fit: contain;
    cursor: pointer;
}

/*************************
Nightlord details section
*************************/
.nightlord-area {
    display: grid;
    grid-area: nightlord;
    align-content: center;
    justify-content: center;
    padding: 5px;
}

.nightlord {
    position: relative;
    width: 100%;
    z-index: 9999;
}

.nightlord-img {
    display: grid;
    cursor: pointer;
    margin: auto;
    margin-bottom: 10px;
}

.nightlord-weakness-icon {
    display: grid;
    position: absolute;
    bottom: 5px;
    right: -45px;
    width: 30px;
    height: 30px;
    pointer-events: none;
}

.nightlord-details-container {
    display: grid;
    justify-items: center;
    grid-gap: 0.5vh;
}

.nightlord-details-container img {
    width: 40px;
    height: 40px;
}

.type-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}

.row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.row-1 {
    grid-template-columns: repeat(1, 1fr);
    font-size: 0.75em;
}

.type-cell {
    display: grid;
    align-items: center;
    padding: 3px;
    border: 1px solid rgb(30, 30, 30);
    font-size: 0.9em;
}

.positive {
    font-weight: bold;
    color: green;
}

.middle {
    color: orange;
}

.negative {
    color: red;
}

/*************************
Day Info section
*************************/
.day-info {
    display: grid;
    grid-area: day-info;
    align-content: center;
    justify-content: center;
    padding: 5px;
}

/*************************
Stonesword Keys section
*************************/
.stonesword-keys {
    display: grid;
    grid-area: stonesword-keys;
    align-content: center;
    justify-content: center;
    padding: 5px;
}

/*************************
Mage Towers section
*************************/
.mage-towers {
    display: grid;
    grid-area: mage-towers;
    grid-template-columns: auto 0.75fr;
    gap: 25px;
    align-content: center;
    justify-content: center;
    padding: 5px;
}

/*************************
Shifting Earth section
*************************/
.shifting-earth {
    display: grid;
    grid-area: shifting-earth;
    align-content: center;
    justify-content: center;
    padding: 5px;
}

.shifting-earth-tabs {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin: 8px 0;
    width: 100%;
}

.tab {
    margin: 8px;
    padding: 8px;
    cursor: pointer;
}

.tab-active {
    border-bottom: 1px solid white;
}

.tabs-page {
    display: none;
}

.shifting-earth-content {
    min-width: 450px;
    min-height: 125px;
}