* { box-sizing: border-box; }
body{ background-color: #3a1078; color: #666666; margin: 0;  
    font-family: Verdana, Arial, sans-serif; 
    }
header {background-color: #654e92; 
        color: #FFFFFF;
        font-family: Georgia, 'Times New Roman', Paltino, serif;
        padding: 0.5em 3em; font-size: large;
        }
    header a{text-decoration: none ;}
    header a:link{color: #FFFFFF;}
    header a:visited{color:#FFFFFF}
    header a:hover{color:#ebd8b2;}
    
h1{text-align: left ;  font-size:1.5em; color:#a5c0dd;font-family: Georgia, 'Times New Roman', Paltino, serif; }
h2{color:#a5c0dd;font-family: Georgia, 'Times New Roman', Paltino, serif; }
h3{font-family: Georgia, 'Times New Roman', Paltino, serif;  }

nav ul {display: flex; flex-direction: column; margin: 0; padding: 0;list-style: none;}
nav li {padding: .5em 1em .5em 1em; width: 100%; border-bottom:solid 1px #344873;} 
nav a {text-decoration:none;} 
nav a:link {color:#5c7fa3;}
nav a:visited {color:#344873;}
nav a:hover {color:#A52A2A;}
nav {background-color: #ffffff;text-align: center;font-size: 1.2em; }

/* Grid Definitions for the headshot array on the staff page --- below */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px; }
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;  }
.grid-item img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;  }
.grid-item h2 {
    font-size: 1.2rem;
    margin: 0;}
.grid-item p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.2;}
.grid-item a {
    font-weight: bold;
    text-decoration: none;
    color: blue; }
/* Grid Definitions for the headshot array on the staff page --- above */

/* flex Definitions for the facilities page --- below */
.container {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;}
  
  .map {
    flex: 1;}
  
  .pictures {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;}
  
  .picture {
    margin-bottom: 20px;}
  
  .picture img {
    max-width: 35%;}
  
  .picture p {
    font-size: 18px;
    margin-top: 10px;
    color: #a5c0dd;}
/* flex Definitions for the facilities page --- below */

/*  Definitions for the sidebar on the modalities page --- below */
 .wrappersidebar {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 20px;}
  
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    background-color: #654e92;
    color: #FFFFFF;
    padding: 15px;}
  
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;}

.sidebar a:visited  {color:#42b4c9}
.sidebar a:hover{color:#A52A2A;}
.sidebar a {color:#ffffff;}
.sidebar li { margin-bottom: 10px; }

.modalcontent{ margin-left: 200px; overflow: auto; width:75%; color:black}
  
/*  Definitions for the sidebar on the modalities page --- above */
  
main{display:block;  padding: 0em 1em 0em 1em; width: 100%;}
section{ padding: 0 0.5em 0 0.5em; } 
dt{color:#a5c0dd;font-weight: bold; font-size: 1.2em;} 
/* Table Definitions for the Modalities page ---  */
table {
  width: 80%;
  margin: 0 auto; 
  border: 6px solid #3a1078; 
  border-collapse: collapse; }

  td, th {padding:5px; border: 1px solid #3a1078}
  th{color: #a5c0dd}
  td {text-align: center;}

footer{font-size: .7em;font-style: italic;text-align: center;padding: 1em;background-color: #FFFFFF;}

tr:nth-of-type(even) { background-color: #DFEDF8; }
.text{text-align: left;}    
.lookhere{color:#3d87d1; font-size: 1.2em; }
.float{float: left; background-color: #DDC3A2;font-family: Verdana, sans-serif; padding:20px;}
/* Hover Definitions for the headshot array on the staff page ---  */
.hover-text {display: none;}
.hover-link:hover + .hover-text {display:flow-root;}



#homehero{ height: 500px; background-image: url(images/couple.jpg);background-size: 100%,100%;background-repeat:
         no-repeat;}
#staffhero{ height:300px; background-image: url(images/team.jpg);background-size: 80% 80%; background-position:top;
            background-repeat:no-repeat;padding: 20em;}

#wrapper{ background-color: #FFFFFF;}

/* Responsive code 'ifs' --- below */
form{display:flex; flex-direction: column; padding-left: 1em; width: 80%;}
input, textarea { margin-bottom: .5em;}

@media (width < 481px) 
    {
    #mobile{display: inline}
    #desktop{display: none}     
    } 
@media (width > 480px) 
    {
    #mobile{display: none}
    #desktop{display: inline}
    }
@media (width > 599px)
    {
    h1{ font-size:2em; letter-spacing: .25em;}
    nav ul {display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 0 2em 0 0;
        list-style: none;  }
    nav li{ width: 12em;
        border-bottom: none;}
    section{ padding: 0 2em 0 2em}
    form{width: 60%;
        display: grid;
        grid-template-columns: 10em 1fr;
        grid-gap: 1em;}
    input[type="submit"] {grid-column: 2;width: 9em;}
    #flow {display: flex; flex-direction: row;}
    #mobile{display: none}
    #desktop{display: inline}
    /* does the entire id recode or just the change */
    #homehero{background-size: 100%,100%;}
    #staffhero{background-size: 100%,100%;}
    #trailhero{background-size: 100%,100%;}
    #reshero{background-size: 100%,100%;}
    }
@media (width > 1023px)
    {
    body{background-image:linear-gradient(to bottom, #FFFFFF 10%, #3a1078 75%, #FFFFFF 100%) ;}
    nav ul{padding: 0 10% 0 10%;}
    #wrapper{width:80%; margin:0 auto}
    }