body {
    background-color: powderblue;
    font-family: "Comic Sans MS", "Comic Sans", sans-serif;
    text-align: center;
}

summary {
    position: sticky;
    top: 0;
    background-color: lightblue;
    z-index: 1;
    cursor: pointer;
    height: 53px;
    /* i am discontent with this solution */
}

details>details>summary {
    top: 53px;
    height: revert;
    z-index: 0;
}

summary>h1,
summary>h2,
summary>h3,
summary>h4,
summary>h5,
summary>h6 {
    display: inline-block;
    margin-bottom: 0px;
}

details>ul {
    margin-bottom: 0px;
}

input[type="file"] {
    background-color: LightSteelBlue;
    max-width: 100%
}

.text-entries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.right-button {
    position: absolute;
    right: 8px;
    top: 8px;
}

@media (max-width: 500px) {
    .right-button {
        position: static;
        text-align: right;
    }
}

.right-button>input[type="number"] {
    width: 40px;
}

.section,
.section-timeline {
    position: relative;
    padding: 3px;
    background-color: lightblue;
    width: 600px;
    max-width: calc(100% - 8px);
    margin: auto;
    margin-bottom: 5px;
}

.section-timeline {
    width: 900px;
    padding-bottom: 19.92px;
    text-align: left;
}

.timeline-buttons-outer {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 100%;
    visibility: hidden;
}

.timeline-buttons {
    position: sticky;
    top: 8px;
    z-index: 2;
    visibility: visible;
}

.selector {
    text-align: left;
    background-color: LightSteelBlue;
    width: 300px;
    margin: auto;
    margin-bottom: 5px;
    max-width: 100%;
}

.selector>p {
    margin-top: 0px;
    margin-bottom: 10px;
}

.dot {
    position: fixed;
    overflow: hidden;
    bottom: 8px;
    left: 8px;
    z-index: -1;
}

.loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.p {
    text-shadow: 1px 1px 0 #000;
    text-decoration: none;
}

.pn {
    font-style: italic;
    text-decoration: underline;
    text-decoration-style: dotted;
}

abbr {
    cursor: help;
}


.terraria-map-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
}

.terraria-map-manager,
.terraria-map-footer {
    min-width: 0;
}

.terraria-map-area {
    position: relative;
}

.terraria-map-buttons {
    position: absolute;
    top: 0px;
    left: 0px;
}

.terraria-map-container {
    overflow: scroll;
    width: calc(100vw - 32px);
    height: calc(100vh - 16px);
}

.terraria-map {
    background-color: black;
    image-rendering: pixelated;
}

.terraria-map-lighting {
    background-color: grey;
}

.terraria-map-tileinfo {
    min-height: 3em;
}


@media (min-width: 900px) {
    .terraria-map-grid {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr 1fr;    
        height: calc(100vh - 16px);
    }

    .terraria-map-manager {
        grid-column: 1;
        grid-row: 1;
    }

    .terraria-map-area {
        grid-column: 2;
        grid-row: 1 / span 2;
        height: calc(100vh - 16px);
        position: sticky;
        top: 0px;
    }

    .terraria-map-footer {
        grid-column: 1;
        grid-row: 2;
    }

    .terraria-map-container {
        width: calc(66vw - 8px);
    }
}


.horz-follow {
    position: sticky;
    left: 8px;
    width: calc(100vw - 16px);
}

.error {
    background-color: salmon;
    margin: 16px;
}

.info {
    background-color: beige;
    margin: 16px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

table tr:nth-child(odd) > *:nth-child(odd):not([colspan]) {
  background-color: LightSteelBlue;
}

table tr:nth-child(even) > *:nth-child(even):not([colspan]) {
  background-color: LightSteelBlue;
}

table tr > th[colspan] {
  background-color: LightSkyBlue;
}