/* main heading */
h1 {
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: 1000;
    text-align: center;
}

/* new pin, pin list heading */
h2 {
    font-size: 25px;
    margin-bottom: 10px;
    font-weight: 700;
}

/* pin item title */
h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}

/* h4 is used for the pins and left as is */

:root {
    /* disable zooming on mobile */
    /* this is confusing with the map */
    touch-action: pan-x pan-y;
    height: 100%;

    /* Who likes serifs on the web anyways? */
    font-family: sans-serif;
}

/* constrain the app to the center of the screen on big monitors */
#container {
    max-width: 1200px;
    margin: 0 auto;
    /* some breathing space */
    padding-top: 15px;
}

#map {
    /* the leaflet map needs a specified height to work */
    height: 70vh;
    /* placing pins like this is more fun */
    cursor: crosshair;
}

#map * {
    /* by default the pins change the cursor to a hand */
    cursor: crosshair;
}

/* the title of the placed pins on the map */
.pin-title {
    background-color: white;
    border-radius: 3px;
    /* center the title under the pin */
    /* the icon has a width of 25px */
    margin-left: calc(-50% + 25px);
    padding: 0 5px;

    width: max-content;
    height: max-content;
}

/* contains the new pin section and pin list */
#control-container {
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 15px 0;
}

/* on phone mobile screens we want the new pin and pin list to be side by side */
@media only screen and (max-width: 800px) {
    #control-container {
        flex-direction: column;
        align-items: center;
    }

    #control-container>div {
        /* stretch everything to fill the space available */
        width: 90%;
    }
}

/* where the user punches in a new pin location */
#temp-user-input {
    border: 1px solid grey;
    border-radius: 3px;
    padding: 10px;
    /* don't let it stretch as far down as possible */
    height: fit-content;
}

/* the grid for coordinate, title, description input */
#coordinate-input {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: [col1-start] auto [col2-start] 100px [col3-start] 100px [col3-end];
    grid-template-rows: [row1-start] auto [row2-start] auto [row3-start] auto [row4-start] auto [row5-start] auto [row6-start] auto [row6-end];
}

#title-label {
    grid-column: col1-start;
    grid-row: row1-start;
}

#title {
    grid-column: col2-start / col3-end;
    grid-row: row1-start;
}

#overworld-label {
    grid-column: col1-start;
    grid-row: row2-start;
}

#overworld-x {
    grid-column: col2-start;
    grid-row: row2-start;
}

#overworld-z {
    grid-column: col3-start;
    grid-row: row2-start;
}

#nether-label {
    grid-column: col1-start;
    grid-row: row3-start;
}

#nether-x {
    grid-column: col2-start;
    grid-row: row3-start;
}

#nether-z {
    grid-column: col3-start;
    grid-row: row3-start;
}

#height-label {
    grid-column: col1-start;
    grid-row: row4-start;
}

#height {
    grid-column: col2-start / col3-end;
    grid-row: row4-start;
}

#description-label {
    grid-column: col1-start;
    grid-row: row5-start;
}

#description {
    grid-column: col2-start / col3-end;
    grid-row: row5-start;
}

/* the buttons in the temp pin input */
#temp-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

#pin-list-container {
    border: 1px solid grey;
    border-radius: 3px;
    padding: 10px;
    height: fit-content;
}

/* the scroll container for the pins */
#pin-list {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding-right: 20px;
    /* limit the height to force scrolling */
    height: 50vh;
    overflow: scroll;
}

.pin-item {
    border: 2px solid black;
    border-radius: 3px;
    background-color: lightgrey;
    padding: 5px;

    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

/* the content of the pin without the buttons */
.pin-content {
    display: flex;
    flex-direction: column;
}

/* a grid for the coordinates of the pin */
.pin-item .pin-coordinates {
    display: inline-grid;
    gap: 5px 10px;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
}

/* the button group for the pin */
.pin-buttons {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

/* buttons for all pins */
.pin-list-buttons-container {
    margin-top: 30px;

    display: flex;
    gap: 5px;
}

#footer {
    text-align: center;
    margin-bottom: 10px;
}