body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #fefbee;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
header {
    text-align: left;
    padding: 20px;
}
footer {
    margin-top: auto;
    text-align: center;
    font-size: small;
    padding: 10px 0;
}
#logo {
    width: 300px; /* Adjust as needed */
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
}
 .site-link-container{

      margin: 0 auto;
      width: 230px; /* Adjust as needed */
      height: auto;
    align-items: center;

  display: flex; /* Establishes this container as a flex container */
  justify-content: center; /* Centers children on the main axis (horizontally, by default) */
  align-items: center; /* Centers children on the cross axis (vertically, in this case) */
  flex-direction: column; /* Stacks children vertically */
  text-align: center; /* Ensures text inside is centered, if not already by default */
}

.site-link {
  text-decoration: none !important;
color: #808080;
}
.site-link:hover, .site-link:active, .site-link:focus {
  text-decoration: none !important;
      color: #000; /* Change as needed */
}
.site-link-logo {
    height: 150px; /* Adjust as needed */
    width: auto;
    opacity: 0.7; /* Start with a lower opacity */
    transition: opacity 0.3s ease;
}
.site-link:hover .site-link-logo {
    opacity: 1; /* Full opacity on hover */
}
.site-link-button:hover, .site-link-text:hover {
      color: #000; /* Change as needed */
cursor: pointer;
}
.site-link-text {
      text-align: justify;
      margin: 10px 0; /* Adjust space between logo and text as needed */
}
.site-link-text  a{
  text-decoration: none !important;
  color: inherit;
}