/* Colours used:
#ecf87f
#81b622
#59981a
3d550c
*/

/* Other colours used:
Text: dad7cd
Table-Background: 344e41
*/


:root {
    --frame-color: #588157;
    --table-background-color: #344e41;
    --table-text-color: #dad7cd;
    --clear-button-color: rgb(255, 42, 42);
    --submit-button-color: rgb(0, 255, 21);
    --link-color: #4cc9f0;
}

a {
    color: var(--link-color);
}

body {
    background-color: var(--frame-color);
    display: flex;
    justify-content: center;
    font-family: sans-serif;
}

.container {
    max-width: 430px;
    min-width: 0;
    flex: 1;
    display: flex;
    background-color: var(--frame-color);   
    flex-direction: column;
    gap: 10px;
}

.head {
    background-color: var(--table-background-color);
    color: var(--table-text-color);
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
}

.header {
    /*display: flex;
    flex-direction: row;*/
}

h1 {
    text-align: center;
    padding: 0;
    margin: 0;
}

p {
    padding: 0;
    margin: .5rem;
}


#dataFields {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

#clearButton,
#submitButon {
    flex-grow: 0;
    flex-shrink: 0;
}

#clearButton {
    background-color: var(--clear-button-color);
}

#submitButton {
    background-color: var(--submit-button-color);
}

#age,
#weight {
    flex-basis: 40px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 2rem;
}

.table {
    background-color: var(--table-background-color);
    color: var(--table-text-color);
    border-radius: 10px;
    padding: 1rem;
}

.tableCell {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

hr {
    border-color: var(--frame-color);
}

.table .drugOrDevice {
    font-weight: bold;
    letter-spacing: .2px;
    font-size: large;
}

.table .dosage {
    font-size: 0.9rem;
}