/* Reset and general styles */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-image: url('images/background2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
}
.hidden-link {
    width: 100%; /* Matches the width of the surrounding content */
    height: 20px; /* Adjust height for clickable area */
    background-color: transparent; /* Invisible but clickable */
    cursor: pointer;
    /* Uncomment the next line to debug its placement with a visible color */
    /* background-color: rgba(255, 0, 0, 0.2); */
}


section {
  display:flex;
  flex-direction:column;
  align-items:center;
  align-content:center;
  flex-wrap: nowrap;
}

.container .legend a {
    font-size: 1rem !important;
    color:black !important;
}

#dreamy-background {
    background: linear-gradient(to bottom, rgba(75, 0, 130, 0.9), rgba(123, 104, 238, 0.9));
    background-size: cover;
    animation: dreamy-transition 10s infinite alternate;
}

#blacktext {
    color: black;
    background: none;
    border: none;
}

#blacktext:hover {
    color: white;
}

@keyframes dreamy-transition {
    0% {
        background: linear-gradient(to bottom, rgba(75, 0, 130, 0.9), rgba(123, 104, 238, 0.9));
    }
    50% {
        background: linear-gradient(to bottom, rgba(123, 104, 238, 0.9), rgba(75, 0, 130, 0.9));
    }
    100% {
        background: linear-gradient(to bottom, rgba(75, 0, 130, 0.9), rgba(123, 104, 238, 0.9));
    }
}

/* General container styles */
.container,
.node-container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 10px;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: #000000;
}

.node-container {
    display:flex;
    flex-direction:column;
}

.node-container img {
    align-self:center;
}

.character-container {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 10px;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: background-color 0.3s ease;
}

.character-container img{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    margin: 20px 0;
}

.character-container select,
.character-container button{
    padding: 10px;
    margin: 10px;
    font-size: 16px;
    border: 2px solid #333;
    border-radius: 5px;
  align-self: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.character-container button:hover {
    background-color: #333;
    color: #fff;
}

.legend,
.locations-key {
    margin-bottom: 10px;
    border: 1px dashed white;
}

.legend ul {
    list-style-type: none;
    display: flex;
    align-content: center;
    justify-content: center;
  padding-left:2px;
}

.node-container ul {
    list-style-type: none;
}

.legend ul li {
    margin: 8px;
    padding: 8px;
    border: 2px solid white;
    border-radius: 5px;
}

.legend ul li p {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px;
    padding: 5px;
}

.legend h3 {
    color: #fff;
    font-size: 28px;
    cursor: pointer; /* Add cursor pointer to indicate it's clickable */
}

#legendMenu.show,
#legend1a p,
#lore1a p,
#lore2a p,
#lore3a p,
#lore4a p,
#mainMenu.show {
    display: flex;
}

.legend p {
    color: white !important;
}

#lore1.show,
#lore2.show,
#lore3.show,
#lore4.show {
    display: grid;
}

#legendMenu,
#lore1,
#lore2,
#lore3,
#lore4,
#lore1a.show,
#lore2a.show,
#lore3a.show,
#lore4a.show,
#legend1a.show,
#mainMenu {
    display: none;
}

[id^="togglenode"],
[id^="toggledescript"].show {
    display: none;
    text-align: center;
    justify-content: center;
    color: white;
}

[id^="togglenode"].show,
[id^="toggledescript"] {
    display: flex !important;
}

[id^="toggledescript"] {
    color: white !important;
}
/* About Section Styles */

@keyframes bannerAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.all-players {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0px 5px;
    gap: 10px; /* Added vertical gap for clarity */
    width: 100%;
    justify-items: center; /* Center items in their grid cell */
}

.all-players > :nth-last-child(1):nth-child(odd) {
    grid-column: span 2; /* Make the last item span two columns */
    justify-self: center; /* Center the last item within its spanning column */
}

.player-box {
    width: 100%; /* Ensure consistent width */
    max-width: 400px; /* Maximum width for consistency */
    justify-content: center;
    box-sizing: border-box; /* Include padding and border in width and height */
}

.about-me-banner {
    background: linear-gradient(270deg, 
    #4c4c4c, /* Stone */
    #8B4513, /* Tree Bark */
    #483D8B  /* Astral Sky */
    );
    background-size: 600% 600%;
    animation: bannerAnimation 20s ease infinite;
    padding: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.about-me-banner img,
.node-container img {
    min-width: 120px;
    width: 70%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.playercontainer {
    background-color: none;
    padding: 5px;
    color: white;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Ensure three equal columns */
    gap: 5px; /* Add gap between elements for better spacing */
}

.playercontainer-dean {
    background-color: none;
    padding: 5px;
    color: white;
    display: grid;
    align-content: center;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr);
}

.playercontainer .char,
.playercontainer-dean .char {
    max-width: 100%;
    padding: 10px; /* Reduced padding for uniformity */
    text-align: center;
}

.playercontainer img,
.playercontainer-dean img {
    min-width: 90px;
    width: 40%;
    height: auto;
    border-radius: 50%;
    object-fit: cover; 
}

.aboutcontainer{
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.aboutcontainer p {
  border:2px white;
  color:white;
  background-color: none;
  text-decoration: strong;
}

/* Shell container to center content */
.shell {
    width: 100%;
    max-width: 1000px;
    margin-top: 60px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Ensure content inside shell is centered */
    justify-content: center;
    z-index: 1;
}

/* Top menu styles */
.menu-banner {
    background-color: rgba(100, 100, 100, 0.9);
    background-image: url("images/stone.png");
    background-repeat: no-repeat;
    background-size: cover;
  display: flex;
  align-content: center;
  align-self: center; 
  justify-content: center;
  flex-direction: row;
    overflow: hidden;
  width: 100%;
}

.menu-banner h1 {
    font-size: 20px;
    color: #fff;
}


.menu-banner a {
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  align-content: center;
  align-items: center;
}

.dropdown {
  float: left;
  overflow: hidden;
  font-size: 16px;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.menu-banner a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.top-menu {
    background: none;
}

.team-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.team-button {
    background-color: rgba(8, 8, 8, 0.5);
    color: #ffcc00;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.team-button:hover {
    background-color: rgba(100, 100, 100, 0.8);
}

/* Banner styles */
.banner {
    background-color: #694b37;
    background-image: url("images/vines1.png"), url("images/bark.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: center;
    border: 1px solid black;
    border-radius: 0% 0% 30% 30%;
    margin-bottom: 15px;
    overflow: hidden;
    width:100%;
}

.mpbanner {
    background-color: rgba(112,128,144,.80);
    background-image: url("images/vines1.png"), url("images/stone.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 5px;
    text-align: center;
    border: 1px solid black;
    margin-bottom: 15px;
    overflow: hidden;
    width:100%;
}

.banner h1,
.banner h3,
.mpbanner h1,
.about-me-banner h1 {
    color: #fff;
}

.banner h1 {
    font-size: 36px;
}

.banner h3 {
    font-size: 24px;
}

.lore-banner {
    background-image: url("images/bark.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #694b37;
    padding: 5px;
    text-align: center;
    border: 1px solid black;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    margin-bottom: 10px;
}

.lore-banner h2 {
    color: white;
    border-radius: 50px;
    font-size: 30px;
    padding: 0px;
    text-shadow: 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black;
}
.moon-banner p {
    text-align:center;
    color:#ffcc00;
    background:none;
    border:none;
}
.lore-banner p {
    color: white;
    font-size: 1.2rem;
    text-shadow: 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black;
    text-align:center!important;
}

.moon-banner {
    background: linear-gradient(135deg, rgba(25, 25, 112, 0.9) 25%, rgba(192, 192, 192, 0.9) 75%); /* Mystical moon gradient */
    border-radius: 50px;
    border: 2px solid rgba(240, 230, 140, 0.5); /* Subtle moonlight yellow border */
    color: #F0E68C; /* Pale Moonlight text */
    padding: 5px;
    text-align: center;
    overflow: hidden;
    align-items: center;
    margin-bottom: 10px;
}

.moon-banner h2 {
    color: white;
    border-radius: 50px;
    font-size: 1.2rem;
    padding: 0px;
    text-shadow: 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black;
}

.moon-banner p {
    color: white;
    font-size: 24px;
    text-shadow: 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black, 1px 1px 0 black;
}

.circular-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin: 50px auto;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1); /* Optional: To visualize the container */
}

.circular-container .circular-item {
    position: absolute;
    width: 120px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #333;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: black;
    font-size: 16px;
    text-align: center;
    transform-origin: 50% 50%;
}

.circular-container .circular-item:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg) translate(150px) rotate(0deg);
}

.circular-container .circular-item:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg) translate(150px) rotate(-60deg);
}

.circular-container .circular-item:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(120deg) translate(150px) rotate(-120deg);
}

.circular-container .circular-item:nth-child(4) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg) translate(150px) rotate(-180deg);
}

.circular-container .circular-item:nth-child(5) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(240deg) translate(150px) rotate(-240deg);
}

.circular-container .circular-item:nth-child(6) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(300deg) translate(150px) rotate(-300deg);
}


#dreamy-background .lore-banner h2 {
    color: white;
}

.node-series {
    justify-content: center;
}

.player-box {
display:flex;
flex-direction: row-reverse;
flex-wrap:wrap;
}

.node-banner {
    background: linear-gradient(to bottom, rgba(75, 0, 130, 0.7), rgba(123, 104, 238, 0.7));
    background-size: cover;
    animation: dreamy-transition 10s infinite alternate;
    padding: 5px;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.node-banner p {
    color: #27221f;
    text-shadow: #fff 4px;
    font-size: 16px;
}

.node-banner h2,
.about-me-banner h2 {
    color: white;
}

/* Main two-column layout using CSS Grid */
#mp {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 5px;
    width: 90%;
}

#mp2 p {
  font-size:12px !important;
  text-align:center;
    color:#ffcc00;
    background:none;
    border:none;
}

#mp3 p {
  background:none;
}

#mp2 h2 {
  color:#ffcc00 !important;
}

#mp2 a {
  font-size:18px;
  color: #ffcc00 !important;
}
#mp2 .container {
    background: rgba(0,0,0,.75);
    padding:10px;
    margin:10px;
    border:none;
}
#mp2 .container a {
  font-size:1rem;
  color: white !important;
  text-align:center;
  border:none;
}

#mp3 p {
  font-size:12px;
  color:white;
  border:none;
}

/* First column (World and Teams) */
#mp2:first-of-type {
    display: flex;
  justify-content:space-between;
    flex-direction: column;
    flex:1;
    gap: 10px;
}

/* Second column (Campaign Details) */
#mp2:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    max-height: 100%;
    gap: 20px;
}

#mp2.lore-banner {
    background: linear-gradient(135deg, rgba(25, 25, 112, 0.9) 25%, rgba(192, 192, 192, 0.9) 75%); /* Mystical moon gradient */
    border-radius: 50px;
    border: 2px solid rgba(240, 230, 140, 0.5); /* Subtle moonlight yellow border */
    color: #F0E68C; /* Pale Moonlight text */
}


/* Teams section inside the first column */
#mp-team-column, #world-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

/* Individual team boxes */
#mp3 {
    flex: 1 0 50%; /* Half the width within the team section */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: transform 0.3s;
    margin-bottom: 5px;
    max-height: 25%;
}

#campaign-column #mp3 {
  flex-direction:column;
}

#mp3:hover {
    transform: scale(1.05);
}

/* Campaign details adjusted to a single column */
#campaign-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    #mp {
        grid-template-columns: 1fr; /* Stack all columns vertically on smaller screens */
    }
    #mp2 {
        flex: 0 0 100%; /* Full width for mobile */
    }
    #mp3 {
        flex: 0 0 100%; /* Full width for team boxes on mobile */
    }
}

/* Team character styles */
.team-container,
.npc-location,
.all-nodes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.moon-location {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.team-character,
.npc-box,
.location-flex {
    display: flex;
    padding: 10px;
    border: 5px double #fff;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.8);
}

.team-character img,
.npc-box img,
.all-nodes img,
.circle-container img,
.location-box img {
    width: 50%;
    min-width: 120px;
    height: auto;
    border-radius: 50%;
    margin: 0 20px;
    object-fit: cover;
}

.all-nodes img:hover,
.about-me-banner img:hover {
    transform: scale(1.05);
}

.team-character.left {
    flex-direction: row;
}

.team-character.right {
    flex-direction: row-reverse;
}

.character-info,
.npc-info {
    text-align: left;
    width: 50%;
}

.character-info h2,
.npc-info h3 {
    color: #ffcc00;
    font-size: 1rem;
    margin-bottom: 10px;
    text-align:center;
}

.npc-location h3,
.moon-location h3,
.npc-container h3 {
    color: #ffcc00;
}

.character-info p,
.npc-info p {
    color: #eee;
    font-size: 18px;
    margin-bottom: 10px;
}

/* Article styles */
.article1,
.dummycontainer {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.article1 h2,
.dummycontainer h2 {
    color: #ffcc00;
    font-size: 24px;
    margin-bottom: 10px;
}

.article1 ul,
.dummycontainer ul {
    list-style-type:none;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.article1 ul li a,
.dummycontainer ul li a {
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(100, 100, 100, 0.5);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.article1 ul li a:hover,
.dummycontainer li a:hover {
    background-color: rgba(100, 100, 100, 0.8);
}

.dummycontainer p {
  border:2px white;
  color:white;
  background-color: rgba(100,100,100,.85);
  text-decoration: strong;
}

/* Location box styles */
.locations-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

.location-box {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    width:45%;
}

.location-box h2 {
    color: #ffcc00;
    font-size: 20px;
    margin-bottom: 10px;
}

.location-flex {
  display:flex;
  flex-direction:column;
  justify-content:center;
  justify-items:center;
  align-items: center;
  align-content: center;
}

.location-box img:hover {
    transform: scale(1.05);
}

.location-box p {
    margin-top: 10px;
    color: #eee;
    font-size: 16px;
}


/* Lore styles */
.lore-book {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lore-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    border: 5px double #fff;
    border-radius: 10px;
    background-color: rgba(34, 34, 34, 0.8);
    color: #f0e68c;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.content p {
    color: #f0e68c;
    font-size: 18px;
    text-align: left;
    background: none;
}

.lore-chapter img {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    margin: 0 20px;
    padding-right: 10px;
    object-fit: contain;
}

/* Time Tree Crisis Styles */
.circle-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#bark {
    background-image: url("images/bark.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #694b37;
}

.circle-container {
    position: relative;
    width: 800px; /* Increase the width to space out the boxes */
    height: 800px; /* Increase the height to space out the boxes */
    margin: 0 auto;
}

.box {
    position: absolute;
    width: 180px;
    height: auto;
    padding: 10px;
    background-color: #333;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    box-sizing: border-box;
}

.center-image {
            position: absolute;
            transform: translate(0, 0);
            width: 300px; /* Adjust size as needed */
            height: 300px; /* Keep aspect ratio, or use auto for height */
            border-radius: 50%; /* Make it circular if the image is square */
            object-fit: cover; /* Ensures the image fits within the circle */
            z-index: 10; /* Ensure it sits above other elements */
        }
        

.box .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulse 6s infinite;
}

/* Arrow from Box 1 to Box 2 */


.box:nth-child(1)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 50%;
    left: 100%;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: 0% 50%;
}

.box:nth-child(2)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 100%;
    left: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: 0% 50%;
}

.box:nth-child(3)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 100%;
    left: 35%;
    transform: translateY(-50%) rotate(120deg);
    transform-origin: 0% 50%;
}

.box:nth-child(4)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 100%;
    left: 0%;
    transform: translateY(-50%) rotate(135deg);
    transform-origin: 0% 50%;
}

.box:nth-child(5)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 0%;
    left: 0%;
    transform: translateY(-50%) rotate(200deg);
    transform-origin: 0% 50%;
}

.box:nth-child(6)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 0%;
    left: 15%;
    transform: translateY(-50%) rotate(225deg);
    transform-origin: 0% 50%;
}

.box:nth-child(7)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 0%;
    left: 50%;
    transform: translateY(-50%) rotate(285deg);
    transform-origin: 0% 0%;
}

.box:nth-child(8)::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 50px;
    border-color: transparent transparent transparent #fff;
    top: 0%;
    left: 75%;
    transform: translateY(-50%) rotate(320deg);
    transform-origin: 0% 0%;
}



/* Positioning for 8 boxes in a larger circle to avoid overlap */
.box:nth-child(1) { top: 10%; left: 50%; transform: translate(-50%, -50%); } /* Top */
.box:nth-child(2) { top: 30%; left: 85%; transform: translate(-50%, -50%); }
.box:nth-child(3) { top: 50%; left: 95%; transform: translate(-50%, -50%); } /* Right */
.box:nth-child(4) { top: 70%; left: 85%; transform: translate(-50%, -50%); }
.box:nth-child(5) { top: 90%; left: 50%; transform: translate(-50%, -50%); } /* Bottom */
.box:nth-child(6) { top: 70%; left: 15%; transform: translate(-50%, -50%); }
.box:nth-child(7) { top: 50%; left: 5%; transform: translate(-50%, -50%); } /* Left */
.box:nth-child(8) { top: 30%; left: 15%; transform: translate(-50%, -50%); }

/* Pulse animation with staggered delays for a clockwise effect */
.box:nth-child(1) .content { animation-delay: 0s; }
.box:nth-child(2) .content { animation-delay: 3s; }
.box:nth-child(3) .content { animation-delay: 6s; }
.box:nth-child(4) .content { animation-delay: 9s; }
.box:nth-child(5) .content { animation-delay: 12s; }
.box:nth-child(6) .content { animation-delay: 15s; }
.box:nth-child(7) .content { animation-delay: 18s; }
.box:nth-child(8) .content { animation-delay: 21s; }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

#foreverever {
    display:none;
}

/* Responsive styling */
@media screen and (max-width: 768px) {
    .circle-container {
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    #timetreepic {
    display:none;
}

    
    #foreverever {
        display:flex;
    }

    .box {
        position: relative; /* Remove absolute positioning on mobile */
        width: 90%;
        margin: 10px 0;
        transform: none !important;
        left: 0 !important;
        top: 0 !important;
    }
     .box:nth-child(1)::after,
    .box:nth-child(2)::after,
    .box:nth-child(3)::after,
     .box:nth-child(5)::after,
    .box:nth-child(6)::after,
    .box:nth-child(7)::after,
    .box:nth-child(8)::after,
    .box:nth-child(4)::after {
        display: none; /* Hide the arrow on mobile */
    }
}

/* General Styles */
.timeline-container {
    position: relative;
    width: 400px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.timeline-label {
    position: absolute;
    top: 10px; /* Position at the top of the timeline */
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    z-index: 10; /* Ensure the label is on top */
}

.wavy-line {
    position: absolute;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #fff 25%, transparent 25%) repeat-y;
    background-size: 100% 40px;
}

.central-burst {
    position: absolute;
    width: 0;
    height: 0;
    background-color: #ff0000;
    border-radius: 50%;
    animation: burst 1s forwards;
    animation-iteration-count: 1;
    z-index: 9; /* Ensure the burst is behind the label but in front of the line */
}

.item {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #ffcc00;
    border-radius: 50%;
    animation: destroy 5s linear forwards;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: #333;
    font-weight: bold;
    z-index: 1; /* Ensure the dots are below the label */
}

/* Position the items to touch the wavy line */
#item1 { top: 60px; left: calc(50% - 22px); animation-delay: 1.5s; }
#item2 { top: 160px; right: calc(50% - 22px); animation-delay: 2s; }
#item3 { top: 260px; left: calc(50% - 22px); animation-delay: 2.5s; }
#item4 { top: 360px; right: calc(50% - 22px); animation-delay: 3s; }
#item5 { top: 460px; left: calc(50% - 22px); animation-delay: 3.5s; }
#item6 { top: 560px; right: calc(50% - 22px); animation-delay: 4s; }

/* Central burst animation */
@keyframes burst {
    0% { width: 0; height: 0; opacity: 1; }
    50% { width: 100px; height: 100px; opacity: 0.8; }
    100% { width: 400px; height: 400px; opacity: 0; }
}

/* Destruction animation */
@keyframes destroy {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0); }
}

/* Responsive Adjustments */

/* Medium Screens (Tablets) */
@media (max-width: 768px) {
    .timeline-container {
        width: 300px;
        height: 500px;
    }

    .item {
        width: 30px;
        height: 30px;
        font-size: 0.7em;
    }

    #item1 { top: 50px; left: calc(50% - 17px); }
    #item2 { top: 140px; right: calc(50% - 17px); }
    #item3 { top: 230px; left: calc(50% - 17px); }
    #item4 { top: 320px; right: calc(50% - 17px); }
    #item5 { top: 410px; left: calc(50% - 17px); }
    #item6 { top: 500px; right: calc(50% - 17px); }
}

/* Small Screens (Mobile Devices) */
@media (max-width: 480px) {
    .timeline-container {
        width: 200px;
        height: 400px;
    }

    .item {
        width: 20px;
        height: 20px;
        font-size: 0.6em;
    }

    #item1 { top: 40px; left: calc(50% - 12px); }
    #item2 { top: 110px; right: calc(50% - 12px); }
    #item3 { top: 180px; left: calc(50% - 12px); }
    #item4 { top: 250px; right: calc(50% - 12px); }
    #item5 { top: 320px; left: calc(50% - 12px); }
    #item6 { top: 390px; right: calc(50% - 12px); }
}

/* NPC container styles */
.npcs-container {
    display: flex;
    gap: 1px; /* Space between columns */
}

.npcs-column {
    gap: 20px;
    border-radius: 10px;
    padding: 5px;
}

.ally-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.ally-button {
    background-color: rgba(100, 100, 100, 0.5);
    padding: 10px 10px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.ally-button a {
    color: black;
}

.ally-button:hover {
    background-color: rgba(100, 100, 100, 0.8);
}

/* Allies */
#allies {
    background: linear-gradient(135deg, rgba(53, 94, 59, 0.8) 25%, rgba(39, 74, 47, 0.8) 75%); /* Gradient effect */
    border-radius: 50px;
}

#allies h2,
#neutral h2,
#courts h2,
#villains h2 {
    background: none;
}

#neutral {
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.9) 25%, rgba(44, 62, 80, 0.9) 75%); /* Gradient effect */
    border-radius: 50px;
}

#villains {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9) 25%, rgba(88, 0, 0, 0.9) 75%); /* Deep dark blood red gradient effect */
    border-radius: 50px;
}

#team_a {
    background-color: #355E3B;
    background: linear-gradient(135deg, #355E3B 25%, #2E4D2E 75%);
    color: white;
    border: 1px solid white;
    border-radius: 50px;
  padding: 5px;
}

#team_ab {
    background-color: #355E3B;
    background: linear-gradient(135deg, #355E3B 25%, #8B4513 75%);
    color: white;
    border: 1px solid white;
    border-radius: 50px;
  padding: 5px;
}

#team_b {
    background-color: #8B4513; /* Brown color */
    background: linear-gradient(135deg, #8B4513 25%, #6A3210 75%); /* Textured look */
    color: white;
    border: 1px solid white;
    border-radius: 50px;
  padding: 5px;
}

#team_c {
    background-color: rgba(70, 130, 180, 1); /* Base color */
    background: linear-gradient(135deg, rgba(70, 130, 180, 1) 25%, rgba(100, 149, 237, 1) 75%); /* Magical gradient */
    color: white;
    border: 1px solid white;
    border-radius: 50px;
  padding: 5px;
}

#noinv {
    background-color: rgba(0, 0, 0, 1); /* Base color */
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 25%, rgba(100, 100, 100, 1) 75%); /* Magical gradient */
    color: white;
    border: 1px solid white;
    border-radius: 50px;
  padding: 5px;
}

#moon {
    background: linear-gradient(135deg, rgba(25, 25, 112, 0.9) 25%, rgba(192, 192, 192, 0.9) 75%); /* Mystical moon gradient */
    border-radius: 50px;
    border: 2px solid rgba(240, 230, 140, 0.5); /* Subtle moonlight yellow border */
    color: #F0E68C; /* Pale Moonlight text */
}

#blood {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9) 25%, rgba(68, 0, 0, 0.9) 75%); /* Deep dark blood red gradient */
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.5); /* Subtle white border */
    color: #FF6347; /* Tomato red text */
}

#creation {
    background: linear-gradient(135deg, rgba(75, 0, 130, 0.8) 25%, rgba(148, 0, 211, 0.8) 75%); /* Artistic gradient */
    border-radius: 50px;
    border: 2px solid rgba(255, 215, 0, 0.5); /* Subtle gold border */
    color: #FFD700; /* Bright gold text */
}

#suns {
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.8) 25%, rgba(255, 215, 0, 0.8) 75%); /* Sunburst gradient */
    border-radius: 50px;
    border: 2px solid rgba(139, 0, 0, 0.5); /* Subtle dark red border */
    color: #8B0000; /* Deep red text */
}


#mobile-only {
  display:none;
}

#items, #quests {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    padding: 5px 10px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(45deg, #ccc, #888);
    position:relative;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    margin: 10px;
    width:auto;
    
}

#items::before, #quests::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(white, rgba(255, 255, 255, 0));
    transform: rotate(30deg);
    transition: all 0.5s ease;
}

#items:hover::before, #quests:hover::before {
    top: -100%;
    left: 100%;
}

#team_a_display, #team_b_display, #team_c_display {
    display:flex
}

#team_a_display.show, #team_b_display.show, #team_c_display.show {
    display:none;
}

.ally-buttons a[href="#allies"] {
    background: linear-gradient(135deg, rgba(53, 94, 59, 0.8) 25%, rgba(39, 74, 47, 0.8) 75%); /* Gradient effect */
    color: white;
}

.ally-buttons a[href="#neutral"] {
    background: linear-gradient(135deg, rgba(52, 73, 94, 0.9) 25%, rgba(44, 62, 80, 0.9) 75%); /* Gradient effect */
    color: white;
}

.ally-buttons a[href="#villains"] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9) 25%, rgba(88, 0, 0, 0.9) 75%); /* Deep dark blood red gradient effect */
    color: white;
}

.npcs-column h2 {
    color: #ffcc00;
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}

.npcs-column h3 {
    color: #ffcc00;
    font-size: 20px;
    text-align: center;
    margin-bottom: 15px;
}

.npc-location {
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
}

/* Node container styles */
.node-container p {
    padding: 5px;
    text-align: left;
}

.back-button {
    background-color: #333;
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.back-button:hover {
    background-color: #555;
}

/* Specific styles for title cards and events */
.title-card,
.small-event,
.world-event {
    width: auto;
    height: 100%;
    margin: 5px 0;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #333;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    align-content: center;
    cursor: pointer;
    justify-content: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.small-event,
.world-event {
    border-radius: 50px;
    border: 2px dotted #fff;
}

.concurrent-events {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    gap: 5px;
    border: 2px dotted #fff;
    border-radius: 30px;
    padding: 10px;
}

.concurrent-events > .title-card,
.concurrent-events > .small-event {
    width: auto; /* Ensuring space around items */
    height: 100%;
    margin: 1px;
}

.title-card img {
    position: relative;
    width: 200px; /* Adjust width to match the specified shape */
    height: 150px; /* Adjust height to match the specified shape */
    margin: 20px 0;
    background: red;
    border-radius: 50% / 10%;
    color: white;
    text-align: center;
    text-indent: 0.1em;
}

.title-card img:before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: -5%;
    left: -5%;
    background: inherit;
    border-radius: 5% / 50%;
}

.title-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.adventure-detail {
    display: none;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin: 0px;
    color: black;
}

.adventure-detail p {
    text-align: left;
    padding-bottom: 5px;
    color: black;
}

.adventure-detail h2 {
    margin-top: 0;
}

.adventure-detail img {
    width: 60%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

.small-event {
    background-color: rgba(224, 247, 250, 0.9);
    border-color: #26c6da;
    color: black;
}

.world-event {
    background-color: rgba(255, 224, 178, 0.9);
    border-color: #ff9800;
    color: black;
}

#small-event {
    background-color: rgba(224, 247, 250, 0.9);
    border-color: #26c6da;
    border-radius: 30px;
    color: black;
}

#small-event p {
    color: black !important;
}

#world-event {
    background-color: rgba(255, 224, 178, 0.9);
    border-color: #ff9800;
    border-radius: 30px;
}

#world-event p {
    color: black !important;
}

/*Responsive adjustments */
@media screen and (max-width: 768px) {
    .shell {
        width: 100%;
    }
  #mobile-only {
    display:flex;
    flex-direction: column;
  }
  .character-container {
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: center;
  }

    .node-container {
        padding-bottom: 80px; /* Add more padding for mobile devices */
    }

    .menu-banner {
        padding: 0px;
        width: 100%;
        margin-left: 0px;
        z-index: 1000;
        font-size: 12px !important;
        align-items: baseline;
        justify-content: stretch;
    }
  .dropdown-content,
  .dropbtn a {
    z-index: 900;
    font-size: 12px !important;
  }
  
    .menu-banner a,
    .menu-banner.dropdown.dropbtn  {
        margin: 5px;
        border-radius: 50%;
        padding-right: 2px;
        padding-left: 2px;
        
    }
  
    #allies.lore-banner,
    #neutral.lore-banner,
    #villains.lore-banner  {
    background: none;
    border:none;
  }

    .ally-button {
        background-color: rgba(100, 100, 100, 0.5);
        color: #fff;
        padding: 2px 5px;
        font-size: 12px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .team-character,
    .npc-box,
    .location-box {
        flex-direction: column;
        align-items: center;
        grid-template-columns: 1fr;
    }

    .npc-box img,
    .team-character img,
    .circle-container img,
    .location-flex img  {
        margin-bottom: 20px;
    }

    .npc-info p,
    .npc-info h3,
    .location-flex p,
    .character-info p,
    .character-info h3 {
        font-size: 12px;
        width:90%;
    }
    
    #mp3 .npc-info p,
    #mp3 img,
    #mp3 .npc-info {
        width:100%!important;
        align-self:center;
    }
    

    .npcs-column h2,
    .lore-banner h2,
    .legend h3  {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .lore-chapter,
    .team-container,
  .locations-container,
    .npc-box,
    .location-flex,
    .npc-location,
    .moon-location,
    .all-nodes,
    .concurrent-events {
        grid-template-columns: 1fr;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

    .lore-chapter img {
        width: 100%;
        height: auto;
        margin: 0 auto 20px auto;
    }
  #homelink {
    font-size: 18px;
    padding-right:10px;
  }
    .all-players {
        grid-template-columns: repeat(2, 1fr); /* Keep two columns */
        gap: 10px;
    }

    .all-players > :nth-last-child(1):nth-child(odd) {
        grid-column: span 2; /* Keep the last item spanning both columns */
    }
}

@media screen and (max-width: 480px) {
    .shell {
        width: 90%;
    }
  #homelink {
    font-size: 18px;
    padding-right:10px;
  }
    .menu-banner a,
    .menu-banner.dropdown.dropbtn  {
        margin: 5px;
        padding: 2px;
        font-size: 12px !important;
        align-content: center;
        align-items: baseline;
    }
    .menu-banner {
        padding-left: 0px;
        margin-left: 0px;
        width: 100%;
      font-size: 12px;
    }

    .node-container {
        padding-bottom: 60px; /* Further increase padding for smaller mobile devices */
    }

    .legend ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .legend ul li {
        margin: 10px 0; /* Adjust margin for smaller screens */
        width: 50%;
        font-size: 12px;
    }

    .team-character {
        flex-direction: column;
        align-items: center;
    }

    .npc-box{
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .npc-box img,
    .team-character img,
  .location-box img,
  .circle-container img,
  #mp2 img{
        margin-bottom: 15px;
        align-items: center;
    }

    .lore-chapter,
    .team-container,
  .locations-container,
  .location-flex,
    .npc-location,
    .moon-location,
    .all-nodes,
    #mp {
        flex-direction: column;
        justify-content: center;
        text-align: left;
        width: 100%; /* Set to 100% of their grid cell */
        height: auto; /* Adjust height to maintain aspect ratio */
        box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
        padding: 0.5rem; /* Optional: Add some padding for better aesthetics */
    }
  
  .location-flex,
   .location-box  {
    align-items:center;
    justify-items: center;
  }

    .concurrent-events {
        display: block; /* Stack events vertically for very small screens */
    }

    .concurrent-events > .title-card,
    .concurrent-events > .small-event,
    .lore-chapter,
    .team-container,
    .location-box,
    .location-flex,
    .npc-box,
    .npc-location, 
    .moon-location,
    #mp2,
    #mp3 {
        width: 100%; /* Set to 100% of their grid cell */
        height: auto; /* Adjust height to maintain aspect ratio */
        box-sizing: border-box; /* Ensure padding and border are included in the element's total width and height */
        
        border-radius: 10px; /* Optional: Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Box shadow for better visual */
        flex-direction:column;
        grid-template-columns: 1fr;
    }
    
    #mp3 img,
    #mp3 .npc-info {
        width:100%!important;
        align-self:center;
    }

    .title-card,
    .small-event,
    .world-event {
        padding-bottom: 15px;
    }

    .lore-chapter img {
        width: 100%;
        height: auto;
        margin: 0 auto 15px auto;
    }

    .all-players {
        grid-template-columns: 1fr; /* Change to one column */
        gap: 10px;
    }

    .all-players > :nth-last-child(1):nth-child(odd) {
        grid-column: auto; /* Automatically adjust column */
    }

    .player-box {
        max-width: 100%; /* Allow full width on small screens */
    }

    .about-me-banner img,
    .node-container img {
        width: 70%; /* Slightly larger images for better visibility */
    }

    .playercontainer,
    .playercontainer-dean {
        grid-template-columns: 1fr; /* Stacked layout */
        gap: 5px;
    }
}