/* I want to keep the appearance choices separate from the general design,
   to make later modification easier. */

:root {
    /* We'll start with colors. */
    --dark-color-1: #004040;
    --dark-color-2: #004040;
    --medium-color-1: #407f40;
    --medium-color-2: #007fbf;
    --light-color-1: #7fbfbf;
    --light-color-2: #bfbfbf;

    /* These are for customizing the theme without going through the list. */

    /* First, color associations for proper contrast. */
    --page-background: var(--dark-color-1);
    --page-foreground: var(--light-color-2);
    --navbar-back: var(--dark-color-1);
    --navbar-front: var(--light-color-1);
    --navbar-border: var(--light-color-2);
    --navbar-hover-back: var(--light-color-2);
    --navbar-hover-front: var(--dark-color-1);
    --bookmark-list-back: var(--medium-color-1);
    --bookmark-list-front: var(--dark-color-2);
    --bookmark-button-back: var(--dark-color-1);
    --bookmark-button-front: var(--light-color-1);
    --bookmark-button-hover-back: var(--light-color-2);
    --bookmark-button-hover-front: var(--dark-color-1);
    --main-section-background: var(--medium-color-2);
    --main-section-foreground: var(--light-color-2);
    --heading-1: var(--light-color-1);
    --heading-2: var(--light-color-2);
    --heading-3: var(--light-color-2);

    /* Now, some global values. */
    --border-radius: 0.3em;
    --margin: 0.3em;
    --padding: 0.3em;
    --section-margin: 5em;
    --section-padding: 2.5em
}

body {
    color: var(--page-foreground);
    background-color: var(--page-background);
    font-family: Sans-Serif;
}


section.bookmark-list {
    background-color: var(--bookmark-list-back);
    color: var(--bookmark-list-front);
    border-radius: var(--border-radius);
    /* We want multiple evenly-spaced rows of 6 buttons by default. */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* This is separate to ensure the lists are centered on the page. */
    margin: 0 auto;
    width: 63%;
}

nav {
    align-items: stretch;
    background-color: var(--navbar-back);
    color: var(--navbar-front);
    border: 0.1em solid var(--navbar-border);
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    justify-content: space-evenly;
    left: 5%;
    position: fixed;
    top: 0px;
    width: 90%;
    border-radius: var(--border-radius);
}

a.navbar {
    color: var(--navbar-front);
    border-radius: var(--border-radius);
    margin: var(--margin);
    padding: var(--padding);
    text-align: center;
    /* These should be buttons, not linked text. */
    text-decoration: none;
}

a.navbar:hover {
    background-color: var(--navbar-hover-back);
    color: var(--navbar-hover-front);
    transition: 0.25s;
}

section.main {
    min-height: 150vh;
    /* Leave some room for the navbar! */
    padding-top: 5em;
    background-color: var(--main-section-background);
    color: var(--main-section-foreground);
    margin: var(--section-margin);
    padding: var(--section-padding);
    border-radius: var(--border-radius);
}

section.search {
    background-color: var(--bookmark-list-back);
    color: var(--bookmark-list-front);
    margin: 0 auto;
    width: 60%;
    height: 2em;
    border-radius: var(--border-radius);
    text-align: center;    
}

input:focus, input:hover {
    background-color: var(--navbar-hover-back);
    color: var(--navbar-hover-front);
    transition: 0.25s;
}

input {
    background-color: var(--bookmark-list-back);
    color: var(--bookmark-list-front);   
    border: 0em solid var(--navbar-border);
    width: 100%;
    height: 2.3em;
    border-radius: var(--border-radius);
}

a.bookmark {
    /* We want buttons centered horizontally and vertically. */
    text-align: center;
    align-content: center;
    /* I want the buttons to have a uniform size, and the contents to word wrap
       within them.. */
    display: block;
    width: 10em;
    box-sizing: border-box;
    /* Let's get the coloring dealt with. */
    color: var(--bookmark-button-front);
    background-color: var(--bookmark-button-back);
    border-radius: var(--border-radius);
    height: auto;
    margin: var(--margin);
    padding: var(--padding);
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: normal;
}

a.bookmark:hover {
    background-color: var(--bookmark-button-hover-back);
    color: var(--bookmark-button-hover-front);
    text-decoration: none;
    transition: 0.25s;
}

h1 {
    text-align: center;
    color: var(--heading-1);
}

h2 {
    text-align: center;
    color: var(--heading-2);
}

h3 {
    text-align: center;
    color: var(--heading-3);
}

hr {
    color: var(--light-color-2);
}

@media (max-width: 1800px) {
    section.bookmark-list {
        grid-template-columns: repeat(5, 1fr);
    }

    nav {
        grid-template-columns: repeat(10, 1fr);
    }

    section.main {
        padding-top: 40px;
    }
}

@media (max-width: 1600px) {
    section.bookmark-list {
        grid-template-columns: repeat(4, 1fr);
    }

    nav {
        grid-template-columns: repeat(6, 1fr);
    }

    section.main {
        padding-top: 80px;
    }
}

@media (max-width: 1320px) {
    section.bookmark-list {
        grid-template-columns: repeat(3, 1fr);
    }

    nav {
        grid-template-columns: repeat(5, 1fr);
    }

    section.main {
        padding-top: 80px;
    }
}

@media (max-width: 1060px) {
    section.bookmark-list {
        grid-template-columns: repeat(2, 1fr);
    }

    nav {
        grid-template-columns: repeat(5, 1fr);
    }

    section.main {
        padding-top: 80px;
    }
}

@media (max-width: 800px) {
    body {
        font-size: 2vh;
    }

    nav {
        grid-template-columns: repeat(4, 1fr);
    }

    a.navbar {
        font-size: 2vh;
    }

    section.main {
        padding-top: 120px;
    }


    section.bookmark-list {
        grid-template-columns: 1fr;
    }

    a.bookmark {
        width: 95%
    }

}