body{
    margin:0;
    padding:0;
    font-family: 'Roboto', sans-serif !important;
    background-color: lightgray;
  }


  h1 {
    font-family: 'Patua One', cursive !important;
    text-align: center;
  }

  h2 {
    font-family: 'Patua One', cursive !important;
    text-align: center;
  }
  
  h3 {
    font-family: 'Patua One', cursive !important;
    text-align: center;
  }
  
  p {
    font-family: 'Patua One', cursive !important;
  }
  header {
    background:    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), #7b85cd),
    url('/Images/homepPageBannerImage.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width:100%;
    padding:40px 0;
    color:white;
    text-align:center;
  }
  
  a {
    text-decoration:none !important;
    color:inherit !important;
  }
  
  nav ul {
    background-color:#557272;
    overflow:hidden;
    color:white;
    padding:0;
    margin:0;
    text-align:center;
    -webkit-transition:max-height 0.4s;
    -ms-transition:max-height 0.4s;
    -moz-transition:max-height 0.4s;
    -o-transition:max-height 0.4s;
    transition:max-height 0.4s;
  }
  
  nav ul li {
    display:inline-block;
    padding:20px;
  }
  
  nav ul li:hover {
    background-color:#7b85cd;
  }
  
  section {
    line-height: 1.5em;
    font-size:0.9em;
    padding:40px;
    width:75%;
    margin:0 auto;
  }
  
    .handle {
      width:100%;
      background: #557272;
      text-align:left;
      box-sizing:border-box;
      padding:15px 10px;
      cursor:pointer;
      color:white;
      display:none;
    }
  
  @media screen and (max-width:580px){
    
    nav ul {
      max-height:0;
    }
    
    .showing {
      max-height:20em;
    }
    nav ul li {
      width:100%;
      box-sizing:border-box;
      padding:15px;
      text-align:left;
    }
     
    .handle {
      display:block;
    }
    

    body{
      margin:0;
      padding:0;
      font-family: 'Roboto', sans-serif !important;
      background-color: lightgray;
      font-size: small  !important;
    }
  
  
    h1 {
      font-family: 'Patua One', cursive !important;
      text-align: left;
      font-size: medium  !important;
    }
    
    h3 {
      font-family: 'Patua One', cursive !important;
      text-align: left;
      font-size: medium  !important;
    }
    
    p {
      font-family: 'Patua One', cursive !important;
      font-size: left  !important;
    }
  
  }
  
  .LogOutButton {
    right: 0;
    position: fixed;

  }

  .LogOutButton:button {
    width: 30px;
  }

  .WelcomeParagraph {
    background-color: #b5bdf5;
    border-color: lightslategray !important;
    border-radius: 25px;
    border-width: 4px;
    font-size: large;

}