/* Base styles */
body {
    background-color: rgb(25, 25, 25);
    margin: 0;
    color: white;
    font-family: sans-serif;
}

body a {
    text-decoration: none;
    color: rgb(0, 153, 255);
}

body a:hover {
    color: rgb(0, 55, 255);
}

/* Header styles */
.wiki-heading {
    background-color: rgb(35, 35, 35);
    color: white;
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px;
}

.wiki-heading img {
    height: 40px;
    width: 40px;
    margin-right: 10px;
    margin-left: 10px;
}

.wiki-heading h1 {
    font-size: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin: 0;
}

.links-wiki-quick {
    display: flex;
    margin-left: auto;
}

.links-wiki-quick a {
    text-decoration: none;
    color: white;
    transition: color .3s;
}

.links-wiki-quick a:hover {
    text-decoration: dotted;
    color: rgb(29, 82, 229);
}

.wiki-heading ul {
    font-size: 20px;
}

/* Responsive Design for Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .wiki-heading h1 {
        font-size: 26px;
    }

    .links-wiki-quick {
        margin-left: auto;
    }

    .wiki-heading img {
        height: 60px;
        width: 60px;
    }
}

/* Responsive Design for Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    .wiki-heading img {
        height: 80px;
        width: 80px;
    }
    
    .wiki-heading h1 {
        font-size: 60px;
        width: 100%;
    }

    .links-wiki-quick {
        display: flex;
        margin-left: -60%;
        color: rgb(255, 255, 255);
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .links-wiki-quick a {
        text-decoration: none;
        color: rgb(255, 255, 255);
        transition: color .3s;
    }

    .wiki-heading ul {
        font-size: 20px;
    }
}

/* For very small screens like phones (Max-width 600px) */
@media only screen and (max-width: 600px) {
    .wiki-heading h1 {
        font-size: 40px;
    }
}












/* Main structure */
.wikipedia-struckture {
    display: flex;
    flex-wrap: wrap; /* Ensures content wraps on smaller screens */
    justify-content: space-between; /* Distribute space between items */
    padding: 20px;
}

.wikipedia-struckture a {
    text-decoration: none;
    color: rgb(107, 171, 255);
    transition: color 0.3s;
}

/* Responsive Design for Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .wikipedia-struckture {
        flex-direction: row; /* Keep items in a row on larger screens */
        padding: 15px;
    }

    .wikipedia-struckture a {
        font-size: 18px; /* Slightly larger text on medium screens */
    }
}

/* Responsive Design for Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    .wikipedia-struckture {
        flex-direction: column; /* Stack items vertically on smaller screens */
        padding: 10px;
    }

    .wikipedia-struckture a {
        font-size: 16px; /* Smaller font size for mobile devices */
    }
}

/* For very small screens like phones (Max-width 600px) */
@media only screen and (max-width: 600px) {
    .wikipedia-struckture {
        flex-direction: column; /* Stack items vertically for phones */
        padding: 5px;
    }

    .wikipedia-struckture a {
        font-size: 14px; /* Smaller font size for very small screens */
    }
}










/* Menu styles */
.wiki-menu {
    position: fixed; /* Fixed position */
    width: 25%; /* Default width of the menu for large screens */
    font-size: 16px;
    margin: 0;
    top: 80px; /* Start the menu below the navbar */
    left: -100%; /* Initially off-screen */
    height: calc(100vh - 80px - 60px); /* Full height minus navbar and footer space */
    overflow-y: auto; /* Allow scrolling if content overflows */
    transition: left 0.3s ease-in-out; /* Smooth transition for sliding in */
    z-index: 1000; /* Ensure menu stays above the content but below navbar */
}

/* Menu items styling */
.wiki-menu p {
    padding: 7px;
    width: 70%;
    border-radius: 5px;
    margin-left: 15%;
    transition: background-color 0.2s;
}

.wiki-menu a {
    text-decoration: none;
    color: white;
}

.wiki-menu p:hover {
    background-color: rgb(48, 48, 48);
}

/* Navbar styling */
.navbar {
    position: relative;
    z-index: 2000; /* Ensure navbar is above the menu */
    padding: 20px 0; /* Ensure there's enough space at the top of the page */
}

/* For large screens (above 980px) */
@media only screen and (min-width: 981px) {
    .wiki-menu {
        left: 0; /* Make the menu visible on large screens */
        width: 25%; /* Keep the menu at 25% width on larger screens */
        top: 80px; /* Keep the top margin from the navbar */
        height: calc(100vh - 80px - 60px); /* Ensure height doesn't overlap with footer */
    }

    .wiki-menu p {
        width: 80%; /* Increase width of the menu items */
        margin-left: 10%;
    }

    .wiki-menu a {
        font-size: 18px; /* Larger font size for better readability */
    }
}

/* For small to medium screens (max-width 980px) */
@media only screen and (max-width: 980px) {
    .wiki-menu {
        display: none; /* Hide the menu on mobile screens */
    }
}

/* For very small screens (max-width 600px) */
@media only screen and (max-width: 600px) {
    .wiki-menu {
        display: none; /* Hide the menu on mobile screens */
    }
}














/* Content styles */
.wiki-content {
    margin-left: 25%; /* Add left margin to make space for the fixed menu */
    width: 60%;
}

.wiki-content-container {
    width: 90%;
}

.wiki-content-container h1 {
   font-size: 60px;
   margin-bottom: 2%;
}

.wiki-content-block h2 {
    font-size: 30px;
    margin-top: 5%;
}

.wiki-info-box {
    margin-top: 5%;
    background-color: rgba(0, 128, 255, 0.241);
    border-left: solid rgb(0, 128, 255) 7px;
    border-radius: 10px;
    margin-bottom: 5%;
}

.wiki-info-box-white {
    margin-top: 5%;
    background-color: rgba(255, 255, 255, 0.251);
    border-left: solid rgb(236, 236, 236) 7px;
    border-radius: 10px;
    margin-bottom: 5%;
}

.wiki-info-box-red {
    margin-top: 5%;
    background-color: rgba(255, 0, 17, 0.241);
    border-left: solid rgb(255, 0, 21) 7px;
    border-radius: 10px;
    margin-bottom: 5%;
}

.wiki-info-box-green {
    margin-top: 5%;
    background-color: rgba(0, 255, 30, 0.241);
    border-left: solid rgb(17, 255, 0) 7px;
    border-radius: 10px;
    margin-bottom: 5%;
}

.wiki-info-box-yellow {
    margin-top: 5%;
    background-color: rgba(255, 234, 0, 0.241);
    border-left: solid rgb(255, 221, 0) 7px;
    border-radius: 10px;
    margin-bottom: 5%;
}

.wiki-video-box {
    height: 50vh;
    border-radius: 15px;
    margin-bottom: 5%;
}

.wiki-inside-info-box {
    padding: 3px;
    margin-left: 2%;
}

/* Responsive Design for Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    /* Content styles */
    .wiki-content {
        margin-left: 23%; /* Adjust left margin for medium screens */
        width: 70%; /* Adjust content width */
    }

    .wiki-content-container h1 {
        font-size: 45px; /* Adjust heading size */
        margin-bottom: 2%;
    }
}

/* Responsive Design for Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    .wiki-content {
        margin-left: 10%; /* Add left margin to make space for the fixed menu */
        width: 100%; /* Full width for smaller screens */
    }

    .wiki-content-container h1 {
        font-size: 55px; /* Adjust heading size */
        margin-bottom: 2%;
    }
}

/* For very small screens (Max-width 600px) */
@media only screen and (max-width: 600px) {
    .wiki-content {
        margin-left: 5%; /* Reduce margin on very small screens */
        width: 90%; /* Increase width for very small screens */
    }

    .wiki-content-container h1 {
        font-size: 40px; /* Further reduce heading size for very small screens */
        margin-bottom: 2%;
    }

    .wiki-video-box {
        height: 40vh; /* Reduce height of video box for very small screens */
    }
}








/* Bookmark styles */
.wiki-bookmark {
    position: fixed;
    width: 15%;
    margin-left: 88%;
}

.wiki-bookmark-content p, h4 {
    transition: background-color 0.2s;
    padding: 3px;
    padding-left: 3%;
    width: 60%;
    border-radius: 5px;
}

.wiki-bookmark-content p:hover, h4:hover {
    background-color: rgb(48, 48, 48);
}

.wiki-bookmark-content a {
    text-decoration: none;
    color: white;
    border-radius: 5px;
}

/* Responsive Design for Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .wiki-bookmark {
        display: none; /* Hide the menu on mobile screens */
    }
}

/* Responsive Design for Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    .wiki-bookmark {
        display: none; /* Hide the menu on mobile screens */
    }
}







/* Command styles */
.command {
    border: solid 1px rgb(171, 171, 171);
    padding: 3px;
    border-radius: 5px;
    background-color: rgb(81, 81, 81);
    color: rgb(229, 231, 231);
}

/* Selection styles */
.selection {
    display: flex;
    justify-content: center;
    text-align: center;
}

/* Box styles */
.box {
    width: 100%;
    margin: 5%;
    padding: 3%;
    border: solid gray  3px;
    border-radius: 15px;
    background-color: rgba(94, 94, 94, 0.092);
}

.box h3 {
    font-size: 22px;
    margin: 0;
}

/* Premium box styles */
#premium {
    border: solid 3px rgb(255, 162, 0);
    border-radius: 10px;
    padding: 5px;
    background-color: rgba(255, 170, 0, 0.225);
    color: rgb(255, 204, 0);
}

/* Box for AM */
.box-am {
    width: 100%;
    margin: 2%;
    padding: 3%;
    border: solid gray  3px;
    border-radius: 15px;
    background-color: rgba(94, 94, 94, 0.092);
}

.box-am h3 {
    margin: 0;
}

/* Responsive Design for Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .command {
        padding: 1px; /* Reduced padding for medium screens */
    }

    .box {
        width: 100%;
        margin: 2%;
        padding: 3%;
        border: solid gray  3px;
        border-radius: 15px;
        background-color: rgba(94, 94, 94, 0.092);
    }
    
    .box h3 {
        font-size: 22px; /* Font size adjustment for medium screens */
        margin: 0;
    }
}

/* Responsive Design for Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    .box {
        width: 100%;
        margin: 2%;
        padding: 3%;
        border: solid gray  3px;
        border-radius: 15px;
        background-color: rgba(94, 94, 94, 0.092);
    }
    
    .box h3 {
        font-size: 40px; /* Increased font size for smaller screens */
        margin: 0;
    }

    .selection p {
        font-size: 30px; /* Font size for selection on small screens */
    }

    #premium {
        border: solid 3px rgb(255, 162, 0);
        border-radius: 10px;
        padding: 5px;
        background-color: rgba(255, 170, 0, 0.225);
        color: rgb(255, 204, 0);
        font-size: 15px; /* Font size adjustment for premium on small screens */
    }

    .box-am {
        width: 100%;
        margin: 2%;
        padding: 3%;
        border: solid gray  3px;
        border-radius: 15px;
        background-color: rgba(94, 94, 94, 0.092);
    }
    
    .box-am h3 {
        margin-bottom: 30px;
        font-size: 40px; /* Increased font size for AM box */
    }

    .box-am p {
        margin: 0;
        font-size: 30px; /* Font size for paragraph inside AM box */
    }

    #modify h4 {
        font-size: 27px; /* Font size for modify heading */
    }
}











/* Commands Section */
.commands {
    margin: 0;
    margin-top: 5%;
}

/* Command Box Styling */
.commandbox {
    background-color: rgb(39, 39, 39);
    border: solid 3px grey;
    border-radius: 15px;
    padding: 2%;
    box-shadow: 50px;
    margin-bottom: 3%;
}

/* Command Heading Styling */
.heading-cmd {
    font-size: 22px;
}

/* Permission Boxes */
.permissionBox-admin {
    font-size: 17px;
    padding: .2% 1% .2% 1%;
    justify-content: center;
    align-items: center;
    border: solid 2px rgb(255, 0, 98);
    background: rgba(255, 0, 102, 0.263);
    border-radius: 5px;
}

.permissionBox-mod {
    font-size: 17px;
    padding: .2% 1% .2% 1%;
    justify-content: center;
    align-items: center;
    border: solid 2px rgb(174, 0, 255);
    background: rgba(179, 0, 255, 0.263);
    border-radius: 5px;
}

.permissionBox-casual {
    font-size: 17px;
    padding: .2% 1% .2% 1%;
    justify-content: center;
    align-items: center;
    border: solid 2px rgb(0, 255, 187);
    background: rgba(0, 255, 204, 0.263);
    border-radius: 5px;
}

/* Utility Box */
.utilitybox {
    border: solid rgb(21, 21, 21) 2px;
    border-radius: 5px;
    box-shadow: 5em;
    width: 70%;
    background-color: rgb(26, 26, 26);
    padding: 1.5%;
}

/* Item Box */
.item {
    border: 2px solid rgb(14, 14, 14);
    border-radius: 5px;
    background-color: rgb(44, 44, 44);
    padding: 0.8%;
    box-shadow: 5em;
}

/* Utility Box Button */
.utilitybox-btn {
    border: solid rgb(21, 21, 21, 0) 2px;
    border-radius: 5px;
    box-shadow: 5em;
    width: 95%;
    background-color: rgba(26, 26, 26, 0.553);
    padding: 1.5%;
}

/* Item Buttons */
.item-btn-primary {
    border: 2px solid rgb(30, 30, 30);
    border-radius: 5px;
    background-color: rgb(0, 16, 161);
    padding: 0.6%;
    box-shadow: 5em;
}

.item-btn-danger {
    border: 2px solid rgb(30, 30, 30);
    border-radius: 5px;
    background-color: rgb(161, 0, 21);
    padding: 0.5%;
    box-shadow: 5em;
}

.item-btn-secondary {
    border: 2px solid rgb(30, 30, 30);
    border-radius: 5px;
    background-color: rgb(60, 60, 60);
    padding: 0.6%;
    box-shadow: 5em;
}

.item-btn-success {
    border: 2px solid rgb(30, 30, 30);
    border-radius: 5px;
    background-color: rgb(11, 112, 0);
    padding: 0.5%;
    box-shadow: 5em;
}

/* Optional Label */
.optional {
    font-size: 13px;
    color: orange;
    font-family: sans-serif;
    border: solid 1px orange;
    border-radius: 3px;
    padding: 1px 3px 1px 3px;
}

/* Effect Box */
.effect {
    background-image: repeating-radial-gradient(rgb(255, 0, 251) , rgba(251, 0, 255, 0.162));
    border-radius: 10px;
    border: 3px solid  rgb(242, 0, 255);
}

.effect p, h3 {
    margin-left: 20px;
}

.effect p {
    font-size: 14px;
}

/* Red Text */
#red {
    color: rgb(255, 64, 64);
}

/* Number-Only Box */
.number-only {
    color: white;
    border: solid red 2px;
    background-color: rgba(255, 0, 0, 0.244);
    border-radius: 5px;
    padding: 3px;
}

/* Media Queries for Responsiveness */

/* For Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .utilitybox {
        width: 90%;
    }

    .item {
        padding: 0.8%;
    }

    .utilitybox-btn {
        padding: 1.5%;
    }

    .item-btn-primary, .item-btn-danger, .item-btn-secondary, .item-btn-success {
        padding: 0.3%;
    }
}

/* For Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    .utilitybox {
        width: 90%;
    }

    .item {
        padding: 0.8%;
    }

    .utilitybox-btn {
        padding: 1.5%;
    }

    .item-btn-primary, .item-btn-danger, .item-btn-secondary, .item-btn-success {
        padding: 0.3%;
    }
}












/* Permissions Box */
.permissions {
    border: solid grey 2px;
    padding: 5px;
    border-radius: 6px;
    background-color: rgb(55, 55, 55);
}

/* Subtext Styling */
.subtext {
    background-color: rgba(63, 63, 63, 0.355);
    padding: 5px;
    border-radius: 10px;
}

.subtext p {
    margin-left: 3%;
    margin-right: 2%;
}

/* Stats Section */
#stats {
    text-align: center;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 20%;
    margin-top: 5%;
    margin-bottom: 7%;
}

/* Stat Box Styling */
.stat-box {
    background: linear-gradient(to top right, #bf00d0ae 5%, #3478ffb4 40%, #0044ffa3,  #5100ffad 90%);
    border-radius: 10px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 0%;
    border: solid white 2px;
}

/* Stat Number Styling */
#stat-number {
    background: linear-gradient(to right, rgba(174, 144, 255, 0), rgba(207, 159, 255, 0.271),  rgba(174, 144, 255, 0));
}

/* Media Queries for Responsiveness */

/* For Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    #stats {
        text-align: center;
    }

    .stats {
        display: flex;
        justify-content: center;
        gap: 20%;
        margin-top: 5%;
        margin-bottom: 7%;
    }

    #stat-number {
        font-size: 25px;
        background: linear-gradient(to right, rgba(174, 144, 255, 0), rgba(207, 159, 255, 0.271),  rgba(174, 144, 255, 0));
    }
}

/* For Small Screens (Max-width 980px) */
@media only screen and (max-width: 980px) {
    #stats {
        text-align: center;
        font-size: 60px;
    }

    .stats {
        display: flex;
        justify-content: center;
        gap: 10%;
        margin-top: 5%;
        margin-bottom: 7%;
    }

    #stat-number {
        font-size: 40px;
        background: linear-gradient(to right, rgba(174, 144, 255, 0), rgba(207, 159, 255, 0.271),  rgba(174, 144, 255, 0));
    }
}





/* Wiki Video Box */
.wiki-video-box {
    margin: 0;
    padding: 0;
    justify-content: center;
}

/* Video Styling */
#video {
    border-radius: 50px;
    width: 100%; /* Ensures the video will scale based on its container */
    max-width: 1115px; /* Maximum width for larger screens */
    height: auto; /* Automatically adjusts the height to maintain aspect ratio */
}

.wiki-inside-video-box video {
    width: 100%; /* Ensures the video takes up the available width */
    height: auto; /* Adjusts the height based on the aspect ratio */
}

/* Mobile Menu Button */
#mobile-menu-btn {
    margin-left: -200%;
    position: absolute;
    color: rgba(255, 255, 255, 0);
    font-size: 0px;
    text-decoration: none;
}

#mobile-menu-btn:hover {
    color: rgba(255, 255, 255, 0);
}

/* Media Queries */

/* For Medium Screens (1000px - 1400px) */
@media only screen and (min-width: 1000px) and (max-width: 1400px) {
    .wiki-inside-video-box video {
        width: 630px;
        height: 450px;
    }
}

/* For Small Screens (Max-width: 980px) */
@media only screen and (max-width: 980px) {
    /* Video Styling */
    .wiki-inside-video-box video {
        width: 110%; /* Make the video slightly wider than full width */
        height: auto; /* Maintains aspect ratio */
        margin-left: -5%; /* Center the video by shifting it to the left */
    }

    /* Mobile Menu Button */
    #mobile-menu-btn {
        margin-left: -20%;
        top: 40%;
        position: absolute;
        color: white;
        font-size: 30px;
        text-decoration: none;
    }

    #mobile-menu-btn:hover {
        color: #0066ff;
    }

    /* Video Container Adjustments */
    #video {
        border-radius: 30px;
        padding-bottom: 0;
        margin-bottom: -70%; /* Adjust the margin to give more space to the video */
        width: 110%; /* Increase the width of the video container */
        height: auto; /* Adjusts height proportionally */
        margin-left: -5%; /* Center the video container */
    }
}



/* Points Styling */
#points {
    border: solid 1px rgb(0, 199, 0);
    padding: 2px;
    border-radius: 5px;
    background-color: #089f003a;
}

/* Scanning Text Adjustments */
@media only screen and (max-width: 980px) {
    #scanning {
        font-size: 15px;
    }
}




/* General adjustments for smaller screens */
@media only screen and (max-width: 980px) {

    /* Adjusting text size */
    .wiki-content-container h1 {
        font-size: 25px; /* Adjust as necessary */
    }

    .wiki-content-container h2 {
        font-size: 20px; /* Adjust as necessary */
    }

    /* Adjust the width of content and boxes */
    .wiki-content, .wiki-content-container, .wiki-info-box, .wiki-video-box, .wiki-inside-info-box {
        width: 90%; /* Reduce width to fit the screen */
        margin: 0 auto; /* Center the content */
    }

    /* Adjust box sizes */
    .box, .box-am {
        width: 90%; /* Ensure the box fits within the screen */
        margin: 2%; /* Add some spacing between the boxes */
    }

    /* Adjust buttons */
    .item-btn-primary, .item-btn-danger, .item-btn-secondary, .item-btn-success {
        padding: 0.4em 1em; /* Adjust button size */
        font-size: 16px; /* Adjust text size for buttons */
    }

    /* Video adjustments */
    .wiki-inside-video-box video {
        width: 100%; /* Ensure video width adjusts to screen size */
        height: auto; /* Maintain aspect ratio */
    }

    /* Adjust the sidebar or any fixed content */
    .wiki-menu, .wiki-bookmark {
        width: 100%; /* Take full width on small screens */
        position: static; /* Remove fixed positioning for small screens */
        margin: 0; /* Remove margin */
    }

    /* Adjust the text and layout inside boxes */
    .box h3, .box-am h3 {
        font-size: 18px; /* Reduce font size */
    }

    .box p, .box-am p {
        font-size: 14px; /* Reduce paragraph text size */
    }

    /* Adjust header font sizes */
    .heading-cmd {
        font-size: 18px; /* Reduce heading font size */
    }

    /* Adjust any optional text */
    .optional {
        font-size: 12px; /* Reduce optional text size */
    }

    /* Adjust stat boxes and other layout components */
    .stat-box {
        padding: 1.5% 3%;
    }

    .stats {
        flex-direction: column; /* Stack stats vertically */
        gap: 10%; /* Add gap between stacked elements */
    }

    /* Adjust other smaller components */
    .permissions, .subtext, .permissionBox-admin, .permissionBox-mod, .permissionBox-casual {
        font-size: 14px; /* Reduce font size */
        padding: 3px; /* Reduce padding */
    }
}