.body {
    background-color: rgb(33, 33, 33);
    margin: 0;
    padding: 0;
}
nav {
    width: 100%; /* Ensure it spans the full width */
    text-align: center;
    background: rgb(13, 3, 50);
    border: 3px groove;
    border-radius: 16px;
    border-color: rgba(59, 58, 62, 0.7); 
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.65);
    box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.8);
    padding-top: 12px;
    padding-bottom: 12px;
    margin: 5px 3px 0px 3px;
    z-index: 1001;
    position: relative;
}
.topnav a {
    color: rgba(255, 255, 255, 0.677); 
}
a:hover {
    color: black;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 1px 0;
}

nav li {
    padding-right: 1rem;
    padding-left: 1rem;
    text-decoration: none;
    
}

button {
    background-color: rgba(70, 69, 85, 0.7); 
    color: white;
    font-size: 15px;
    font-family: 'andale mono',consolas,'courier new', monospace;
    font-weight: 600;
    border-radius: 11px;
    padding: 1px 1px;
    cursor: pointer;
    border: 2px solid;
    border-color: rgba(33, 32, 36, 0.7); 
    margin: 2px 2px;
    transition-duration: 0.7s;
    box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.8);
    text-decoration: none;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.517);
}
 


button:hover {
    background-color: rgb(255, 255, 255); /* Change background color on hover */
    border-color: rgb(97, 223, 245);
    box-shadow: 0 0 7px rgba(255, 255, 0, 0.8), 0 0 20px rgba(255, 255, 0, 0.6), 0 0 25px rgba(255, 255, 0, 0.4); /* Glowing light yellow effect */
    color: black;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.377);
}

nav a {
    display: flex;
    align-items: justify;
    justify-content: center;
    text-decoration: none;
    height: 100%; /* Ensure the anchor takes the full height of the li */
}

.hintsandtipsheader {
    margin: 0px 3px 30px 3px;
    position: relative;
    justify-content: justify;
    align-items: center;
    background-image: url('./hintsandtips-resources/hintsandtipsbanner.webp');
    background-size: contain; 
    background-position: center;
    background-repeat: repeat;
    height: 145px;
    z-index: 1000;
    border-radius: 16px;
    box-shadow: 5px 5px 9px rgba(0, 0, 0, 0.8);
}

.hintsandtipsheader h1 {
    font-family: Consolas, monaco,'andale mono',monospace; 
    position: flexible;
    font-size: 28px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-align: center;
    padding-top: 50px;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.85);
}


.black3menu {
    position: absolute;
    top: 50px;
    left: 15px;
    background-color: rgba(44, 44, 44, 0.412);
    border: 3px solid rgba(255, 255, 255, 0.493);
    color: white;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items:center;
    Justify-content:center;
    height: 30px;
    width: auto;
    z-index: 999;
}
.black3menu:hover {
    box-shadow: 0px 0px 7px rgba(255, 231, 75, 0.749), /* Center */
    2px 2px 7px rgba(255, 231, 75, 0.71), /* Bottom-right */
    -2px -2px 7px rgba(255, 231, 75, 0.621), /* Top-left */
    2px -2px 7px rgba(255, 231, 75, 0.729), /* Top-right */
    -2px 2px 7px rgba(255, 231, 75, 0.711); /* Bottom-left */;
}
.black3menu button {
    background: none;
    border: solid 4px black;
    color: inherit;
    font: inherit;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-shadow: none;
}
.black3menu button:hover {
    border: solid 4px rgba(239, 254, 101, 0.685);
}
.black3menu:hover {
    background-color: rgba(198, 208, 108, 0.536);
}

.black3menu img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.black3menu .dropdown {
    display: none;
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    background-color: rgba(24, 24, 24, 0.877); 
    color: white;
    padding: 22px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    max-height:350px;
    max-width: 1000px;
    font-family: 'andale mono', consolas, 'courier new', monospace;
    column-count: 3;
    column-gap: 55px;
    border-radius: 0px 16px 16px 16px;
}

.black3menu .dropdown ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.black3menu .dropdown ul li {
    padding: 10px 25px;
    break-inside: avoid;
    margin: 0px;
    white-space: nowrap;
}

.black3menu .dropdown ul li a {
    color: white;
    text-decoration: none;
    display: block;
}

.black3menu .dropdown ul li a:hover {
  text-shadow: 0px 0px 7px rgba(255, 231, 75, 0.749), /* Center */
    2px 2px 7px rgba(255, 231, 75, 0.71), /* Bottom-right */
    -2px -2px 7px rgba(255, 231, 75, 0.621), /* Top-left */
    2px -2px 7px rgba(255, 231, 75, 0.729), /* Top-right */
    -2px 2px 7px rgba(255, 231, 75, 0.711); /* Bottom-left */
}

.black3menu:focus-within .dropdown {
    display: block;
}
/* Media query to adjust layout on smaller screens */
@media (max-width: 600px) {
    .black3menu {
        top: auto;
        bottom: 10px; /* Adjust as needed */
        left: 10px; /* Adjust as needed */
    }
}

/* Media query to allow wrapping on smaller screens */
@media (max-width: 600px) {
    .black3menu .dropdown ul li {
        white-space: normal; /* Allow text to wrap on smaller screens */
    }
}
h2 {
    font-family: Consolas, monaco,'andale mono',monospace; 
    position: flexible;
    font-size: 20px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-align: left;
    text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.85);
}
p {
    font-family: 'andale mono', consolas, 'courier new', monospace;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.6em;
    text-align: left;
    word-spacing: 0.05em;
    color: white;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
}
a.museumlink {
    color: rgb(142, 0, 0);
}
a.museumlink:hover {
    color: rgb(188, 188, 22);
}
/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
}

img.expandable {
    cursor: zoom-in; /* Change cursor to zoom-in on hover */
}
/* Modal end - Modal end - Modal end - Modal end - Modal end- */

b {
    color: rgb(100, 182, 234);
    text-decoration: none;
    font-family: 'andale mono', consolas, 'courier new', monospace;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6em;
    text-align: left;
    word-spacing: 0.05em;
    text-shadow: 2px 2px 4px rgba(2, 2, 2, 0.93);
}

.thirtytips {
    margin: 15px;
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.thirtyimg {
    width: 200px !important;
    height: auto !important;
    max-width: 200px !important;
    max-height: auto !important;
    flex: auto;
    border: 10px solid black;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5); /* Apply realistic shadow to the bottom and right edges */
}

.tip1, .tip2, .tip3, .tip4, .tip5, .tip6, .tip7, .tip8, .tip9, .tip10, 
.tip11, .tip12, .tip13, .tip14, .tip15, .tip16, .tip17, .tip18, .tip19, .tip20, 
.tip21, .tip22, .tip23, .tip24, .tip25, .tip26, .tip27, .tip28, .tip29, .tip30 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 20px;
    gap: 30px;
}

.tip1 p, .tip2 p, .tip3 p, .tip4 p, .tip5 p, .tip6 p, .tip7 p, .tip8 p, .tip9 p, .tip10 p, 
.tip11 p, .tip12 p, .tip13 p, .tip14 p, .tip15 p, .tip16 p, .tip17 p, .tip18 p, .tip19 p, .tip20 p, 
.tip21 p, .tip22 p, .tip23 p, .tip24 p, .tip25 p, .tip26 p, .tip27 p, .tip28 p, .tip29 p, .tip30 p {
   flex: 1;
   margin-right: 20px;
}

/* Media query to adjust layout on smaller screens */
@media (max-width: 600px) {
    .tip1, .tip2, .tip3, .tip4, .tip5, .tip6, .tip7, .tip8, .tip9, .tip10, 
    .tip11, .tip12, .tip13, .tip14, .tip15, .tip16, .tip17, .tip18, .tip19, .tip20, 
    .tip21, .tip22, .tip23, .tip24, .tip25, .tip26, .tip27, .tip28, .tip29, .tip30 {
        flex-direction: column;
        align-items: flex-start;
    }

    .tip1 p, .tip2 p, .tip3 p, .tip4 p, .tip5 p, .tip6 p, .tip7 p, .tip8 p, .tip9 p, .tip10 p, 
    .tip11 p, .tip12 p, .tip13 p, .tip14 p, .tip15 p, .tip16 p, .tip17 p, .tip18 p, .tip19 p, .tip20 p, 
    .tip21 p, .tip22 p, .tip23 p, .tip24 p, .tip25 p, .tip26 p, .tip27 p, .tip28 p, .tip29 p, .tip30 p {
        margin-right: 0;
        width: 100%;
    }

    .thirtyimg {
        width: 100% !important;
        max-width: 100% !important;
    }
}


.websitefooter {
    justify-content: center;
    align-items: center;
    background-size: 640px;
    height: 150px;
    margin: 0px 15px;
}
.websitefooter p {
    font-family: Consolas,monaco,'andale mono',monospace; 
    color: white;
    padding-top: 38px;
    text-align: left;
    font-size: 10px;
}
strong {
    color: rgb(93, 23, 23);
}