/*.logo-title-container {
    width: 85%;
    margin-right: auto;
    margin-left: auto;
}*/

/*.LogoLink { grid-area: logo; }
.SiteTitle { grid-area: title; display: grid; align-items: center; /*height: 200px;align-self: center;*/}

.logo-title-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

.logo-title-container .logoLink {
  grid-area: logo;
}

.logo-title-container {
  display: grid;
  grid-template-areas:
    'logo title';
  grid-template-columns: 1fr 4fr;
  align-items: center;
  gap: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  max-height: 250px;
  align-items: center;
}

/* Style the first column (logo) */
.logo-title-container a {
}

/* Style the second column (title) */
.logo-title-container h1 {
  grid-area: title;
  margin: 0;
  font-size: 2rem;
  text-align: center;
}

@media (max-width: 700px) {
  .logo-title-container {
    grid-template-areas:
      'logo'
      'title';
    grid-template-columns: 1fr;
      gap: 0rem;
      margin: 0;
      text-align: center;
  }
.logo-title-container a {
  max-width: 250px;
  min-width: 100%;
  height: auto; /* allow it to shrink */
  display: block;
    }}

#hamnav {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 10px;
    text-align: center;
    color: white;
        text-shadow: 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5;
}

.content {
  /*padding-left: 20px;
  padding-right: 20px;*/
  padding: 20px;
  width: 85%;
  margin: 0 auto;
background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  margin-top: 10px;
}

.TwoColContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

.TwoColContainer img {
width: 100%;
}

.HomeLeft, 
.HomeRight {
    padding: 10px;
}

/*--- Grid Footer --*/


.FooterGridContainer h1 {
    color: white;
    text-align: center;
    font-family: "Workbench", monospace, sans-serif;
    text-shadow: 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5, 0rem 0rem .75rem #ff2fd5;
    font-size: 2em;
}

.item1 { grid-area: logo; }
.item2 { grid-area: title; }
.item3 { grid-area: contact; }
.item4 { grid-area: navigate; }

.FooterGridContainer {
  display: grid;
  grid-template-areas:
    'logo title title'
    'logo contact navigate';
  column-gap: 10rem;
  color: white;
  text-shadow: 0rem 0rem .5rem #ff2fd5;
  padding: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.FooterGridContainer > div > ul {
      list-style-type: none;
      text-align: left;
}

.FooterGridContainer > div > ul li {
    padding-bottom: 15px;
}

.FooterGridContainer > div > ul, ol {
  padding-left: 0; /* Remove the default padding from the list */
}

.FooterGridContainer .item1 {
    text-align: center;
}


/*.grid-container > div {
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
} */
    
@media (max-width: 600px) {
.FooterGridContainer {
  display: grid;
  margin-left: auto;
  margin-right: auto;
    width: 85%;
  grid-template-areas:
    'logo'
    'title'
    'contact'
    'navigate';
 text-align: center;
 justify-content: center;
}
    .item4, .item3 {
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        overflow: visible;
    }
    .footerBold {
        text-align: left;
    }
    }

@media screen and (min-width: 601px) and (max-width: 1024px) { 
.FooterGridContainer {
  display: grid;
  grid-template-areas:
    'logo logo'
    'title title'
    'contact navigate';
  grid-template-columns: repeat(2, 1fr);
  /*column-gap: 5rem;*/
  justify-content: center;
}
.FooterGridContainer > div > ul{
      list-style-type: none;
}
        .item4, .item3 {
        overflow: visible;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
    }
    .footerBold {
        text-align: left;
    }
    }

footer {
background: #250040;
background: linear-gradient(0deg,rgba(37, 0, 64, 1) 0%, rgba(81, 0, 92, 1) 48%, rgba(156, 0, 140, 1) 100%);
width: 100%;
display: block;
overflow: auto;
padding-top: 20px;
padding-bottom: 20px;
margin-top: 30px;
}

.footerWrapper {
    width: 85%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.footerBold{
    font-weight: 600;
    font-family: "Workbench", monospace, sans-serif;
    font-size: large;
    text-shadow: 0rem 0rem .5rem #ff2fd5;
}

footer a, a:visited {
    color: white;
    text-decoration: none;
    text-shadow: 0rem 0rem .5rem lightblue;
}
footer a:hover {
    color: lightgoldenrodyellow;
    text-decoration: underline dotted;
}

/* Very Bottom Under Footer*/

.bottom {color: #FFFFFF;
    height: 3em;
    width: 100%;
 }
 
.bottom a, a:visited {
    color: lightblue;
    text-decoration: none;
}
.bottom a:hover {
    color: lightgoldenrodyellow;
    text-decoration: underline dotted;
}

.center {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 75%;
   overflow: visible;
 }

/* used to check for conflicting code override 
/*.logo-title-container {
  display: grid !important;
  grid-template-columns: 1fr 3fr !important;
  border: 2px dashed red;
} */

/* Media Queries */

@media (max-width: 700px) {
  .logo-title-container {
    grid-template-columns: 1fr; /* Stack in a single column */
    text-align: center;         /* Center text and logo */
    margin-bottom: 2rem;
  }

  .logo-title-container img {
    max-width: 80%; /* Resize the image so it doesn't overflow */
    max-height: 80%;
    height: auto;
  }
    
.logo-title-container a {
  justify-self: center;
}

/* Style the second column (title) */
.logo-title-container h1 {
  margin: 0;
  font-size: 1.5rem;
  justify-self: center;
}
}/*
@media (max-width: 650px) {
  .TwoColContainer {
    grid-template-columns: 1fr;
  }
}
/*
@media (max-width: 600px) {
  .logo-title-container {
    grid-template-columns: 1fr; /* Stack in a single column */
 /*   text-align: center;         /* Center text and logo */
  }

/*  .logo-title-container img {
    max-width: 80%; /* Resize the image so it doesn't overflow */
/*    height: auto;
  }

  .SiteTitle {
    font-size: 1.5rem; /* Optional: slightly smaller text on mobile */
 /* }
}