/* Small screens */
@media (max-width: 600px) {
    header nav {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        align-items:stretch;
    }
}

@media (min-width: 600px) {
    main.sidebar {
        display: grid;
        grid-template-columns: 10em 5fr;
        grid-gap:1em;
        grid-template-areas:
            "adsense    adsense"
            "sidebar    content";
    }

    main.no-sidebar {
        grid-template-areas:
            "adsense adsense"
            "content content";
    }

    #tunes { column-count:2;} 
}

@media (min-width: 800px) {
    #tunes { column-count:3;}  
}  

@media (min-width: 1024px) {
    #tunes { column-count:4;}  
}  

nav {
    background-color:#0074D9;
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
}

/* Small screens */
@media all and (max-width: 600px) {
    nav {
        /* On small screens, we are no longer using row direction but column */
        flex-direction: column;
        align-items:stretch;
    }

    nav #menu_toggle {
        display:block!important;
    }

    nav a {
        display:none!important;
        border-bottom: 1px solid #7fdbff;
    }

    nav #menu_checkbox:checked ~ a {
        display:block!important;
     }
}

nav #menu_checkbox {
    display:none;
}

nav #menu_toggle {
    color:white;
    font-size:2.5em;
    margin-left:1rem;
    display:none;
}

nav #menu_toggle:hover {
    cursor:pointer;
}

nav a {
    color:white;
    padding:10px;
    text-decoration:none;
    white-space:nowrap;
    display:block;
}

nav a:hover {
    background-color:#7fdbff!important;
}

nav img { width:2em; height:2em; }
:root {
    --title: var(--color-blue);
    --nav-bg: var(--color-blue);
    --nav-hover: var(--color-aqua);
    --nav-text: var(--color-white);
    --table_header_bg: var(--color-blue);
    --table_header_text: var(--color-white);
}

.youtube { width:1.25em; height:1.25em; margin:0; padding:0}


.phrase {
    border-right: 3px solid gray;
    padding:0 .25em;
    white-space:nowrap;
}

.phrase:first-child {
    border-left: 3px solid gray;
}

main {
    margin:0 1em;
}

h1,h2 {
    color:var(--title);
}

ul {margin:0; padding:0; }
ul ul { margin-bottom: 1em;}
ul li { list-style-type:none; }
ul li ul li { margin-left:2em;}

ol li {
    margin-bottom:1em;
}

table caption {
    caption-side: top;
    color: var(--color-black);
}

#adsense {
    grid-area: adsense;
}

#content {
    grid-area: content;
}

#sidebar {
    grid-area: sidebar;
}


#tags {
    background-color: var(--nav-bg);
}

#tags a {
    color: var(--nav-text);
    text-decoration:none;
    display:block;
    padding:5px 0 0 5px;
}

#main_nav a:hover, #tags a:hover {
    background-color: var(--nav-hover);
    text-decoration:none;
    color: var(--color-white);
}

#amazon_links {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

#amazon_links a {
    padding:10px;
}