h1, h2, p, body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
    margin: 0;
}
/* GRID LAYOUT: 2 columns x 2 rows */
.layout {
    display: grid;
    grid-template-columns: minmax(200px, 12%) minmax(0, 1fr);  /* left sidebar, right main */
    grid-template-rows: auto 1fr;      /* top row, bottom row */
    grid-template-areas:
        "sidebar-top  main-top"
        "sidebar-bottom main-bottom";
    column-gap: 8px;
    row-gap: 8px;
    min-height: 100vh;
    padding: 8px;
    box-sizing: border-box;
}
/* TOP LEFT */
.sidebar-top {
    grid-area: sidebar-top;
}
/* BOTTOM LEFT (buttons aligned with table top) */
.sidebar-bottom {
    grid-area: sidebar-bottom;
    align-self: flex-start;   /* align top of this area to row top */
}
.sidebar-bottom .label-title {
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 2;
    background-color: #bdbdbd;
}
.sidebar-bottom .label-value {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    padding-top: 5px;
    line-height: 2;
    background-color: #bdbdbd;
}
/* TOP RIGHT */
.main-top {
    grid-area: main-top;
}
/* BOTTOM RIGHT (table) */
.main-bottom {
    grid-area: main-bottom;
}
/* ROW OF IMAGES / MAP */
.image-row {
    display: flex;
    flex-wrap: wrap;          /* allows the three boxes to wrap on smaller screens */
    gap: 5px;
}
/* Base image/map boxes */
.image-area {
    flex: 1 1 0;          /* all three share space evenly and can shrink */
    min-width: 0;         /* IMPORTANT: allow shrinking smaller than content's intrinsic size */
    height: 50vh;
    border: 2px solid #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #f0f0f0;
}
/* Narrow miniContainer box */
.image-area.narrow {
    flex: 0 0 auto;                       /* don't stretch like the others */
    width: clamp(100px, 15vw, 180px);     /* min 100px, fluid, max 180px */
    min-width: 100px;                     /* safety min */
}
.image-area img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.input-field{
    width: 100%;
    height: 30px;
    margin-bottom: 15px;
    font-size: 19px;
}
.button{
    width: 90%;
    height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
}
.home-button{
    background-color: rgb(224, 224, 224);
    border-radius: 5px;
    box-shadow: 0 2px #5f5f5f;
    color: rgb(0, 0, 0);
    padding: 6px 15px 6px 15px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 19px;
    cursor: pointer;
}
.home-button:active{
    box-shadow: none;
    background-color: rgb(173, 173, 173);
    transform: translateY(4px);
}
@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "sidebar-top"
            "main-top"
            "sidebar-bottom"
            "main-bottom";
    }
}