body {
    margin: 0;
    overflow-x: hidden;
}

/* -------------------------- */
.dongle-light {
    font-family: "Dongle", sans-serif;
    font-weight: 300;
    font-style: normal;
}
  
.dongle-regular {
    font-family: "Dongle", sans-serif;
    font-weight: 400;
    font-style: normal;
}
  
.dongle-bold {
    font-family: "Dongle", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.concert-one-regular {
    font-family: "Concert One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.chango-regular {
    font-family: "Chango", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.concert-one-regular {
    font-family: "Concert One", serif;
    font-weight: 400;
    font-style: normal;
}
  
  
/* -------------------------- */

#splash {
    max-width: 350px;
    margin: auto;
    display: block;
}

#splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
    max-width: 100%;
}

#enter-btn {
    margin: 20px;
    cursor: pointer;
    border-radius: 10px;
}

#photo-credit {
    font-size: 0.8em;
}

#photo-credit a {
    color: #0000a8; /* Default link color */
}
#photo-credit a:visited {
    color: #0000a8; /* Color for visited links */
}

img {
    max-width: 100%; /* Ensure the image scales with the container */
    height: auto; /* Maintain aspect ratio */
}

#logo-section{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* -------------------------- */

.content {
    grid-area: content;
    text-align: center;
    min-height: 300px;
}

.main-head {
    grid-area: header;
    text-align: center;
}

.header-image {
    background-image: url('https://web.archive.org/web/20090830021202/http://geocities.com/Area51/Shire/2690/barbed.gif');
    background-repeat: repeat-x;
    height: 50px;
}
.main-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column; /* Ensures items stack vertically */
    align-items: center; /* Centers items horizontally */
    justify-content: flex-start; /* Aligns items to the top vertically */
    padding: 0;
    margin: 0;
}


.main-footer {
    grid-area: footer;
    text-align: center;
    height: 50px;
    background-image: url('https://web.archive.org/web/20090830021202/http://geocities.com/Area51/Shire/2690/barbed.gif');
    background-repeat: repeat-x;
}

.wrapper {
    display: grid;
    gap: 20px;
    grid-template-areas:
      "header"
      "nav"
      "content"
      "content"
      "footer";
}

#contact-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#email-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:10px;

}

#email-div img {
    object-fit: contain;
    width: 133px; 
    height: 40px;
}


/* @media (min-width: 500px) {

    nav ul {
      display: flex;
      justify-content: space-between;
    }
} */
  
/* @media (min-width: 700px) {
    .wrapper {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas:
        "header header  header"
        "nav    content content"
        "nav    content content"
        "footer footer  footer";
    }
    nav ul {
      flex-direction: column;
    }
} */
  

/* -------------------------- */

.menu-item{
    cursor: pointer;
    padding: 5px 15px;
    margin: 5px;
    border: black 1px solid;
    border-radius: 10px;
    text-align: center;
    width: 50%;
}

.menu-item.active {
    color: #8d12bf; /* Change this to the color you prefer */
}

a {
    text-decoration: none;
}

/* nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
} */

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.nav-list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* -------------------------- */

.link-list {
    list-style: none; 
    padding: 0;
    margin: 0; 
}

.link-item {
    margin: 10px 0; /* Optional: space between list items */
    text-align: center;
}

.link-item a {
    display: inline-block; /* Make the link take up the full width and height */
    padding: 5px; /* Optional: add some padding for clickable area */
    text-decoration: none; /* Remove underline */
    color: inherit; /* Use the color of the parent element */
    background-color: #f0f0f0; /* Optional: background color for hover effect */
    transition: background-color 0.3s; /* Optional: smooth background change on hover */
    border: 1px solid black;
    border-radius: 20px;
    width: 35%;
    font-family: "Dongle", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 25px;
}

.link-item a:hover {
    background-color: #e0e0e0; /* Optional: change background color on hover */
}

@media (max-width: 596px) {
    .link-item a {
        width: 50%;
    }
}

@media (max-width: 390px) {
    .link-item a {
        width: 60%;
    }
}