/** Definitions ******************************************************************************/

:root {
    /* colors */

    --h-color: ivory;
    --body-color: ivory;
    --a-color: firebrick;
    --bg-color-1: black;
    --bg-color-2: grey;
    
    /* sizes */
    --header-height: 800px;
    --min-site-width: 650px;
    --max-site-width: 1200px;
    
    /* fonts */
    --header-font: cinzel;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./assets/Montserrat-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Cinzel';
    src: url('./assets/Cinzel-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Garamond';
    src: url('./assets/EBGaramond-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Julius';
    src: url('./assets/JuliusSansOne-Regular.ttf');
}

@font-face {
    font-family: 'Roboto';
    src: url('./assets/Roboto-VariableFont_wdth,wght.ttf');
}


/** default/general styles *********************************************************************/

* {
    box-sizing: border-box;
}

body {
    color: var(--body-color);
    background: var(--bg-color-1);
    font-family: verdana, sans-serif;
    font-size: 16px;
    margin: 0;
}

header, main, footer {
    min-width: var(--min-site-width);
	max-width: var(--max-site-width);
}

section, footer {
   /* border-radius: 37px; */
   border: none;
   background-color: var(--bg-color-1);
}

hr {
    color: var(--body-color);
}

h1, h2, h3, h4, h5 {
    color: var(--h-color);
    /*font-weight: 500;*/
}

h1 {
	font-size: 3.33em;
}

h2 {
    font-size: 1.6em;
    /*font-weight: 550;*/
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: .85em;
    /*font-weight: normal;*/
}

ul {
    padding: 0;
}
li {
    margin: auto 0;
    vertical-align: middle;
}

a:link, a:visited {
    /*font-weight: 550;*/
    text-decoration: none;
    color: var(--body-color);
    text-transform: capitalize;
}

a:hover {
    text-decoration: none;
    /*font-weight: bold;*/
    color: var(--a-color);
}

a:active {
    /*font-weight: bold;*/
    text-decoration: none;
}

p {
    text-indent: 0;
}

ul.horizontal {
    display: flex;
    align-items: center;
}

ul.horizontal li {
    display: flex;
    align-items: center;
    text-align:center;
}

ul.no-bullet {
    list-style-type: none;
}

.heading-section { /* style for h tags */
    text-align: center;
    /*font-family: var(--header-font);*/
}

div.fake-content {
    min-height: 300px;
    min-width: 300px;
}

/* header *************************************************************************************/

header {
	position: fixed;
    display: flex;
	flex-direction: column;
	align-items: stretch;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 0;
    width: 100vw;
}

/* Nav style ***************************/
    
    #nav-header {
        position: fixed;
        left: 0%;
        /*transform: translate(-50%, 0%); /* this shifts element left half its own dimensions to center */
        z-index:1;
    }

        #nav-header ul {
            background: var(--bg-color-1);
            margin: 10px;
        }

        #nav-header li {
            padding: 5px 10px;
            margin: 0;
        }

        #nav-header li:hover {
            background: silver;
        }

        #nav-header li:hover a {
            color: var(--a-color);
        }
    
/* end of Nav style **************************/
    
    #div-header-image {
        max-height: 800px;
    }

        #div-header-image img {
            position: relative;
            left: 50%;
            transform: translate(-50%,0);
            max-height: var(--header-height);
        }

    #div-header-title-top {
        position: absolute;
        top: 5%;
        right: 5%;
    }
        #h1-title-line-1 {
            text-align: left;
        }

    #div-header-title-bottom {
        position: absolute;
        right: 5%;
        top: 15%;
    }
    
        #h2-title-line-2 {
            text-align: right;
            font-size: 2em;
        }

.title-line { /* style for h tags */
    padding: 0;
    margin: 10px;
    font-family: var(--header-font) ; /*'Royal Acid';*/
    font-weight: 600;
}

/* end of Header *********************************************************************/

#div-spacer-header {
    position: relative;
    width:100%;
    height: var(--header-height);
    z-index: -1;
}

#div-scrolling-content {
    display: grid;
    /* place-items: stretch; */
    max-width: var(--max-site-width);
    width: 100%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);

}

/* main *******************************************************************************/

main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    z-index: 1;
}
        
    #section-news {
    
    }
    
    /* shows *********************************/
    
    /** TODO: fix show detail layout when at minimum site width **/

    #section-shows {
        max-height: 800px;
        overflow: auto;
    }
    
        #div-shows {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            gap: 10px;
            min-height: 150px;
            padding-bottom: 37px;
        }
        
        .hr-show {
            width: 75%;
        }
    
            div.show-container {
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;
                gap: 10px;
                width: 100%;
                /*max-width: 67%; 950px;*/
                align-items: center;
                min-height: 50px;
            }
            
                div.show-date {
                    flex: 3 0 100px;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    /*padding-left: 40px;*/
                    /*max-width: 300px;*/
                    align-self: center;
                }
                
                    div.show-date h3 {
                        margin: 0;
                        text-align: right;
                    }
                    
                    div.show-date h4 {
                        margin: 0;
                        text-align: right;
                    }
                
                div.show-right {
                    display: flex;
                }
                
                div.show-band-location {
                    flex: 4 0 167px;
                    /*max-width: 400px;*/
                }
                
                    div.show-band-location h3, div.show-band-location h2 {
                        margin: 0;
                        text-align: center;
                    }
                    
                    div.show-band-location h4, div.show-band-location h5 {
                        margin: 3px 0;
                        text-align: center;
                        font-weight: normal;
                    }
                
                div.show-details {
                    flex: 3 0 167px;
                    text-align: left;
                    align-self: center;
                    /*max-width: 300px;*/
                }
                
                    p.show-details {
                        margin: 0;
                    }
                    
                    p.show-details-bands {
                        margin: 0;
                        text-indent: 37px;
                    }
    
    /* end of shows **************************/

    #section-recordings {

    }

    #section-social-media {

    }
           
        #div-social-media-links {
            display: flex;
            justify-content: center;
        }
        
        #ul-social-media-links {
            flex: 2 0 300px;
            align-self: center;
            display: flex;
            justify-content: space-evenly;
            height: fit-content;
            max-width: 800px;
        }

        #ul-social-media-links li {
            outline: red 1px solid;
            height: fit-content;
        }
        
            img.social-media-logos {
                height: 100px;
                width: 100px;
                display: inline-block;
            }

/* end of main **********************************************************************************/

footer {
    display: flex;
    flex-direction: column;
    min-width: var(--min-site-width);
    z-index: 1;
    padding: 20px 0;
    min-height: 300px;
    justify-content: flex-end;
}

    #div-copyright {
        text-align: center;
    }
    
        p.copyright {
            
        }


/* media queries *********************************************************************************/
@media (min-resolution: 2dppx) {
    body {
        font-size: 30px;
    }
    :root {
        --max-site-width: 1400px;
    }
    #div-header-title-bottom {
        /*top: 20%;*/
    }
    div.show-container {
        padding-left: 30px;
        padding-right: 30px;
    }
    #h1-title-line-1 {
        font-size: 2.25em;
    }
    #h2-title-line-2 {
        font-size: 1.4em;
    }
    #nav-header {
        font-size: 1.1em;
    }
}