@font-face {
    font-family: 'Final Fantasy'; 
    src: url('fonts/finalf.ttf') format('truetype'); 
    src: url('fonts/finalf.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal;  

}

body {
    background: url("../Images/Endwalker_Moon.png") no-repeat fixed center / cover;
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
	cursor: url('/cursor.cur'), auto;
}

a, button, .clickable {
  cursor: url('/pointer.cur'), pointer;
}

ul li{list-style-type: none;color:red; font:MS PGothic;}


h1 {color: aqua;}
h2 {color: aqua;
	text-decoration:underline;}
	
a:link, a:visited {font-family: Arial; color: red; text-decoration:none;} 
a:hover  {color: magenta;}
a:active {color: pink;} 




/* ----------------------------------------------NAV BAR----------------------------------------------- */
.nav-wrapper {
  display: flex;
  gap: 10px;
}

/* Grid-based Nav Container */
.nav {
    display: grid;
    grid-template-columns: 1fr;         /* Single column */
    width: 195px;
    margin-top: 10px;
    position: sticky;
    top: 0;
    float: left;
    text-align: center;
    background: transparent;            /* Background only on individual boxes */
	
}


.nav a {
    color: #red !important;
    font-weight: bold;
    font-size: 18px;
	
}




/* Each "row" section (replaces <tr><td>) */
.nav > div {
    border: 3px solid #82b9fd;
    background: linear-gradient(to right, #000b8a, #000000);
    box-sizing: border-box;
}

/* Individual section styling hooks */
.nav1 {border-bottom:none !important; padding-top:10px;}
.nav2 {border-bottom:none !important;}
.nav3 {border-bottom:none !important;}
.nav4 {}
.nav5 {border: none !important;     background: transparent !important;}

.nav1 li {    font-size: 18px;}


.song-title {
    margin-bottom: 1px;
    overflow: hidden;
    color: red;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
    font-style: italic;
}

#songTitle {
    display: inline-block;
    padding-left: 100%;
    animation: scroll 20s linear infinite;
    color: white;
}

.music-player {
    text-align: center;
    padding: 5px;
    padding-left: 5px;
    width: 195px;
    margin-left: auto;  
    margin-right: auto; 
    float: left; 
    position: relative; 
}

.controls {
    margin-top: 0px;
    text-align: left;
}

.navCrystal img {
    max-height: 120px;
    max-width: 160px;
    display: center;
    margin-bottom: 5px;
    border: none !important;
}

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

.top-nav {
  flex: 1;
  background: linear-gradient(to right, #000b8a, #000000);
  padding: 10px 20px;
  border: 3px solid #82b9fd;
  box-sizing: border-box;
}

.nav-box {
  width: 200px;
  background: linear-gradient(to right, #000000, #000b8a);
  border: 3px solid #82b9fd;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Alegreya', serif;
}

.nav-box p {
  color: #f7b2eb;
  font-weight: bold;
  margin: 5px 0;
}

.nav-box ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav-box ul li {
  margin: 0 0;
}

.nav-box a {
  color: orange;
  text-decoration: underline;
  font-weight: bold;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}

.social-icons img {
  width: 40px;
  height: 40px;
}


.moogle-box {
  margin-left: auto;
}



.whats-new-grid {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: 0px;                       
  color: #f05ea3fc !important;
  list-style-type: none;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
}

.whats-new-box {


  box-sizing: border-box;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top:  10px;
  padding-bottom: 10px;
}

.whats-new-box p {
  color: #f7b2eb;
  font-weight: bold;
  margin: 2px 0;
}

.whats-new-box ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.whats-new-box ul li {
  margin: 0 0;
   color: #f05ea3fc !important;
  
}

.whats-new-box a {
  color: orange;
  text-decoration: underline;
  font-weight: bold;
}




.nav-box.whats-new-box .whats-new-grid li {
    color: #f05ea3fc !important;
}


.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000b8a;
    border: 2px solid #82b9fd;
    padding: 5px 0;
    min-width: 120px;
    z-index: 1000;
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: #f7b2eb !important;
    text-decoration: none;
    display: block;
    padding: 8px 12px;
    font-family: 'Alegreya', serif;
}

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

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


.top-nav {
    background: linear-gradient(to right, #000b8a, #000000);
    padding: 10px 20px;
    border-bottom: 3px solid #82b9fd;
    border-left: 3px solid #82b9fd;
    border-right: 3px solid #82b9fd;
    border-top: 3px solid #82b9fd;
    max-width: 1500px;
    box-sizing: border-box;
}



.logo-and-nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

.top-nav .siteLogo {
    width: 250px;
    height: auto;
}

.top-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
	gap: 50px;
}

.top-nav-list li {
    margin: 0 10px;
}

.top-nav-list a {
    color: #f7b2eb !important;

    font-weight: bold;
    font-family: 'Arial', serif;
    font-size: 16px;
}


.siteLogo {
	width: 40%;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0; 
    padding: 5px; 
    border: 3px solid #82b9fd;
    background: linear-gradient(to right, #000b8a, #000000 50%, #000b8a);
    font-weight: bold !important;
    flex-wrap: nowrap; 
}


.header a {
	color: #f7b2eb !important;
	text-decoration: underline !important;

}

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


/* Mobile-Friendly Adjustments */
@media only screen and (max-width: 600px) {
    .header {
        flex-direction: column;  
        text-align: center;  
    }
}

.left-section, .left-center-section, .center-section, .right-center-section, .right-section, .left-left-center, 
.right-right-center, {
    flex: 1;                        
    text-align: center;             

}


.center-section {
    display: flex;                 
    justify-content: center;       
    align-items: center;  
    flex: 0 0 40%;                 
}


.right-section {
    text-align: center;       
	
}

.PageThingIdk {
	text-align: center;
	font-size: 14px;
}


.blog-content {
  margin-left: 270px;
  margin-right: 210px;
  padding: 8px 16px;
  background: linear-gradient(to bottom, #00062fde, #1b2670bf);
  border: 5px solid; /* Just the width — no color */
  border-image: linear-gradient(to bottom, #072e5e, #326cb4) 1;
}


.content, 
.contentX, 
.aboutContent, 
.blogFooter {
    margin-left: 180px;
    margin-right: 180px;
	padding: 8px 16px;
}

.blogContent{
	margin-left: 120px;
    margin-right: 100px;
	padding: 8px 16px;

}

.blogHead {
    margin: 0 auto;
	max-width: 1200px;
	padding: 8px 0px 8px 0px;	
	display: flex;
    align-items: center; /* vertically center image and text */
}

.blogImg {
	width:300px;
	height:auto;
	border: 1px solid #072e5e7a;
}


@media only screen and (max-width: 600px) {
    .content, .contentX, .aboutContent, .blogFooter {
        margin: 0;  
        padding: 10px; 
    }
}

.logo {
    display: flex;            
    justify-content: center;  
    margin: 20px 0;         
}


.content p {
text-align:center;	
}

.contentTable {
	padding: 8px 16px;
	background: linear-gradient(to bottom, #00062fde, #1b2670bf);
	border: 5px solid; /* Just the width — no color */
	border-image: linear-gradient(to bottom, #072e5e, #326cb4) 1;
	width:auto;
	color:Aqua; 
	margin: auto;
}

.contentTable span {
	
display:block;
color: white;
}

.contentTable img {
text-align: center !important;	
max-width: 75px;
height: auto;
}

.contentTable a {
	color: #ff80de !important;
	font-weight: bold;
	}





.aboutContent p, h1, h2 {
padding-left:20px;
}




.imageBannerCenter {
    width: 80px;
    height: 80px;
	margin-left: 15px;
    margin-right: 15px;
}


.mobileNav {
    display: none;
    width: 100%;
    opacity: 0.9;

    position: sticky;
    top: 0;
}

/* For mobile screens */
@media only screen and (max-width: 600px) {
    .mobileNav {
        display: block;  /* Make the mobile nav visible on smaller screens */
        background-color: #333;
        color: white;
    }
}

	
	
	
.linkList {

display:flex;
flex-wrap: wrap;	
margin:0;
	
}


@media only screen and (max-width: 600px) {
    .nav { display: none; }
    .mobileNav { 
        display: block; 
        width: 100%;  
        position: sticky; 
        top: 0;
    }
    .content, .footer, .blogFooter { 
        width: 100%; 
        margin: 0; 
        padding: 10px;
    }
    .contentBar { display: none; }
    li { display: block; }
    .sidebar, .left-section, .right-section { 
        width: 100%; 
        float: none; 
    }
    .gallery { 
        width: 100%; 
        margin: 0; 
    }
    .header { 
        flex-direction: column; 
        padding: 10px;
    }
    .flex-center {
        flex-direction: column;
    }
}


/* @media only screen and (max-width:1200px){
.nav {display:none;}
.mobileNav  {display:inline; width: 100%;  opacity: 0.9; transition: 0.1s; position: sticky; top:0;}
.content {width:100%; margin:0;}
.footer, .blogFooter {margin:0;}
li {display:inline;}
.contentBar {display:none;}
} */





.contentBar {
	float: right;
	width: 180px;
	padding: 4px;
	border: 3px solid #82b9fd;
	position: sticky;
    background: linear-gradient(to right, #000000, #000b8a);
}

.contentBar ul {
	text-align:center ;
	width:180px;
	padding: 0px;
	list-style-type:none;
}


div.gallery {
  margin: 10px;
  width: 350px;
  float:left;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.clearfix{
    margin-left: 170px;
    margin-right: 170px;
}





.thumbnail {
  width: 100px; 
  height: auto;
  transition: transform 0.1s ease;
}

.thumbnail:hover {
  transform: scale(1.1); 
}


.lightbox {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  text-align: center;
  overflow: hidden;
}


.lightbox:target {
  display: flex;
}


.lightbox img {
  max-width: 90%;
  max-height: 90%;
}


.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: white;
  font-size: 50px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}








.TitleBanner {
    font-size: 60px;
    text-align: center;
    margin: 0;  
    padding: 10px 0; 
    color: aqua; 
    font-family: 'Final Fantasy', sans-serif;
    font-weight: 400; 
    letter-spacing: 2px; 
}


.enterButton {
	border-bottom: none;
	text-align: center;
	margin-top: 45vh;
}
.centre {
	margin-left:auto;
	margin-right:auto;
}
.footer {
	margin-left: auto;
	padding: 8px 16px;
	text-align: center;
}

.footer img[src$=".gif"] {
	opacity: 80%;
}

/* For mobile devices */
@media only screen and (max-width: 600px) {
    .footer {
        padding: 10px 20px;
        font-size: 14px;  /* Make text smaller for mobile */
    }

    .footer img {
        width: 100%;  /* Ensure footer images scale well on mobile */
        height: auto;
    }
}



.blogFont {
	color: pink;
	font-family:Times New Roman;
	font-size:18px;
	margin-left: 180px;
	margin-right: 180px;
}

.blogFont img{
	width:600px;
	height:auto;
	display: block;
	margin-top: 10px; 
	margin-bottom: 10px;
	margin-left:auto;
	margin-right:auto;
}
		   
p {color: aqua;}

.ff8guide {color: pink;
		   font-family:Times New Roman;
		   font-size:17px}
		   

.noborder td, tr {
	
border:none !important;
text-align: left !important;
}


	


.ff8HomeImg {
	width:350px;
	height:auto;
}



.bordered {
    border: 5px solid white; 
    padding: 5px; 

}



.ff8guideHeading {
	margin-left: 180px;
	margin-right: 180px;
	padding: 8px 16px 8px 16px;	
	display: flex;
    align-items: center; /* vertically center image and text */
}




.sidebar {
    width: 10%;
    float: right;
    background-color: #f4f4f4;
    padding: 15px;
    border: 1px solid #ddd;
}



.disc-container {
    display: flex;             
    justify-content: center;     
    flex-wrap: wrap;             
    gap: 10px;                    
    margin-bottom: 5px;          
}

.ff8gallery img {
    max-width: 100%;      
    height: auto;                
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); 
}

div.ff8gallery {
  margin: 0; 
  max-width: 100%;
  float: left;
}



/* Ensure label and description stay on the same line */
.label, .description {
    display: inline;      /* Makes sure they appear side by side */
	

}

.label {
    font-weight: bold;
    color: #66FF66;  
    margin-right: 5px; 
    white-space: nowrap; 
}

.description {
    color: white;  
    white-space: nowrap; 
}


button {
    margin: 5px;
    padding: 0px;
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    font-size: 19px;
}


button:focus {
    outline: none; /* Remove outline on button click */

}



@keyframes scroll {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}


.intro {
  display: flex;
  gap: 20px;
  background: 
    linear-gradient(to bottom right, #00062fde, #1b2670bf), 
    url("../Images/snow2.gif"); 
  background-repeat: repeat;
  border: 5px solid #072e5e;
  border-radius: 12px;
  padding: 20px;
  align-items: flex-start;
  max-width: 1000px;
  margin: auto;
  color: white;
  box-shadow: 0 0 12px #000000aa;
}


.intro .logo img {
  max-width: 300px;
  height: auto;
}

.intro .intro-text p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
  text-align: left;
}

.logo {
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: center;     /* center horizontally */
  gap: 8px;                /* optional spacing between images */
}





.tonberryFooter {

	width: 700px;
	height: auto;
	text-align: center;
}


.green-text {
color: #6aed6a;
}

.red-text {
color: #f9171f;
}

.Oooh {
color: #ff3fb0;
}

/* --------------------------------------------------FEATURED BOX------------------------------------------------------- */
.Featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 20px;
  padding: 20px;
  color: white;
  margin-bottom: 20px;
  margin: 0 auto 20px auto; /* center horizontally */
  max-width: 1500px;
}


.box {
    padding: 15px;
    position: relative; 
    background-color: #333;
	border: 3px solid #82b9fd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to top, #2842fb, #000000);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.box img {
    max-width: 55%;
    height: auto;
    margin: 10px 0;
}

.box h2 {
    font-size: 1.5em;
    color: #8bff8b;
    margin-bottom: 10px;
}

.box p {
    font-size: 1em;
    color: lightgray;
    margin-top: auto;
    padding-bottom: 10px;
}

/* Mobile-Friendly Adjustments */
@media only screen and (max-width: 600px) {
    .Featured {
        justify-content: center;  /* Center the boxes on mobile */
        margin: 0 10px;  /* Reduce margin for mobile */
    }

    .box {
        width: 100%;  /* Make each box take 100% width on mobile */
        margin-bottom: 20px;  /* Add space between boxes */
    }

    .box img {
        width: 80%;  /* Scale the image larger on mobile */
        margin: 10px 0;
    }

    .box h2 {
        font-size: 1.2em;  /* Adjust the font size for h2 */
    }

    .box p {
        font-size: 0.9em;  /* Adjust font size for paragraphs */
    }
}




html {
  scroll-behavior: smooth;
}




/*------------------EXTRAS UI + BLOG UI------------------*/

.Extras {
    display: flex;
    justify-content: space-between;
    margin-left: 100px; 
    margin-right: 100px;
    padding: 20px;
    color: white;
    margin-bottom: 20px;
}

.left-box2 {
    position: relative; 
    width: 65%; 
    padding: 15px;
    background-color: #333;
    border: 3px solid #82b9fd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to top, #00062f, #000000);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 500px; 
    overflow: auto; 
}

.left-box2 img {
    width: 50%; 
    height: auto;
    margin: 10px 0;
}

.left-box2 h2 {
    font-size: 1.5em;
    color: #8bff8b;
    margin-bottom: 10px;
}

.left-box2 p {
    font-size: 1em;
    color: lightgray;
    padding-bottom: 10px;
    margin-top: auto;
    overflow: auto; 
}

.right-box2 {
    width: 30%; 
    padding: 15px;
    background-color: #333;
    border: 3px solid #82b9fd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to top, #06049d, #000000);
    height: 500px; 
    text-align: center;
}

.right-box2 ul {
    list-style-type: none;
    padding: 0;
    color: #8bff8b;
    text-align: center; 
}

.right-box2 li {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.right-box2 li:hover {
    color: #ffd700;
}

.topic-content {
    display: none;
}


.Extras:not(:has(:target)) #overview {
    display: block;
}


#overview:target,
#SystemStructure:target,
#MemoryMap:target,
#ScriptLanguage:target,
#CollisionSystem:target,
#ZoneSystem:target,
#ImageDrawingSystem:target,
#VRAM:target,
#ImageDrawingSequence:target,
#ImageDrawingProcessing:target,
#Lighting:target,
#StreamingSystem:target,
#Tools:target,
#DataManagement:target,
#Music:target,
#Stellarium:target,
#SeaSky:target,
#Archive:target,
#MGS2Doc:target,
#aerith:target {
    display: block;
}

.blog-desc {
    position: relative; 
    width: 80%; 
    padding: 15px;
    background-color: #333;
    border: 3px solid #82b9fd;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to top, #00062f, #000000);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 500px; 
    overflow: auto; 


}


.blog-grid {
  display: grid;
  grid-template-columns: 6.5fr 3.5fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "myArea rightCol" "rambles rambles";
  height: 1200px;
  width: auto;
  box-sizing: border-box;

}

.blog-grid > div {
  background: linear-gradient(to top, #00062fde, #000000);
  color: #000;
  font-size: 16px;
  text-align: center;
}

.rightCol {
  display: grid;
  grid-template-rows: 6.5fr 2fr 2.5fr;
  grid-template-areas: "item2" "item3" "item4";
  height: 100%;
  grid-area: rightCol;
  padding: 0;
  box-sizing: border-box;

}

/* General grid items */
.item1, .item2, .item3, .item4 {
  color: #FF66CC;
  box-sizing: border-box;
  border: 7px solid #072e5e;  /* Border on top of item3 */
  
}

.item1 {
  display: grid;
  grid-template-rows: 8.7fr 2.5fr;
  grid-template-areas:
    "item1a"
    "arttt";
  background: linear-gradient(to top, #00062f, #000000);
  color: #fff;
  box-sizing: border-box;
  border: 7px solid #072e5e;
  height: 100%; /* ensure it fills its parent */
  overflow: hidden;      /* Prevent it from expanding */
}

.item1a {
  grid-area: item1a;
  overflow-y: auto;
  border-bottom: 7px solid #072e5e;

}

.item1a h2 {
  color: #1cf6ba;
	
}

.arttt {
  grid-area: arttt;
  padding: 10px;
  overflow: hidden;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  text-align: left;
  gap: 20px; /* This applies only between .arttt-text and .arttt-images */
}

.arttt-text {
  flex: 1;
}

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

.arttt li {
  font-size: 14px;
  line-height: 1.5;
  color: #cfcfcf;
  font-family:Times New Roman;
  text-align: center;
  font-style: italic;
  font-size: 15px;
}
.arttt-images {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px; 
  align-items: center;
}

.arttt-images img {
  max-height: 140px;
  width: auto;
  display: block;
  margin-bottom: 5px;
}


.help-image {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trigger-image:hover ~ .help-image {
  visibility: visible;
  opacity: 1;
}



.item2 {
  border-left: 0px;
  overflow: hidden;
  padding: 1px;
}

.item3 {
border-top:0px;
border-left: 0px;
}

.item3 p {
  color: #1cf6ba;
}

.item3 h3 {
  color: #1cf6ba;
  text-align: center;
}

.item2 ul {
  list-style: none; /* Remove default bullet points */
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.item2 li {
  display: flex; /* Use flexbox to align elements horizontally */
  justify-content: space-between; /* Distribute space between title and date */
  margin-bottom: 5px; /* Space between list items */
}

.item2 a {
  display: flex;
  justify-content: space-between; /* Ensure space between title and date */
  width: 95%; /* Make sure the list item takes up the full width */
  padding: 0px 0px 0px 10px;
}

.item4 {
  color: #fff;
  border-top: 0px;
  border-left: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.item4 h3 {
  color: #1cf6ba;
  text-align: center;
}


.item5 {
  grid-column: span 2;  /* Span across both columns */
  grid-row: rambles;  /* Place in the "rambles" row */
  padding: 20px;
  background: linear-gradient(to top, #00062f, #000000);
  border: 7px solid #072e5e;
  border-top: none;
  color: #FF66CC;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  max-height: 500px;      /* Set your desired max height */
  overflow-y: auto;       /* Enable vertical scroll when content exceeds */
}

.item5 h1 {
  color: #1cf6ba;
  text-align: center;
}

.filters {
  display: flex;
  gap: 10px;
}

.filter-btn {
  background-color: rgb(5, 6, 45);
  border: 3px solid #AF40FF;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s, transform 0.2s ease-in-out;
  display: inline-block;
  width: 110px;
  text-align: center;
  margin: 5px;
  border-image: linear-gradient(45deg, #AF40FF, #5B42F3, #c60075) 1;
  transition: background-color 0.4s ease, border-image 0.4s ease, transform 0.2s ease-in-out;

}

.filter-btn:hover {
  transform: scale(1.05);
}


.filter-btn.active {
  border-image: linear-gradient(135deg, #00307b, #39e6fa, #1200ff) 1;
  color: #13ef00;
}

.most-recent {
  background-color: #120b4a;
  font-weight: bold;
}

.most-recent a:link, .most-recent a:visited {
  color: #23c671 !important;
}

.clicked {
  outline: 1px dashed #c40484;
  background-color: #1e003e;
}
.date {
  font-size: 0.9em;
  color: #b5ae57; 
}


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

#preview-box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  color: #FF66CC;
}

#blog-preview-content * {
  margin-bottom: 20px;
  color: #FF66CC !important;
}

#read-more-link {
  color: dodgerblue !important;
  text-decoration: none;
  font-weight: bold;
}

#read-more-link:hover {
  text-decoration: underline;
}

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






.blogHeading {
	background: linear-gradient(to right, #6c0073, #000000 50%, #6c0073);
    color: red;                /* Dark text color */
    padding: 10px 10px;         /* Space inside the box (top/bottom and left/right) */
    border: 2px solid #0ba364;  /* Blue border */
	max-width:20%;
	margin: auto;
    text-align: center;         /* Center the text */
	padding: 8px 16px 8px 16px;
}


.feedbackBox {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    border: 5px solid #9d0000;
    border-radius: 10px;
    background: linear-gradient(to top, #06049d, #000000);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.feedbackBox h1 {
    color: #00fdff;
}

.feedbackBox h3 {
    color: #00fdff;
	text-align: left;
	text-decoration: underline;
}


.feedbackBox label {
    font-weight: bold;
    display: block;
    margin: 15px 0 5px;
	color: white;
}

.feedbackBox li {
	text-align: left;
	color: #c5ffd5;
	font-weight: bold;
	
}
.feedbackBox input,
.feedbackBox textarea {
    width: 60%;
	padding-bottom: 5px;
    border: 5px solid #9d0000;
	background: #010629;
	color: #e73ce1;
	font-size: 18px;
}

.feedbackBox button {
    width: 100%;
    padding: 10px;
    color: #fff;
    background-color: #a7007c;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.feedbackBox button:hover {
    background-color: #218838;
}

.noteSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
}

.noteSection ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 80%; 
}

.noteSection .blackmage-img {
    width: 10%; 
    height: auto;
    object-fit: contain; 
    margin-left: 10px; 
}







::-webkit-scrollbar {
    width: 12px; 
}

::-webkit-scrollbar-thumb {
    background: #30e1da; 

}


::-webkit-scrollbar-track {
    background: #35000e; 

}




.image-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* or flex-end or center */
  margin-left: 160px;
  margin-right: 175px;
  background: linear-gradient(to bottom, #00062fde, #1b2670bf);
  border: 5px solid;
  border-image: linear-gradient(to bottom, #072e5e, #326cb4) 1;
  gap: 20px;
}

.gallery {
  width: calc(33.33% - 20px); /* 3 per row with spacing */
  text-align: center;
}



.description-box {

  padding: 10px;
  margin-top: 10px; 
  font-size: 1em; 
}


.thumbnail {
  width: 100%; 
  height: auto;
  transition: transform 0.1s ease;
}


.thumbnail:hover {
  transform: scale(1.1); 
}

.lightbox {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  text-align: center;
}


.lightbox:target {
  display: flex;
}


.lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  color: white;
  font-size: 60px;
  text-decoration: none;
  padding: 0 15px;
  cursor: pointer;
  user-select: none;
  transform: translateY(-50%);
  z-index: 1002;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.lightbox-nav.left {
  left: 20px;
}

.lightbox-nav.right {
  right: 20px;
}

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  color: white;
  font-size: 50px;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.horizontal-list {
  display: flex; 
  justify-content: space-between; 
  padding: 0; 
  margin: 0; 
  list-style-type: none; 
}

.horizontal-list li {
  flex: 1; 
  text-align: center; 
}

.picDescription {
color:#ff51d7;	
}

.photobox {
  width: 100%;
  padding: 15px;
  background-color: #333;
  border: 3px solid #82b9fd;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to top, #06049d, #000000);
  height: auto;
  text-align: center;
}

.photobox ul {
  list-style-type: none;
  padding: 0;
  color: #8bff8b;
  text-align: center;
  display: flex;
}

.photobox li {
  margin-bottom: 10px;
  font-size: 1.2em;
}

.photobox li:hover {
  color: #ffd700;
}

.lightbox-description {
  position: absolute;
  bottom: 45px; 
  left: 220px; 
  background: rgba(0, 0, 0, 0.5); 
  color: white; 
  padding: 15px; 
  font-size: 1.2em; 
  border-radius: 5px;
  max-width: 20%; 
  line-height: 1.5; 
  word-wrap: break-word; 
  text-align: left; 
}



.toggle-desc {
  position: absolute;
  top: 70px;
  right: 20px;
  color: red;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

.toggle-desc:hover {
  background: #3f3f3f;
}

#group-1, #group-2, #group-3, #group-4 {
  scroll-margin-top: 100vh; 
}




.motd {
font-size: 12px;
text-align: center;
color: #ffcb6e;
}



#musicPlayerIframe {
    position: fixed; /* Keep it visible while scrolling */
    bottom: 0; /* Stick to the bottom */
    left: 0;
    right: 0;
    height: 150px; /* Adjust height as needed */
    z-index: 9999; /* Ensure it stays above other elements */
}



.album-grid {
  display: grid;
  grid-template-columns: 7.5fr 2.5fr;
  grid-template-rows: 7.5fr 2.5fr;
  grid-template-areas:
    "albumBox1 albumBox3"
    "albumBox2 albumBox4";
  gap: 0;
  height:750px;
  width: auto;
  box-sizing: border-box;
}

.albumBox1 { grid-area: albumBox1; }
.albumBox2 { grid-area: albumBox2; }
.albumBox3 { grid-area: albumBox3;   border-left: none !important;}
.albumBox4 { grid-area: albumBox4;   border-left: none !important;   border-top: none !important;}

.album-grid > div {
  background: linear-gradient(to top, #00062fde, #000000);
  border: 7px solid #072e5e;
  color: #fff;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  padding: 15px;
}

/* Preview content box */
.albumBox1 {
  overflow-y: auto;
}

.albumBox2 {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
  padding: 10px;
  border-top: none !important;
}

.albumBox2-text {
  flex: 1;
}

.albumBox2-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.albumBox2-text li {
  font-size: 15px;
  color: #cfcfcf;
  font-family: Times New Roman;
  text-align: center;
  font-style: italic;
}

.albumBox2-images {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
}

.albumBox2-images img {
  max-height: 140px;
  width: auto;
  display: block;
  margin-bottom: 5px;
}

.albumBox3 ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  text-align: left;
}

.albumBox3 li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.albumBox3 a {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  width: 95%;
  padding-left: 10px;
}

.albumBox4 h3 {
  color: #1cf6ba;
  text-align: center;
}

.albumBox4 p {
  color: #1cf6ba;
}

#see-more-link {
  color: dodgerblue !important;
  text-decoration: none;
  font-weight: bold;
}

#see-more-link:hover {
  text-decoration: underline;
}


.albumContent {
	margin-left: 180px;
	margin-right: 180px;
}

#album-preview-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 10px;
}

#album-preview-content img {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 0 8px rgb(241 96 255 / 82%);
  transition: transform 0.2s ease;
}

#album-preview-content img:hover {
  transform: scale(1.03);
}



.song-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
  /* overflow: hidden; */
}

.song-title {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
}

#songTitle {
  display: inline-block;
  padding-left: 100%;
  animation: scroll 20s linear infinite;
  color: white;
  font-style: italic;
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
}

.tooltip-icon {
  width: 25px;
  height: auto;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 150px;
  background-color: #000b8a;
  color: #f7b2eb;
  text-align: center;
  border: 2px solid #82b9fd;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 60%; /* Adjust this if needed for positioning */
  transform: translateY(-50%) scale(0.9); /* Slight scale adjustment */
  transition: opacity 0.3s ease;
  font-size: 18px;
  white-space: normal;
  pointer-events: none; /* Prevents tooltip from blocking interactions */
}

.tooltip-wrapper:hover .tooltip-text,
.tooltip-text:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto; /* Makes tooltip interactive when visible */
}

/* Custom styling for <a> element inside the tooltip */
.tooltip-text a {
  color: #08c2ff; /* Light blue color for the link */
  text-decoration: none; /* Removes the underline */
  font-weight: none !important;
}





/* -------------------------------------------------------------NEWS--------------------------------------------------- */

.news-grid {
  display: grid;
  grid-template-columns: 5fr 5fr;
  grid-template-rows: 0.3fr 0.5fr 5fr;
  grid-template-areas:
    "gridHead gridHead"
    "newsHead opinionHead"
    "newsContent opinionContent";
  gap: 0;
  max-height: 1000px;
  width: auto;
  box-sizing: border-box;
}

.gridHead {
  grid-area: gridHead;
  height: 100px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 7px solid #072e5e;
  border-bottom: none !important;
  background-color: #000;
  color: white;
}

.gridHead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 100%;
  background: url("Images/yevonscript.png") repeat-x;
  background-size: contain;
  animation: scrollBackground 180s linear infinite;
  z-index: 0;
  opacity: 0.7;
}


.gridHead h2 {
  position: relative;
  z-index: 1;
  font-size: 28px;
  margin: 0;
  font-family: Georgia, serif;
  text-shadow: 1px 1px 2px #000;
  text-decoration: none;
  color: #009898;
}

@keyframes scrollBackground {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-66.666%);
  }
}
}


.newsHead { grid-area: newsHead; }
.newsContent { grid-area: newsContent; }
.opinionHead { grid-area: opinionHead; border-left: none !important; }
.opinionContent { grid-area: opinionContent; border-left: none !important; border-top: none !important; }


.news-grid > div {
  background: linear-gradient(to top, #00062fde, #000000);
  border: 7px solid #072e5e;
  color: #fff;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
  padding: 15px;
}


.newsHead {
  overflow-y: auto;
}

.newsHead h2,
.opinionHead h2 {
	color: #005c5c !important;
}


.newsContent {
  display: flex;
  flex-direction: column; 
  gap: 20px;
  align-items: stretch;
  text-align: left;
  padding: 10px;
  overflow: auto;
  border-top: none !important;
}


.news2-text {
  flex: 1;
}

.news2-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news2-text li {
  font-size: 15px;
  color: #cfcfcf;
  font-family: Times New Roman;
  text-align: center;
  font-style: italic;
}

.news2-images {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  align-items: center;
}

.news2-images img {
  max-height: 140px;
  width: auto;
  display: block;
  margin-bottom: 5px;
}


.opinionHead a {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  width: 95%;
  padding-left: 10px;
}

.opinionContent {
  overflow: auto;
  
}

.opinionContent h3 {
  color: #1cf6ba;
  text-align: left;
}

.opinionContent p {
  color: #1cf6ba;
}

.article {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  text-align: left;
  max-height: 150px;
  border-bottom: 3px solid #3e0000;
}


.article img {
  max-width: 180px;
  max-height: 135px;
  height: auto;
  object-fit: cover;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.article-text {
  flex: 1;
}

.article-text h3 {
  margin: 0;
  font-size: 18px;
  color: #ffb6ea;
}

.article-text p {
  margin: 5px 0;
  color: #93b192;
  font-size: 14px;
}

.article-text .date {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.opinionText {
  flex: 1;
}

.opinionText h3 {
  margin: 0;
  font-size: 18px;
  color: #1cf6ba;
}

.opinionText p {
  margin: 5px 0;
  color: #93b192;
  font-size: 14px;
}

.opinionText .date {
  font-size: 12px;
  color: #888;
  font-style: italic;
}


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

  .fade-out {
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
  }

  .fade-in {
    opacity: 1;
    transition: opacity 1s ease;
  }

#secretContent {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  display: block; /* Always block, control visibility with opacity and pointer-events */
}

#secretContent.visible {
  opacity: 1;
  pointer-events: auto;
}
.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#section2, #section3, #section4, #section5, #section6, #section7 {
  display: none;
}

.story-button {
  background-color: black;
  color: white;
  border: none;
  padding: 10px 20px;
  margin: 20px auto;
  display: block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.story-button:hover {
  background-color: #333;
}
.chatbox-input {
  background-color: black;
  color: white;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 16px;
  width: 80%;
  max-width: 500px;
  margin: 20px auto;
  display: block;
  border-radius: 5px;
}