/* css for non-animated header div */




header {
    margin-top: 4em;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    height: 18em;
    background: linear-gradient( rgba(252,194,194,1), rgba(241,154,154,1) );
    width: 99%;
    max-width: 75em;
    border-radius: 3px;
    position: relative;
    }

#ekg_trace {
    margin: 0;
    padding: 0;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    transform: translateY(-45%);
    opacity: 0.3;
    }

#intro {
    margin-top: 3em;
    }

#title_img {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    /*border: solid red 1px;*/
    position: relative;
    z-index: 4;
    border-radius: 3px;
    align-items: center;
    }
    
#title {
    flex-grow: 1;
    /*border: solid blue 1px;*/
    text-align: center;
    }
    
#title > span {
    font-size: 250%;
    font-weight: 700;
    text-shadow: 1px 1px 3px #555;
    word-break: break-all;
    }
    
#img {
    flex-basis: auto;
    /*border: solid cyan 1px;*/
    height: 100%;
    }
    
    
#female_MD2 {
    height: 18em;
    width: auto;
    border: none;
    margin: 0;
    padding: 0;
    display: inline;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    }   
    

@media only screen and (max-width: 75em) {

header {
    height: 15em;
    }

#ekg_trace {
    margin: 0;
    padding: 0;
    max-width: 80%;
    max-height: 80%;
    }

    
#title > span {
    font-size: 200%;
    }
    
#female_MD2 {
    height: 15em;
    }
 
}

@media only screen and (max-width: 64em) {

header {
    margin-top: 3em;
    height: 12em;
    max-width: 64em;  
    }

#ekg_trace {
    margin: 0;
    padding: 0;
    max-width: 80%;
    max-height: 80%;
    }
   
    
#title > span {
    font-size: 175%;
    }
    
#female_MD2 {
    height: 12em;
    }

}


@media only screen and (max-width: 50em) {
    
* { animation-name: none!important; }

header {
    height: auto;
    width: 100%;
    max-width: 49.99em;
    background: rgba(241,154,154, 0.8);
    overflow: hidden; /* because we've widened ekg_trace to show last p wave */
    }


#ekg_trace {
    margin: 0;
    padding: 0;
    transform: none;
    top: 45%;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    opacity: 0.2;
    }

    
#title_img {
    display: block;
    border-radius: 0;
    height: auto;
    width: 100%;
    /* posn still relative z-index = 4 */
    } 
    
#title {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* force to 100% to fill title img pushed open by image */
    z-index: 5;
    }
    
#title > span {
    font-size: 150%;
    position: relative;
    top: 67%;
    }
    
#img {
    display: inline-block;
    height: auto;
    width: 100%;
    text-align: center;
    /* position static -- height set by height of image */
    }
    

    
#female_MD2 {
    margin-bottom: -0.2em;
    display: inline-block;
    height: auto;
    max-width: 75%;
    border-radius: 0;
    }

}


@media only screen and (max-width: 38em) {
            
#title > span {
     font-size: 140%;
     }
    
}


@media only screen and (max-width: 25em) {
    
* { animation-name: none!important; }

header {
    height: auto;
    width: 100%;
    max-width: 25em;
    background: white; 
    }

#ekg_trace {
    display: none;
    }
    
#title > span {
     font-size: 125%;
     
     }
     
#female_MD2 {
    max-width: 100%;
    }

}

/*  

<!--
<noscript>
<style type="text/css">
remove border of purecss reset button (which is an input element in non-js context) 
#reset_button {
    border: 0px;
    }
</style>
</noscript>
-->
*/