* {
    box-sizing: border-box;
  }
   
  body {
    background: #ffffff;
    background-attachment: fixed;
    color: #000000;
    font-family: Verdana, Arial, sans-serif;
    margin: 0;
  }
   
  #wrapper {
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
  }
   
  header {
    background-color: #DABDFF;
    color: #DABDFF;
    font-family: Georgia, serif;
    grid-column: 1 / -1;
    grid-row: 1 / 1;
  }
   
  header h1 {
    background-image: url('thirfthood_1.png');
    background-position: left;
    background-repeat: no-repeat;
    background-size: 13%;
    background-origin: content-box;
    line-height: 50%;
    padding: 45px;
    margin: 0;
  }
   
  header a {
    text-decoration: none;
    color: #FFFFFF;
  }
   
  nav {
    background-color: #E1E1E1;
    position: sticky;
    top: 0;
    grid-column: 2 / -2;
    grid-row: 2 / 3;
    margin: 0;
  }
   
  nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
  }
   
  nav ul li {
    width: 100%;
  }
   
  nav a {
    text-decoration: none;
    color: #000000;
    padding: 1rem 0;
    display: block;
    text-align: center;
    transition: background-color 0.5s ease-out;
  }
   
  nav a:hover {
    background-color: #BBF5EE;
  }
   
  #tshirtstackwgraphic {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    height: 600px;
    background-image: url('tshirtstackwgraphic.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
   
  .image-container {
    display: flex;
    justify-content: space-evenly; 
    align-items: center; 
    list-style-type: none;
    padding: 0;
  }
   
  .image-container img {
    width: 330px; 
    height: auto;
  }
   
  main {
    padding: 0 2rem;
    background: #ffffff;
    grid-column: 2 / -2;
    grid-row: 4 / 5;
  }
   
  main img {
    float: right;
    padding-left: 2rem;
  }
   
  footer {
    background-color: #BBF5EE;
    color: #000000;
    padding: 10px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    grid-column: 1 / -1; 
    grid-row: 5 / 6; 
  }
   
  h1 {
    color: #000000;
    text-align: center;
    font-family: Impact;
    font-size: 64px;
  }
   
  h3 {
    color: #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    font-weight: lighter;
    font-size: smaller;
  }
   
  #purplebar {
    background-color: #DABDFF;
    grid-column: 1 / -1;
    grid-row: 1 / 2;
  }
   
  #greybar {
    background-color: #E1E1E1;
    grid-column: 1 / -1;
    grid-row: 2 / 3;
  }
   
  .vertical-bar-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
   
  .vertical-bar-list li {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
   
  .vertical-bar-list a {
    display: block;
    padding: 15px;
    background-color: #DABDFF;
    color: #000000;
    text-decoration: none;
    transition: background-color 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
   
  p {
    font-size: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
   
  footer {
    background-color: #BBF5EE;
    color: #000000;
    padding: 10px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 12px;
    grid-column: 1 / -1; 
    grid-row: 5 / 6; 
  }
   
  .footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 20px;
  }
   
  .footer-address, .footer-connect, .footer-social {
    flex: 1;
  }
   
  .footer-address p {
    margin: 0;
    text-align: left;
  }
   
  .footer-connect {
    text-align: center;
  }
   
  .footer-social {
    text-align: right;
  }
   
  #connect a {
    text-decoration: underline;
    color: black;
    font-weight: bold;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
   
  .instagram-logo {
    width: 44px;
    height: 44px;
  }
  
  #jazzcorner {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    height: 600px;
    background-image: url('jazzcorner.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #pantswall {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    height: 600px;
    background-image: url('pantswall.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #turfwall {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    height: 600px;
    background-image: url('turfwall.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #thrifthoodoutside {
    grid-column: 1 / -1;
    grid-row: 3 / 4;
    height: 600px;
    background-image: url('thrifthoodoutside.JPG');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
  }
  
  .contact-form h2 {
    margin-bottom: 20px;
    color: #333;
  }
  
  .contact-form label {
    margin-bottom: 5px;
    color: #555;
  }
  
  .contact-form input {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .contact-form button {
    padding: 10px;
    border: none;
    border-radius: 4px;
    background-color: #DABDFF;
    color: white;
    font-size: 16px;
    cursor: pointer;
  }
  
  .contact-form button:hover {
    background-color: #bd8ffa;
  }

  @media only screen and (max-width: 1100px) {
    #wrapper {
      grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);
    }
  }
  
  @media only screen and (max-width: 900px) {
    nav {
      grid-column: 1 / 5;
      grid-row: 2 / 3;
      position: static;
    }
  }

  @media only screen and (max-width: 600px) {
    header h1 {
      background-image: none;
      text-align: center;
    }
  
    nav {
      grid-column: 1 / -1;
      grid-row: 2 / 3;
    }
  
    #tshirtstackwgraphic, #turfwall, #jazzcorner, #thrifthoodoutside {
      display: none;
    }
  }
  @media only screen and (max-width: 1100px) {
    #wrapper {
      grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);
    }
  }
  
  @media only screen and (max-width: 900px) {
    nav {
      grid-column: 5 / 8;
      grid-row: 1 / -1;
      position: static;
    }
  
    nav ul {
      flex-flow: column nowrap;
      text-align: center;
    }
  
    #tshirtstack, #turfwall, #jazzcorner, #thrifthoodoutside{
      grid-column: 5 / 8;
      grid-row: 2 / 3;
      height: auto;
    }
  
    main img {
      float: none;
      width: 100%;
      height: auto;
      padding-left: 0px;
    }
    
    header h1 {
      width: fit-content;
    }
  }