html, body {
    margin: 0; /* browsers often add a margin (which can break many layouts) so this is here to remove that margin */
    color: whitesmoke; /* text color for most of the text on the site (you may have to also change the menu text color if you change this) */
}

@media (min-width: 768px) {
    body{
        background-color: #424c55; /* default background color to make the site at least usable in case image doesnt load quickly */
        background-image: url("/assets/images/background3.JPG");
        background-size: cover;
        background-attachment: fixed;
    }
}

/* this is an ugly hackjob solution because apparrently mobile browsers dont support fixed backgrounds (supposedly it hurts performance) https://stackoverflow.com/a/33057806

it also jumps around a bit when hiding/showing browser navigation
*/
@media (max-width: 768px) {
    body:before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        background: url("/assets/images/background2.JPG") no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
}

h1 {
    font-size: 2.3rem;
    margin-top: 0;
    margin-bottom: .5rem;
}
h3 {
    font-size: 1.3em;
}

a {
    color: white;
}

a:hover {
    font-weight: bold;
}


p {
    font-size: 20px;
    /* margin-top: 0; */
    margin-bottom: 1rem;
}

/* set all images on the site to default to no more than 20% of the width of their container unless overridden */
img {
    max-width: 30%; 
}


section.header, section.content {
    width: 95%; /* on mobile devices, the header and page content should take up 95% of the browser width... */
    margin: 0 auto; /* ...and be centered */
}

@media (min-width: 768px) { /* if the browser is wider than 768px... */
    section.header, section.content {
        width: 70%; /* change the header and content to use 70% of the browser width */
    }
}


section.header {
    padding-top: 10px; /* this just adds a tiny bit of extra spacing to the top of the header. can be removed if desired */
}


section.content {
    padding: 10px; /* adds a little spacing around the page content so its not as close to the header. can be removed if desired */
}



/* this applies styles to all of the text in the header that isnt the navigation */
div#header-text {
    min-width: 186px;
    text-align: center;
    padding: 2vw 0;
    
}

div#header-text p#site-subtitle {
    display: none;
}

@media (min-width: 288px){
    div#header-text p#site-subtitle {
        display: block
    }
}


section.header h1 {
    font-family: 'Cinzel', serif;
    font-weight: normal;
}


footer {
    padding: 0 2em;
}









/* Start of Menu Code

this is where the menu is laid out and styled. especially on mobile devices with the collapsible menu.

you should not need to change things in this section

Menu code has been modified under the MIT License. original code was found at:
https://www.cssscript.com/css-flexbox-based-responsive-navigation/
https://www.cssscript.com/demo/css-flexbox-based-responsive-navigation/ */

label { display: inline; }

/* nav {
    margin: 50px auto;
    max-width: 700px;
    width: 95%;
    font-family: 'Roboto Condensed', sans-serif;
} */

#menu-toggle-checkbox, .toggle {
    display: none;
}

.menu {
    padding: 0;
    margin: 0;
    /* max-width: 700px; */
    /* height: 50px; */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
}

.menu li {
    padding: 10px 15px;
    text-align: center
}

.menu li a {
    text-decoration: none;
    align-self: center;
    /* border-radius: 5px; */
    font-size: 1.1em;
    
    /* transition: background .2s linear; */
}


/* menu styles for mobile devices below */

@media screen and (max-width: 600px) {
    .menu li a {
        font-size: 1.25em;
    }
}

@media screen and (max-width: 550px) {
    .toggle {
        clear: both;
        display: block;
        text-align: center;
        /* font-size: 14px; */
        line-height: 40px;
        cursor: pointer;
        width: 100%;
        height: 40px;
        /* font-size: 18px; */
        /* color: #595959; */
        /* background: #dbdbdb; */
        /* border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px; */
        transition: all .1s linear;
    }
    /* .toggle:hover {
        background: #cecece;
    } */
    #menu-toggle-checkbox:checked + label .demo li {
        opacity: 1;
        visibility: visible;
        transition: all .7s linear;
    }

    #menu-toggle-checkbox:checked + label .demo {
        height: 8em;
    }
    .menu {
        /* border-radius: 0px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 0px;
        transition: height .3s linear;
    }
    .menu li {
        display: flex;
        /* magic */
        align-self: center;
        /* width: 95%; */
        opacity: 0;
        visibility: hidden;
    }
    .menu li a {
        /* width: 95%; */
        text-align: center;
        align-self: center;
        align-content: center;
    }
}

/* Style for the currently selected menu item */
.menu li.current {
    font-weight: bold;
    pointer-events: none; /* this disables the ability to click on the menu link because the user is already on that page. */
}


/* End of Menu Code */



/* Here are the styles for the songs  */

.showcasecontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.showcasecontainer > .showcaseitem {
    margin: .5em;
    padding: 0.5em;
    flex-basis: 300px;
    border: 1px solid black;

    /* use flexbox to arrange the items inside each song in a column */
    display: flex;
    flex-direction: column;

}

/* allow the tag marked with .grow inside each song to use the extra space inside the song container. this has the effect of making the paragraph tags fill up any extra hieght in the song box and push the audio players to the bottom */
.showcasecontainer > .showcaseitem .grow {margin-top: auto;}

/* override default link styling  */
div.showcaseitem a {
    text-decoration: none;
}

div.showcaseitem a:hover {
    font-weight: normal;
}

/* make it expand a little when hovered over to visually indicate that it can be clicked on */
div.showcaseitem:hover {
    transform: scale(1.01);
}

/* end link styling */

div.showcaseitem img {
    max-width: 250px;
    max-height: 250px;
}

div.showcaseitem.project img {
    max-width: 400px;
    max-height: 400px;
}

@media (max-width: 576px) {
    div.showcaseitem.project img {
        max-width: 80vw;
    }
}

div.showcaseitem .heading {
    font-size: 1.25em;
    font-weight: bold;
    display: block;
    margin-bottom: .5rem;
}

div.showcaseitem .plyr--audio .plyr__controls {
    margin: 0 auto; /* centers the audio players in their container */

    /* recolors audio players to better match theme */
    background-color: rgba(255,255,255,.25);
    color: inherit;
}

/* styles the divider between songs */
hr.songdivider {
    width: 35%;
    margin-left: 0;
}



/* this code was taken from https://stackoverflow.com/a/47843256 and automatically centers youtube embeds and dynamically sets their size so that it scales with the rest of the page  */
iframe[src*='youtube'] {

    width:90vw;
    height: calc((90vw*9)/16); /* 28.125vw */
    display: block;
    margin: 10px auto;
}

@media (min-width: 768px) {
    iframe[src*='youtube'] {
        width:70vw;
        height: calc((70vw*9)/16);
    }
}

/* Shenanagains to get the theater background on the sentinel video correctly. */
@media (min-width: 768px) {
    iframe[src='https://www.youtube.com/embed/7CM-ZbO_kNs'] {

        width: calc(70vw - 26%);
        height: calc(70vw*.42);
        
    
        padding-top: calc(70vw*.56*.14);
        padding-bottom: calc(70vw*.56*.3339);
        padding-left: calc(26%/2);
        padding-right: calc(26%/2); 

        background-image: url('/assets/images/sentineloftime-theater-edited.JPG');
        background-position:center center;
        background-size: cover;
        background-repeat: no-repeat; 
    }
}



/* blog page */

hr.blogdivider {
    width: 33%
}

/* 
 *
 *
  CONVENIENCE CLASSES
  You can use the stuff below pretty much anywhere. They're just classes to automatically apply common styles
 *
 *
*/



#profilepicture {
    float: left;
    margin: 1em .5em .5em 0;
}


/* this class stacks two elements on top of each other on small devices or places them side by side if there is enough space  */
.sidebyside {
    display: flex;
    flex-direction: column;
    align-items:center;
}

/* this ensures that elements inside a vertical stack dont take up more width than the stack itself */
.sidebyside * {
 max-width: 100%;
}

@media (min-width: 576px) {
    .sidebyside:not(.vertical-only) {
        flex-direction: row;
    }
    .sidebyside * {
        max-width: none;
    }
}

/* if an image is inside of a sidebyside div, limit its width to no more than half of the total width of the div */
.sidebyside > img {
    max-width: 50%;

    object-fit: scale-down; /* this fixes the aspect ratio on firefox */
    flex: 0 0 auto; /* this fixes IE */
}
.sidebyside * {
    padding: 10px; /* add some spacing around paragraphs that are in sidebyside div's so they aren too close to other content */
    min-width: 10%;
    margin: 0 auto; /* if there is extra space around a paragraph, make elements use up the extra with margins to keep it looking aligned*/
}


/* this code styles stack div's that are inside sideyside divs on larger devices */
@media (min-width: 576px) {
    /* .sidebyside > div.stack {
        padding: 10px;
        max-width: calc(50% - 20px);
    } */

    .halfwidth {
        max-width: 50%;
    }
}

/* theres still an annoying underline on the span that is being annoying */
.expandingButton {
    
    height: 50px;
    width: 50px;
    line-height: 1;
    font-size: 25px;
    color: whitesmoke;
    border-radius: 40px;
    border: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor: pointer;
    margin: .25em .5em;
    padding: .75em;
}

.expandingButton > * {
    flex: 1 0 auto;
    margin: 2%;
}

.expandingButton:hover {
    filter: brightness(85%);
}

/* on devices bigger than a phone, show just the icon and add a cool little animation on hover  */
/* @media (min-width: 576px) {
    .expandingButton {
        width: 50px;
        overflow: hidden;
        transition: width 1s ease;
    }

    .expandingButton > *:not(:first-child) {
        display: none;
        font-size: .8em;
    }

    .expandingButton:hover {
    width: 275px;
    }

    .expandingButton:hover > *:not(:first-child) {
        display:initial;
    }
} */


/* adds 10px padding to anything with class="padding" */
.padded {
    padding: 10px;
}

/* centers block elements (will work for whole paragraphs, images, etc. not for text), some block elements are already automatically 100% width, in this case it wont appear to work */
.centered {
    margin: 0 auto;
    display: block;
}

/* centers an elemsnts children, i.e. a div containing many buttons */
.centerChildren {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* centers an elemsnts children, i.e. a div containing many buttons */
.centerChildren > * {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: content;
}

/* /* presumably if an image is inside a centerchildren div, it is in some kind of
container that would be affecting its parent-derived width *
.centerChildren img {
    max-width: 100%;
} */

/* centers text */
.centeredText {
    text-align: center
}

.indent {
    margin-left: 4ch; /* set tle left margin to a length equal to 4 times the width of the "0" character (essentially 4 spaces or a tab) */
}

/* makes text smaller. i.e. text under the video on teh sentinel page */
.smalltext {
    font-size: .75em;
}

.mediumtext {
    font-size: .90em;
}

.italic {
    font-style: italic;
}

.smallImage {
    max-width: 180px;
    max-height: 180px;
}

.mediumImage {
    max-width: 35%;
    max-height: 35%;
}

.largeImage {
    max-width: 50%;
    max-height: 50%;
}

.fullImage {
    max-width: 100%;
    max-height: 100%;
}

.logoImage {
    max-width: 18vw;
}

.nomargin {margin: 0}