body {
        background: aliceblue;
}

body.darkmode {
        background: #11001C;
}

h1 {
        text-align: center;
}

h1.darkmode {
        color: white;
        text-shadow:
                -1px -1px 0 black,
                 1px -1px 0 black,
                -1px  1px 0 black,
                 1px  1px 0 black;
}

h3 {
        text-align: center;
}

h3.darkmode {
        color: white;
        text-shadow:
                -1px -1px 0 black,
                 1px -1px 0 black,
                -1px  1px 0 black,
                 1px  1px 0 black;
}

#map-root {
        display: flex;
        justify-content: center;
        gap: 4%;
        padding-inline: 4%;
        flex-wrap: wrap;
}

.biome {
        flex: 0 0 2%;
        background: white;
        box-shadow: 8px 20px 5px rgba(0, 0, 0, 0.15);
        min-width: 90%;
        min-height: 250px;
        position: relative;
        border: 5px solid white;
        border-radius: 5px;
        margin-top: 20px;
}

@media (min-width: 1100px) {
        #map-root {
                flex-wrap: nowrap;
        }

        .biome {
                min-height: 600px;
                min-width: 250px;
                box-shadow: 6px 6px 5px rgba(0, 0, 0, 0.15);
        }
}

.biome-info {
        position: absolute;
        width: 100%;
        overflow: visible;
        color: white;
        font-size: 24px;
        font-weight: bold;
        top: 0px;
}

.biome-info p {
        text-align: center;
}

.biome-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 50% 0%;
}

.outline-text {
        color: white;
        text-shadow:
                -1px -1px 0 black,
                 1px -1px 0 black,
                -1px  1px 0 black,
                 1px  1px 0 black;
}