.menu {
    position: relative;
    display: inline-block;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
}

#menuImage {
    display: block;
    width: auto;
    height: auto;
    z-index: 0;
    border: 4px solid #FFD700;
}

.menu p {
    position: absolute;
    color: rgb(194, 188, 188);
    text-align: left;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 1.5vw;
    padding: 0.5vw;
    margin: 0;
    width: auto;
    left: 20%;
    box-sizing: border-box;
    font-family: 'ITC Tiffany Medium', 'Times New Roman', serif;
}

.menu p a {
    color: inherit;
    text-decoration: none;
    display: block;
    transition: color 0.3s ease;
}

.menu p a:hover {
    color: #FFD700;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
}


.menu p:nth-of-type(1) { top: 36.5%; }
.menu p:nth-of-type(2) { top: 40.8%; }
.menu p:nth-of-type(3) { top: 45.1%; }
.menu p:nth-of-type(4) { top: 49.4%; }
.menu p:nth-of-type(5) { top: 53.7%; }
.menu p:nth-of-type(6) { top: 58.0%; }
.menu p:nth-of-type(7) { top: 62.3%; }
.menu p:nth-of-type(8) { top: 66.6%; }


.menu p:nth-of-type(17) {
    top: 83.6%; 
    left: 15%; 
    color: rgb(249, 245, 245);
    font-size: 1.4vw;
    padding: 0.3vw;
    width: 90%;
    max-width: 70%;
    word-wrap: break-word;
    white-space: normal;
}

.menu p:nth-of-type(17)::before {
    content: "Hover over each category to get a brief description of them. Click to view the full guide!";
}

.menu p:nth-of-type(1):hover ~ p:nth-of-type(17)::before {
    content: "The fastest Ecclesia category, which can be done in under 25 minutes! Use Hyperspeed and Memory Corruption to destroy the game!";
}

.menu p:nth-of-type(2):hover ~ p:nth-of-type(17)::before {
    content: "The initial breaking point of the game. Use the new Magical Ticket Glitch to beat the game in 30 minutes!";
}

.menu p:nth-of-type(3):hover ~ p:nth-of-type(17)::before {
    content: "The original speedrun category. Become a master of Ecclesia movement with this difficult run!";
}

.menu p:nth-of-type(4):hover ~ p:nth-of-type(17)::before {
    content: "Take advantage of Max Attribute Points and powerful Glyphs to demolish every obstacle in your way!";
}

.menu p:nth-of-type(5):hover ~ p:nth-of-type(17)::before {
    content: "'You can't hit me' - Teleport across the map with Albus and use his powerful Agartha to destroy Dracula!";
}

.menu p:nth-of-type(6):hover ~ p:nth-of-type(17)::before {
    content: "The ultimate Ecclesia challenge. Navigate Max Level 1 Hard Mode, where death is only 2-3 hits away.";
}

.menu p:nth-of-type(7):hover ~ p:nth-of-type(17)::before {
    content: "Spice up your gameplay with this amazing Randomizer by apple_for_you! Create your own routes with randomized item and glyph locations!";
}

.menu p:nth-of-type(8):hover ~ p:nth-of-type(17)::before {
    content: "Need more help? Found something wrong with the site? Click here to contact me or the community!";
}

.menu p:nth-of-type(10):hover ~ p:nth-of-type(17)::before {
    content: "If you're new or just need a refresher, visit this guide to understand the basics of Ecclesia speedrunning.";
}

.menu p:nth-of-type(11):hover ~ p:nth-of-type(17)::before {
    content: "Familiarize yourself with the locations of all important items to help with the Randomizer or routing!";
}

.menu p:nth-of-type(12):hover ~ p:nth-of-type(17)::before {
    content: "Discover the most optimal way to do each quest in the game!";
}

.menu p:nth-of-type(14):hover ~ p:nth-of-type(17)::before {
    content: "For reading over this and inspiring me to run this game!";
}

.menu p:nth-of-type(15):hover ~ p:nth-of-type(17)::before {
    content: "For discovering new glitches and giving their input on the site.";
}

.menu p:nth-of-type(16):hover ~ p:nth-of-type(17)::before {
    content: "For their game knowledge and making the Randomizer.";
}



.cursor, .cursor2, .cursor3, .cursor4, .cursor5, .cursor6, .cursor7, .cursor8{
    position: absolute;
    width: auto;
    height: auto;
    z-index: 999;
    left: 15.5%;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.cursor9, .cursor10, .cursor11{
    position: absolute;
    width: auto;
    height: auto;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.3s ease;
    left: 56.0%;
}

.cursor13, .cursor12, .cursor14 {
    position: absolute;
    width: auto;
    height: auto;
    z-index: 999;
    left: 59.0%;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.cursor9 {
    top: 28.5%;

}

.cursor10 {
    top: 33.5%;

}
          
.cursor11 {
    top: 38.5%;
 
}

.cursor12 {
    top: 58.5%;
}

.cursor13 {
    top: 63.5%;
}

.cursor14 {
    top: 68.5%;
}


.cursor {
    top: 37.5%;

}

.cursor2 {
    top: 41.8%;

}

.cursor3 {
    top: 46.1%;

}

.cursor4 {
    top: 50.4%;
  
}

.cursor5 {
    top: 54.7%;
   
}

.cursor6 {
    top: 59.0%;
   
}

.cursor7 {
    top: 63.3%;

}

.cursor8 {
    top: 67.6%;

}




.menu p:nth-of-type(1):hover ~ .cursor {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(2):hover ~ .cursor2 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(3):hover ~ .cursor3 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(4):hover ~ .cursor4 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(5):hover ~ .cursor5 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(6):hover ~ .cursor6 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(7):hover ~ .cursor7 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(8):hover ~ .cursor8 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(10):hover ~ .cursor9 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(11):hover ~ .cursor10 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(12):hover ~ .cursor11 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(14):hover ~ .cursor12 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(15):hover ~ .cursor13 {
    opacity: 1;
    visibility: visible;
}

.menu p:nth-of-type(16):hover ~ .cursor14 {
    opacity: 1;
    visibility: visible;
}


.header {
    text-align: center;
    margin: 0 auto;
    padding: 40px 60px;
    background-image: url('img/textOne.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;
    height: 300px;
}

.header h1, .header h3, .header p {
    margin: 17px 0;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

.header a {
    color: #FFD700;
}

.navbar {
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.navbar li {
    display: inline-block;
}

.navbar a {
    text-decoration: none;
    color: rgb(212, 212, 212);
    padding: 10px 15px;
    transition: color 0.3s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.navbar a:hover {
    color: #FFD700;
}


body {
    background-image: url('img/home.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}


.menu h2 {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    border-radius: 6px;
    margin: 10px auto;
    display: inline-block;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}


#textOneImage {
    position: absolute;
    top: 20%;
    left: 69%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    z-index: 10;
    pointer-events: none;
}

#textTwoImage {
    position: absolute;
    top: 50%;
    left: 69%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    z-index: 10;
    pointer-events: none;
}


.review, 
.menu p:nth-of-type(9),
.menu p:nth-of-type(10), 
.menu p:nth-of-type(11),
.menu p:nth-of-type(12) {
    position: absolute;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.5vw;
    z-index: 15;
    margin: 0;
    padding: 0;
}


.menu p:nth-of-type(9) { 
    top: 23.5%;
    left: 66%;
}

.menu p:nth-of-type(10) { 
     top: 28.5%;
    left: 61.5%;
}

.menu p:nth-of-type(11) { 
    top: 33.5%;
    left: 61.5%;
}

.menu p:nth-of-type(12) { 
    top: 38.5%;
    left: 61.5%;
}


.review, 
.menu p:nth-of-type(13),
.menu p:nth-of-type(14), 
.menu p:nth-of-type(15),
.menu p:nth-of-type(16) {
    position: absolute;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    font-size: 1.5vw;
    z-index: 15;
    margin: 0;
    padding: 0;
}


.menu p:nth-of-type(13) {
    top: 53.5%;
    left: 65.5%;
}

.menu p:nth-of-type(14) {
    top: 58.5%;
    left: 64.5%;
}

.menu p:nth-of-type(15) { 
    top: 63.5%;
    left: 64.5%;
}

.menu p:nth-of-type(16) { 
    top: 68.5%;
    left: 64.5%;
}
.help-link:hover {
    text-decoration: underline;
    color: #FFD700;
}

.help-link a, 
.help-link a:visited {
    color: pink !important;
    text-decoration: none;
}