@charset "utf-8";
/* CSS Document */


/************************** Universal Selector **************************/
*{
    box-sizing: border-box;
    padding:0;
    margin:0;
    font-family:"Nirmala UI", "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    color:#242729;
}

/************************** Standard Element Selectors **************************/

html {
  scroll-behavior: smooth;
}

body {
    background-color:#242729;
}

p{
    display:flex;
    width:90%;
    padding:0;
    margin: 0rem 0rem .5rem 0rem;
    height:auto;
    overflow:hidden;
    justify-content: center;
    color:#242729;
    text-align:left;
    line-height: 1.5;
}

h1{
    font-family:"Nirmala UI";
    color:#242729;
}

h2{
    font-family:"Nirmala UI";
    color:#242729;
}

h3{
    font-family:"Nirmala UI";
    color:#242729;
}

h4{
    font-family:"Nirmala UI";
    color:#242729;
}

blockquote {
    display:flex;
    flex-direction: column;
    background-color:whitesmoke;
    border-left: .2rem solid #652F7E;
    font-size: 1rem;
    font-family: Times, serif;
    font-style: italic;
    margin: 0;
    padding: 0;
    width:80%;
}
    
blockquote p{
    display:inline-block;
    margin-left:2.5rem;
    line-height:1.25;
    text-align:left;
}

blockquote::before {
    display:block;
    color:#652F7E;
    content:'\201c';
    font-size: 5rem;
    margin-bottom:-4.5rem;
    margin-top:-1rem;
    margin-left:-.5rem;
    padding-left:0rem;
    opacity: .5;
}


/************************** Class Selectors **************************/

.main-header{
    display:flex;
    flex-direction: row;
    height:5rem;
    width:100%;
    background-image: url("images/Main_Logo4.png");
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
    background-color:#61605F;
    position:fixed;
    top:0;
}

.nav-menu{
    display:flex;
    justify-content: center;
    align-items: center;
    height:2rem;
    background-image: linear-gradient(#652F7E, purple);
    position:fixed;
    width:100%;
    top:5em;
}

.nav-menu li{
    list-style-type: none;
    padding:1rem;
}

.nav-menu li a{
    color:white;
    text-decoration: none;
    padding:.25rem 2.5rem .25rem 2.5rem;
    font-family:"Nirmala UI";
}

.nav-menu li a:hover{
    border-radius: .25rem;
    background-color:#FFB81E;
    color:#652F7E;
    font-weight: bold;
}

.hamburger{
    display:flex;
    flex-direction: column;
    visibility:hidden;
    margin-left:1rem;
    justify-content: center;
    cursor:pointer; 
}

.bar{
    display:block;
    color:white;
    background-color:white;
    height:.2rem;
    width:2.25rem;
    margin:.2rem;
    border-radius:.2rem;
}

.article-link{
    display:flex;
    flex-direction:row;
    width:90%;
    justify-content: center;
    padding-top:.25rem;
    margin:.25rem;
    background-color:lightgray;
    border-radius: 1rem;
    min-height: 2rem;
    font-style: italic;
    text-decoration: none;
    color:#652F7E;
    font-weight: bold; 
}

.article-link:hover{
    background-color:#FFB81E;
    color:#652F7E;
    font-weight: bold; 
}

.event_header{
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    font-variant: small-caps;
}

.todays-date{
    display:flex;
    font-style:italic;
    color:#72177F;
    align-content: center;
    justify-content:flex-start;
}

/************************** Footer Section **************************/
.footer{
    grid-area:F;
    display: flex;
    flex-direction: column;
    background-color: whitesmoke;
    border-radius: .25rem;
    padding:1rem;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.citation{
    font-family:"Nirmala UI", "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    text-align: right;
    font-weight: bold;
    font-style:normal;
    display: block;
}

.citation::before{
    content:"\2014\0020";
}


/*
.footer img{
    margin:0;
    padding:0;
}
*/

.footer a img{
    height:4rem;
    margin:0;
}

/*
.footer a {
        background-color:whitesmoke;
    }
*/

/*
.footer a:link{
    background-color:whitesmoke;
}
    
.footer a:hover {
        background-color:whitesmoke;
    }
*/

.footer h5{
    padding:.5rem;
    border-top: solid .1rem #61605F; 
    border-bottom: solid .1rem #61605F; 
}



/************************** Media Queries **************************/


/* Extra small devices (phones, 600px and down) */
/*@media only screen and (max-width: 600px) {...}*/

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 600px) {...}*/

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {...}*/

/* Large devices (laptops/desktops, 992px and up) */
/*@media only screen and (min-width: 992px) {...}*/

/* Extra large devices (large laptops and desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {...}*/



@media (max-width: 768px) {
    
.nav-menu{
    display: flex;
    flex-direction: column;
    position:fixed;
    width:100vw;
    height:100%;
    top:5em;
    justify-content: flex-start;
    transform:translateX(-125%);
    transition: 1s;
    padding-top:1em;
    }
    
.nav-menu.active{
        transform:translateX(0%);
        transition: 1s;
    }
    
.main-header{
    position:fixed;
    top:0;
}

.nav-menu li{
    display: flex;
    justify-content: center;
    padding:0em;
    width:25em; 
    border-bottom: solid .05em whitesmoke;
}
    
.nav-menu li a{
    display: flex;
    justify-content: center;
    padding:0em;
    width:95%;
    padding-top: 1em;
    padding-bottom: 1em;
}
    
.hamburger{
    display:flex;
    flex-direction: column;
    margin-left:1em;
    justify-content: center;
    visibility:visible;
    }
    
    .hamburger.active .bar:nth-child(1){
        transform:translateY(.61rem) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(2){
        opacity:0;
    }
       .hamburger.active .bar:nth-child(3){
       transform:translateY(-.61rem) rotate(-45deg);
    }
    
}

/*Notes:*/
/*#242729;  Charcoal*/
/*    align-items controls where the flex items sit on the cross axis.*/
/*    justify-content controls where the flex items sit on the main axis.*/