:root {
    --padding: 1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: system-ui, sans-serif;
}

header,
main {
    padding: var(--padding);
}

/* Header/Footer Stationary + Scrollable Content */
body {
    display: flex;
    flex-direction: column;

    /* fallback */
    height: 100vh;
    height: 100dvh;
}

main {
    overflow-y: auto;
    flex: 1;
}

/* TODO: Temp Colour */
footer,
header {
    background-color: cyan;
}

/* Shrink Headers */
h1 {
    font-size: larger;
}

h2 {
    font-size: large;
}

header {
    display: flex;
    flex-direction: row;
}

/* Nav Elements */
footer nav ul {
    display: flex;
    list-style: none;
}

footer nav li {
    flex: 1;
}

footer nav svg {
    height: 32px;
    width: auto;
}

footer nav .label {
    font-size: small;
}

footer nav a {
    text-decoration: none;

    padding: 0.1rem;

    display: flex;
    flex-direction: column;
    align-items: center;
}

footer nav a[aria-current="page"] {
    background-color: orange;
}

/* Train List */
main .train-list {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    list-style: none;

    gap: var(--padding);
}

article[is="train-article"] a {
    color: inherit;
    text-decoration: none;
}

article[is="train-article"] {
    /* Temporary TODO */
    border-width: 1px;
    border-color: black;
    border-style: solid;

    padding: 0.5rem;
/* } */

/* article[is="train-article"] a { */
    display: flex;
    flex-direction: row;
    align-items: center;
}

/*
article[is="train-article"] .train-caught {
    background-color: aquamarine;
} */

article[is="train-article"]:hover {
    background-color: gainsboro;
}

article[is="train-article"] .train-list-content {
    flex: 1;
}

article[is="train-article"] .train-list-image {
    /* TODO: How to make the height of the box anyway */
    height: 100%;
    max-height: 100px;

    width: auto;
    max-width: 150px;
}

/* Search Box & Forms */
main input {
    width: 100%;

    padding: 0.5em;
    font-size: medium;

    border-width: 1px;
    border-color: grey;
    border-style: solid;

    margin-bottom: var(--padding);
}

main .train-details-image {
    max-width: 100%;
}

main .two-cols-button {
    display: flex;
    gap: var(--padding);
}