/* - - - Universal - - - */

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

/* - - - Variables - - - */

:root {
    /* background and text colours for header, main, footer, and links */
    --background-color-body: linear-gradient(to bottom right, #F2F6F2, #E8F0E8);
    --background-color-header: linear-gradient(to bottom right, #B8C8B8, #C7D8C7);
    --background-color-footer: linear-gradient(to top right, #B8C8B8, #C7D8C7);

    --text-color-body: #556756;
    --text-color-header: #374235;
    --text-color-footer: #374235;

    --link-color-body: #7A8F7B;
    --link-color-header: #64835f;

    /* font family for body */
    --text-font-family-body: Garamond, Baskerville, "Times New Roman", serif;;
}

/* - - - Body - - - */

/* body managed by grid; three rows, one column */
body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr 80px;
    grid-template-areas:
    "global-header"
    "main"
    "global-footer";
    height: 100vh;

    background: var(--background-color-body);
    color: var(--text-color-body);
    font-family: var(--text-font-family-body);
}

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

ul {
    list-style: none;
}

h1 {
    padding: 0;
}

/* so images never extend horizontally outside their parent containers */
img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

/* - - - Main - - - */

main {
    grid-area: main;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* center main on each visitable page */
#main-index,
#main-login,
#main-register,
#main-profile {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    text-align: center;
    max-width: 80%;
}

#index-main-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

#profile-current-user-date p,
#profile-form-update-instructions p {
    margin: .5rem;
}

/* tiny bit of styling for buttons */
button {
    padding: .1em;
    margin: .5rem;
}

/* - - - Header - - */

#global-header {
    background: var(--background-color-header);
    color: var(--text-color-header);
    grid-area: global-header;
}

#global-header a {
    color: var(--link-color-header);
}

/* header divided into three grid columns */
#header-global-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "header-global-grid-col-one header-global-grid-col-two header-global-grid-col-three";
}

/* each grid column is further managed via flex */
#header-global-grid-col-one,
#header-global-grid-col-two,
#header-global-grid-col-three {
    display: flex;
}

#header-global-grid-col-one {
    grid-area: header-global-grid-col-one;
    justify-content: start;
    align-items: center;
}

#header-global-grid-col-two {
    grid-area: header-global-grid-col-two;
    justify-content: center;
}

#header-global-grid-col-three {
    grid-area: header-global-grid-col-three;
    justify-content: end;
}

#header-nav {
    display: flex;
    align-items: center;
    width: 100%;
}

#header-navigation-ul {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
}

#img-logo {
    padding-left: 1rem;
    height: 50px;
    width: auto;
}

/*  - - - Footer - - - */

#global-footer {
    background: var(--background-color-footer);
    color: var(--text-color-footer);
    grid-area: global-footer;
}

/* footer also managed via grid (though there's only one column in this case) */
#footer-global-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

/* column managed with flex */
#footer-global-grid-col-one {
    display: flex;
    justify-content: center;
    padding: 2rem;
}