/* unvisited link */
a:link {
    color: lightgray;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color: lightgray;
    text-decoration: none;
  }
  
  /* mouse over link */
  a:hover {
    color: coral;
  }
  
  /* selected link */
  a:active {
    color: lightgray;
    text-decoration: none;
  }
  
  /* Site Props */
  .heading {
    color: white;
    font-size: 25;
    text-align: center;
  }
  .navlinktext {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    font-family: system-ui;
    font-weight: bold;
  }
  .site-title {
    font-size: 2.2rem;
    color: white;
    text-align: left;
  }
  .sitesubTitle {
    font-size: 1.5rem;
    color: white;
    text-align: left;
  }
  .background {
    aspect-ratio: 1;
    background-size: auto;
  }
  body {
    font-size: 1.2rem;
    color: white;
    margin: 2rem;
    background-image: url("./images/bg.webp");
  }
  navbar {
    border-radius: 20px;
    background: url(./images/menu.webp);
    background-position: left top;
    background-repeat: repeat;
    padding: 5px;
  }
  .footertext {
    font-size: 1rem;
    color: white;
    text-decoration: none;
  }
  .leftfacing {
    border-radius: 10px;
    width: 800px;
    font-size: 1rem;
    color: white;
    background-color: gray;
  
  }
  .boardborder {
    border-radius: 10px;
    background-color: gray;
    max-width: 600px;
  }
  button {
    background-color: gray; 
    border-radius: 10px;
    transition-duration: 0.4s;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
  }
  .button:hover {
    background-color: white;
    color: gray;
  }
  /* CSS for responsive iFrame for calendar*/
  @media (min-width: 550px) {
    .responsiveiframecontainer {padding-bottom: 75%;}
  }
  @media (max-width: 550px) {
    .responsiveiframecontainer {padding-bottom: 150%;}
  }
  .responsiveiframecontainer {
    position: relative;
    padding-top: 0;
    height: 0;
    overflow: hidden;
  }
  .responsiveiframecontainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .responsiveiframecontainersmall iframe {
    width: 70%;
  }