/* styles.css */

:root {
    --custom-color: #f0f0f0;
    /* Default color if not overridden */
    --custom-color2: #f0f0f0;
    /* Default color if not overridden */
    color-scheme: light dark;
}

/* Base styles for .content */
.content {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    /* transition: background-color 0.3s ease, color 0.3s ease; */
}

/* Dark mode styles for .content */
.content.dark-mode {
    background-color: #121212;
}

/* Light mode styles for .content */
.content.light-mode {
    background-color: #ffffff;
}

/* Styling for the theme toggle button */
.theme-toggle {
    margin-top: 10px;
    cursor: pointer;
    font-size: 24px;
    /* Adjust size as needed */
}

.content.dark-mode .glossary-entry-header {
    color: white !important;
    /* Ensure text color is applied */
}

.content.dark-mode .character-name-top {
    color: #ffffff !important;
}

.content.dark-mode.character-name-top {
    color: #000000 !important;
}



.logo-container {
    display: grid;
    grid-template-columns: 95% 5%;
    /* Define column sizes explicitly */
    width: 100%;
    /* max-width: 1440px; */
    background-color: #333;
    align-self: center;
    align-content: center;
    justify-content: right;
    color: #bbc7c7;
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1001;
    padding: 10px;
}

/* First child of logo container takes up 80% */
.logo-container> :first-child {
    grid-column: 1;
    /* Align to the first column */
    justify-self: center;
    align-self: center;
    text-align: center;
}

/* Second child of logo container takes up 20% */
.logo-container> :last-child {
    grid-column: 2;
    /* Align to the second column */
    justify-self: end;
    /* Aligns content to the right */
    align-self: start;
    /* Aligns content to the top */
    text-align: center;
    padding-right: 10px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* max-width: 1440px; */
}

.home-container {
    display: grid;
    /* display: none; */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    padding: 10px;
}

.left-ad-space {
    display: grid;
    /* display: none; */
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 200px;
    max-height: 800px;
    /* background-color: #333; */
    background-color: transparent;

    color: white;
    justify-content: center;
    text-align: center;
    /* justify-self: right; */
    justify-self: center;

}

.right-ad-space {
    display: grid;
    /* display: none; */
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    max-width: 200px;
    max-height: 800px;

    /* background-color: #333; */
    background-color: transparent;
    color: white;
    justify-content: center;
    text-align: center;
    /* justify-self: left; */
    justify-self: center;


}

.ad-space {
    display: grid;
    /* display: none; */
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    /* background-color: #333; */
    background-color: transparent;
    color: white;
    justify-content: center;
    /* text center */
    text-align: center;
}

.top-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    justify-content: center;
    justify-self: center;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    min-height: 50px;
    position: sticky;
    top: 0px;
    z-index: 1000;
    border-top: 1px solid #777777;
    border-bottom: 1px solid #333;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5);
    /* box-shadow: 0 -5px 5px -2px rgba(0, 0, 0, 0.5);  */


}

.top-nav-grid {
    display: grid;
    max-width: 1440px;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    align-items: center;
    align-self: center;
    justify-self: center;
    background-color: #333;
    color: white;
    text-align: center;
    /* overflow scroll */
    overflow-x: auto;
    /* always how scroll bar if there is overflow */
    scrollbar-width: thin;

}

.top-nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
    /* Smooth transition */
    /* default transparent background */
    background-color: transparent;
    padding: 5px;
    border-right: #06b82d;
    /* text-decoration: underline; */
    text-decoration-color: #bbc7c7;
    color: #fff;
    font-size: medium;
    border-right: 1px solid #777777;
}

.top-nav-tile:last-child {
    border-right: none;
    /* Remove border on the last item */
}

.nav-button {
    display: flex;
    background-color: #333;
    color: white;
    width: 100%;
    justify-content: center;
    /* padding: 16px; */
    /* font-size: 16px; */
    border: none;
    cursor: pointer;
}

.nav-button:hover {
    background-color: #471c1c;
    color: #fff;
}

.glossary-btn {
    display: flex;
    background-color: #333;
    color: white;
    width: 100%;
    justify-content: center;
    /* padding: 16px; */
    /* font-size: 16px; */
    border: none;
    cursor: pointer;
    /* no underline */

}

.glossary-btn:hover {
    background-color: #471c1c;
    color: #fff;
}

.glossary-btn a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
}

.glossary-btn a:hover {
    color: #fff;
    /* Change to desired color on hover */
    background-color: transparent;
    /* Match the button hover background */
    text-decoration: none;

}

.stats-btn {
    display: flex;
    background-color: #333;
    color: white;
    width: 100%;
    justify-content: center;
    /* padding: 16px; */
    /* font-size: 16px; */
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.stats-btn:hover {
    background-color: #471c1c;
    color: #fff;
}

.stats-btn a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;

}

.stats-btn a:hover {
    color: #fff;
    /* Change to desired color on hover */
    background-color: transparent;
    /* Match the button hover background */
    text-decoration: none;

}

/*guides button*/
.guides-btn {
    display: flex;
    background-color: #333;
    color: white;
    width: 100%;
    justify-content: center;
    /* padding: 16px; */
    /* font-size: 16px; */
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.guides-btn:hover {
    background-color: #471c1c;
    color: #fff;
}

.guides-btn a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;

}

.guides-btn a:hover {
    color: #fff;
    /* Change to desired color on hover */
    background-color: transparent;
    /* Match the button hover background */
    text-decoration: none;

}

/* skins button */
.skins-btn {
    display: flex;
    background-color: #333;
    color: white;
    width: 100%;
    justify-content: center;
    /* padding: 16px; */
    /* font-size: 16px; */
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.skins-btn:hover {
    background-color: #471c1c;
    color: #fff;
}

.skins-btn a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
}

.skins-btn a:hover {
    color: #fff;
    /* Change to desired color on hover */
    background-color: transparent;
    /* Match the button hover background */
    text-decoration: none;
}


.rundown-btn {
    display: flex;
    background-color: #333;
    color: white;
    width: 100%;
    justify-content: center;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.rundown-btn:hover {
    background-color: #471c1c;
    color: #fff;
}

.rundown-btn a {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;

}

.rundown-btn a:hover {
    color: #fff;
    /* Change to desired color on hover */
    background-color: transparent;
    /* Match the button hover background */
    text-decoration: none;

}

/* dropdown list */
.dropbtn {
    background-color: #333;
    color: white;
    width: 100%;
    /* padding: 16px; */
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}




/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    grid-template-columns: repeat(1, 1fr);
    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 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    color: rgb(255, 255, 255);
    /* bold text */
    font-weight: bold;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1
}

/* Show the dropdown menu on hover */
/* .top-nav-tile:hover,.dropdown:hover .dropdown-content { */
/* display: grid; */
/* } */
.top-nav-tile:hover {
    background-color: #471c1c;
    color: #fff;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #471c1c;

}

.dropdown-tile {
    position: relative;
    display: inline-block;
    /* background color = custom_color */
    /* background-color: var(--custom-color); */
    background-color: #471c1c;
    color: white;
    text-align: center;
    padding: 10px;
    /* border-radius: 10px; */
    border: 1px solid #ddd;

}

.nav-bar {
    background-color: #bbc7c7;

    color: #444;
    cursor: pointer;
    padding: 1px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    margin-top: 10px;

    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1px;
    /* add shadow to top */
    /* box-shadow: 0 4px 8px rgba(32, 158, 0, 0.55); */
    /* gradient */
    background: linear-gradient(to top, #4d6868, #bbc7c7);

}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* gap: 5px; */
    margin: 5px;
    width: 100%;
}



.nav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition: background-color 0.3s ease; Smooth transition */
    padding: 5px;
    border-right: #06b82d;
    text-decoration: underline;
    text-decoration-color: #bbc7c7;
    color: #fff;
}

.nav-tile:hover {
    color: #fff;
    background-color: var(--custom-color);
    border-color: #0056b3;
    /* Hover border color of primary and secondary buttons */
    text-decoration: underline;
    text-decoration-color: var(--custom-color);

}

.fighters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
}

.fighter-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
    /* Smooth transition */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 1s, box-shadow 1s;
}


.fighter-tile:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: var(--custom-color);
    background: linear-gradient(to left, var(--custom-color, #fff), var(--custom-color2, #fff));
    /* Gradient from custom color to black */
    /* animated wipe to right */
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background 0.5s ease-in-out;
}

.fighter-image-link {
    display: block;
}

.image-container {
    position: relative;
    width: 200px;
    height: 150px;
}

.fighter-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.2s;
}

.fighter-image:hover {
    transform: scale(1.1);
    /* scale the character-name-overlay */
}

.character-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    border-radius: 0 0 10px 10px;
}


.image-container:hover .character-name-overlay,
.image-container:hover .fighter-image {
    transform: scale(1.1);
    transform: translateY(0);
    opacity: 1;
}

.fighter-tile:hover .character-name-overlay,
.image-container:hover .character-name-overlay {
    opacity: 1;
}


/* show page */

.header-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    /* background-color: #f0f1f1; */
    /* background-color: var(--custom-color); */
}

/* Base styles for .header-tile */
.header-tile {
    width: 100%;
    color: #ffffff;
    /* Text color of the header */
    border-top: 0px solid #dee2e6;
    /* Top border */
    border-radius: 15px;
    align-items: center;
}

/* Light mode styles */
.content.light-mode .header-tile {
    background: linear-gradient(to bottom,
            rgba(240, 240, 240, 0.8),
            /* Light gray with 80% opacity */
            rgba(255, 255, 255, 0.8)
            /* White with 80% opacity */
        );
}

/* Dark mode styles */
.content.dark-mode .header-tile {
    background: linear-gradient(to bottom,
            rgba(34, 34, 34, 0.8),
            /* Slightly lighter dark gray with 80% opacity */
            rgba(18, 18, 18, 0.8)
            /* Dark gray with 80% opacity */
        );
}

.header-tile2 {
    width: 100%;
    /* background-color: var(--custom-color2); */
    color: #ffffff;
    /* Text color of the modal header */
    border-top: 0px solid #dee2e6;
    /* Bottom border of the modal header */
    border-radius: 15px;
    align-items: center;
    /* margin: 40px; */
    background: linear-gradient(to bottom, var(--custom-color2, #fff), #fff);
}

/* Light mode styles */
.content.light-mode .header-tile2 {
    background: linear-gradient(to bottom,
            var(--custom-color2, #fff),
            /* Light gray with 80% opacity */
            rgba(255, 255, 255, 0.8)
            /* White with 80% opacity */
        );
}

/* Dark mode styles */
.content.dark-mode .header-tile2 {
    background: linear-gradient(to bottom,
            var(--custom-color2, #fff),
            /* Slightly lighter dark gray with 80% opacity */
            rgba(18, 18, 18, 0.8)
            /* Dark gray with 80% opacity */
        );
}

.header-character-title-container {
    width: 100%;
    /* background-color: #007bff; Background color of the modal header */
    background-color: var(--custom-color), #007bff;
    color: #ffffff;
    /* Text color of the modal header */
    border-top: 0px solid #dee2e6;
    /* Bottom border of the modal header */
    border-bottom: 1px solid #dee2e6;
    /* Bottom border of the modal header */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    align-items: center;
}

.header-character-title {
    margin: 0;
    /* Remove margin for the modal title */
    font-size: 1.25rem;
    /* Font size of the modal title */
    align-items: center;
    text-align: center;
}

.attack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    /* background-color: #f0f1f1; */
    background-color: var(--custom-color);
}

.attack-tile-header {
    width: 100%;
    background-color: #007bff;
    /* Background color of the modal header */
    color: #ffffff;
    /* Text color of the modal header */
    border-top: 0px solid #dee2e6;
    /* Bottom border of the modal header */
    border-bottom: 1px solid #dee2e6;
    /* Bottom border of the modal header */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    align-items: center;
}

.attack-tile-title {
    margin: 0;
    /* Remove margin for the modal title */
    font-size: 1.25rem;
    /* Font size of the modal title */
    align-items: center;
    text-align: center;
}


.attack-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
    /* Smooth transition */
    padding: 0px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 1s, box-shadow 1s;
    /* background: linear-gradient(to left, var(--custom-color, #fff), var(--custom-color2, #fff)); Gradient from custom color to black */
    background-color: #f0f1f1;

}

/* nth attack tile */
.data-tile:nth-child(odd) {
    background-color: #F3F3F3;
}

.data-tile:nth-child(even) {
    background-color: #E5E5E5;
}

.data-tile:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.data-tile {
    width: 100%;
    margin: 0;
    /* Remove margin for the modal title */
    font-size: 1.25rem;
    /* Font size of the modal title */
    align-items: center;
    /* text-align: center; */
    padding-left: 10px;
    padding-right: 10px
}

.attack-type-header {
    text-align: center;
    font-size: 1.5rem;
    margin-top: 20px;
    text-decoration: underline;
    text-decoration-color: #007bff;
    font-weight: bold;

}

.collapsible {
    background-color: #39b6ff;

    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18px;
    margin-top: 10px;

    text-align: center;
    font-size: 1.5rem;
    margin-top: 20px;
    text-decoration: underline;
    text-decoration-color: #007bff;
    font-weight: bold;
    border-radius: 10px;
}

.active,
.collapsible:hover {
    color: #ffffff;
    /* Text color of the header */
    background-color: #007bff;
    /* background-color: var(--custom-color); */
}

.collapsible-content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    /* background-color: #F1DA63; */
    background-color: var(--custom-color);
    /* rounded edge */
    border-radius: 7px;
}

.jsgif {
    min-height: 0px;
    visibility: disabled;
    height: 0px;
}

.jsgif.jsgif_toolbar {
    min-height: 0px;
    visibility: visible;
    height: 0px;
}

#canvasContainer {
    position: relative;
}

#canvasContainer canvas {
    max-width: 100%;
    max-height: 100%;
}

/* play/pause/forward controls */
.play-pause-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    /* Center the element horizontally */
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .fighters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .fighters-grid {
        grid-template-columns: 2fr;
    }
}

/* showpage */
@media (max-width: 992px) {
    .attack-grid {
        grid-template-columns: repeat(2, 1fr);

    }

    .fighters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .attack-grid {
        grid-template-columns: 1fr;
    }

    .home-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 20px;
        width: 100%;
    }

    .left-ad-space {
        display: none;
    }

    .right-ad-space {
        display: none;
    }

    .ad-space {
        display: none;
    }
}

@media (max-width: 425px) {
    .header-tile2 {
        display: none;
    }

    .header-grid {
        align-items: center;
        grid-template-columns: repeat(1, 1fr);
    }

    .nav-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        margin: 5px;
        width: 70%;
    }

    .nav-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: background-color 0.3s ease;
        /* Smooth transition */
        padding: 1px;
        border-right: #06b82d;
        text-decoration: underline;
        text-decoration-color: #bbc7c7;
        color: #fff;
        font-size: medium;
    }

    .h1-mobile {
        font-size: xx-large;
    }

    /* remove the left ad space */
    .left-ad-space {
        display: none;
    }

    .right-ad-space {
        display: none;
    }

    .ad-space {
        display: none;
    }

    .home-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 20px;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .fighters-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* nav buttons */
    .nav-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        margin: 5px;
        width: 70%;
    }

    .nav-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: background-color 0.3s ease;
        /* Smooth transition */
        padding: 1px;
        border-right: #06b82d;
        text-decoration: underline;
        text-decoration-color: #bbc7c7;
        color: #fff;
        font-size: x-small;
    }

    .nav-button {
        display: flex;
        background-color: #333;
        color: white;
        width: 100%;
        /* padding: 16px; */
        /* font-size: 16px; */
        border: none;
        cursor: pointer;
        font-size: x-small;
    }

    .top-nav-tile {
        display: flex;
        width: 80%;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        transition: background-color 0.3s ease;
        /* Smooth transition */
        /* default transparent background */
        background-color: transparent;
        padding: 1px;
        border-right: #06b82d;
        /* text-decoration: underline; */
        text-decoration-color: #bbc7c7;
        color: #fff;
        font-size: x-small;
    }

    .rundown-btn {
        display: flex;
        background-color: #333;
        justify-items: center;
        color: white;
        width: 100%;
        /* padding: 16px; */
        font-size: 10px;
        border: none;
        cursor: pointer;
        text-decoration: none;
        font-size: x-small;
    }

    .dropbtn {
        background-color: #333;
        color: white;
        width: 100%;
        /* padding: 16px; */
        font-size: 10px;
        border: none;
        cursor: pointer;
        font-size: x-small;
    }

    .modal-controls {
        font-size: x-small;
    }
}

/* Modal Content Styles */
.modal-content {
    background-color: #fefefe;
    /* Background color of the modal content */
}

.modal-body {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Center-align content within the modal body */

}

.modal-content canvas {
    max-width: 100%;
    /* Adjust to your desired maximum width */
    max-height: 600px;
    /* Adjust to your desired maximum height */
    /*width: auto;*/
    width: -webkit-fill-available;
    /* Ensures responsiveness */
    height: auto;
    /* Ensures responsiveness */
}

.modal-footer {
    justify-content: center;
    /* Center-align content within the modal footer */
}

/* GIF Image Styles */
#modalImage {
    max-width: 10px;
    /* Ensure the GIF image doesn't exceed its container's width */
    max-height: 10px;
    /* Ensure the GIF image doesn't exceed its container's width */
    /* max-height: 300px; Limit the height of the GIF image */
    margin-bottom: 10px;
    /* Add margin below the image */
}

.modal-controls button {
    height: auto;
    /* Override inline height if necessary */
    max-height: 38px;
    /*background-color: green;*/
}

.modal-controls {
    display: grid;
    align-items: start;
    justify-self: center;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

.slider-controls {
    display: flex;
    align-items: center;
    width: 80%;
    margin: 0 auto;
    /* Center the element horizontally */
}

.button-controls {
    display: flex;
    width: 80%;
    height: 50%;
    margin: 0 auto;
}

/* Play/Pause Button Styles */
#modalPlayBtn,
#modalPauseBtn {
    margin-right: 10px;
    /* Add margin between buttons */
}

/* Additional Styling for Modal Header and Title (optional) */
.modal-header {
    background-color: #007bff;
    /* Background color of the modal header */
    color: #ffffff;
    /* Text color of the modal header */
    border-bottom: 1px solid #dee2e6;
    /* Bottom border of the modal header */
}

.modal-title {
    margin: 0;
    /* Remove margin for the modal title */
    font-size: 1.25rem;
    /* Font size of the modal title */
}

/* Close Button Styling (optional) */
.close {
    color: #ffffff;
    /* Color of the close button */
    opacity: 1;
    /* Opacity of the close button */
}

.close:hover {
    color: #ffffff;
    /* Hover color of the close button */
    opacity: 0.75;
    /* Opacity of the close button on hover */
}

/* Button Styles (optional) */
.btn-primary,
.btn-secondary {
    background-color: #007bff;
    /* Background color of primary and secondary buttons */
    border-color: #007bff;
    /* Border color of primary and secondary buttons */
}

.btn-primary:hover,
.btn-secondary:hover {
    background-color: #0056b3;
    /* Hover background color of primary and secondary buttons */
    border-color: #0056b3;
    /* Hover border color of primary and secondary buttons */
}

/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

html,
body {
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

.spacer {
    flex: 1;
    min-height: 100px;
}

.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    width: 100%;
    /* max-width: 1440px; */
    min-height: 100px;
    position: relative;
    bottom: 0;
    z-index: 1000;
    border-top: 1px solid #333;

}

.footer-support {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    margin: 5px;
    width: 50%;
    align-items: center;
    background-color: #333;
    color: white;
    text-align: center;
}

/* foot-support 2nd child row */
.footer-support2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin: 5px;
    width: 50%;
    align-items: center;
    background-color: #333;
    color: white;
    text-align: center;
}


/* .glossary-entry-header{

} */
/* entry for darkmode */
.content.dark-mode .glossary-entry-header {
    color: white !important;
    /* Ensure text color is applied */
}

.content.dark-mode .glossary-entry-content {
    color: white !important;
    /* Ensure text color is applied */
}

/* for p */
.content.dark-mode p {
    color: white !important;
    /* Ensure text color is applied */
}

/* for h2 */
.content.dark-mode h2 {
    color: white !important;
    /* Ensure text color is applied */
}

/* for h3 */
.content.dark-mode h3 {
    color: white !important;
    /* Ensure text color is applied */
}

/* for h4 */
.content.dark-mode h4 {
    color: white !important;
    /* Ensure text color is applied */
}

/* for h5 */
.content.dark-mode h5 {
    color: white !important;
    /* Ensure text color is applied */
}

/* for ul */
.content.dark-mode ul {
    color: white !important;
    /* Ensure text color is applied */
}

/* for ol */
.content.dark-mode ol {
    color: white !important;
    /* Ensure text color is applied */
}

/* for li */
.content.dark-mode li {
    color: white !important;
    /* Ensure text color is applied */
}

/* blog tile */
.content.dark-mode .blog-tile {
    background-color: #333;
    color: white;
}

.blog-container {

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    flex: 1 1 100%;
    max-width: 100%;
    margin: 10px 0;
}

/* hide the banner if over 768 */
.banner {
    display: none;
}


/* if screen is <768 show the banner-ad */
@media (max-width: 768px) {


    .banner {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 100px;
        /* background-color: #8c8c8c; */
        background-color: #333;
        outline: 1px solid #c6c6c6;
        /* background-color: inherit; */
        /* Change color as needed */
        color: white;
        text-align: center;
        padding: 10px;
        z-index: 1001;
        /* Make sure it stays on top of other elements */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .banner-content {
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #06b82d;  */
        max-height: 100px;
        max-width: 80%;
    }

    .banner-ad-space {
        display: grid;
        display: none;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin-top: 20px;
        width: 100%;
        /* background-color: #333; */
        background-color: inherit;
        color: white;
        justify-content: center;
        text-align: center;
    }

    .home-container {
        flex-direction: column;
        padding: 10px;
    }

    .left-ad-space,
    .right-ad-space {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 10px 0;
    }

    .blog-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        flex: 1 1 100%;
        max-width: 100%;
        margin: 10px 0;
    }

    .blog-container h2 {
        font-size: 1.5rem;
    }

    .blog-container p {
        font-size: 0.9rem;
    }

    .table-container {
        display: block;
        overflow-x: auto;
        width: 100%;

    }

}

.close-button {
    /* background: rgb(118, 118, 118); */
    border: none;
    background-color: transparent;
    /* outline: 1px solid red; */
    color: white;
    font-size: 60px;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-80%);
}

/* guides page */
.guides-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    flex: 1 1 100%;
    max-width: 100%;
    margin: 10px 0;
}

/* guides header */
/* match the collapsible styling */
.guides-header {
    position: relative;
    color: white;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #8C57FC;
    overflow: hidden;
    z-index: 1;
    /* Ensure the text is above the animation */
}

.guides-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    /* Start with 0 width */
    height: 100%;
    background-color: #00447c;
    z-index: -1;
    /* Behind the text */
    transition: width 0.4s ease;
    /* Adjust transition speed as needed */
}

.guides-header:hover::before {
    width: 100%;
    /* Expands fully on hover */
}

.guides-header:hover {
    color: #fff;
    /* Keeps text white when hovering */
}


/* blog tile */
.blog-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
    /* Smooth transition */
    padding: 10px;
    border: 1px solid #ddd;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 1s, box-shadow 1s;
    /* shrink the content */

}

.blog-tile img {
    max-width: 100%;
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Remove any extra space below the image */
}

.blog-tile {
    overflow: hidden;
    /* Hide any content that overflows the container */
}

.blog-tile .image-container {
    width: 100%;
    /* Ensure it takes the full width of the blog tile */
    height: auto;
    /* Maintain the height based on the content */
    overflow: hidden;
    /* Hide overflow */
}

.wp-embed-aspect-16-9 {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

/* Blog content */
.blog-container p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Responsive Images */
.blog-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}

/* Responsive Videos */
.blog-container iframe,
.blog-container video {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-bottom: 20px;
}

.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wp-embed-aspect-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Caption Styling */
.wp-element-caption {
    font-size: 0.875rem;
    color: #666;
    text-align: center;
    margin-top: 5px;
}

/* write an image container around the embedded */
.wp-block-embed__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.blog-category-pin {
    background-color: #333;
    color: #bbc7c7 !important;
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: inline-block;
    /* justify left */
    justify-self: left !important;
    text-align: center !important;
    outline: 1px solid #808080;
}

.table-container {
    display: block;
    overflow-x: auto;
    width: 100%;
}

.table-wrapper {
    display: table;
    width: 100%;
    min-width: 1000px;
    /* Ensure the table expands as needed */
}

.col-head-left-sticky {
    position: sticky;
    left: -1px;
    z-index: 1;
    background-color: rgb(214, 214, 214);
}

.col-data-left-sticky {
    position: sticky;
    left: -1px;
    z-index: 1;
    background-color: rgb(214, 214, 214);
}

.sort-arrow {
    font-size: 12px;
    /* Adjust size to your preference */
    margin-left: 5px;
    cursor: pointer;
}

.sort-arrow-up {
    display: inline;
}

.sort-arrow-down {
    display: inline;
}

.title-link {
    display: flex;
    background-color: #333;
    color: white !important;
    width: 100%;
    justify-content: center;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.title-link:hover {
    background-color: #471c1c;
    color: #fff;
    text-decoration: none;
}

.title-link a {
    color: inherit;
    /* Inherits the color from the parent */
    text-decoration: none;
    /* Removes the underline */
}

.title-link a:hover {
    color: inherit;
    /* Optional: keeps the color the same on hover */
    background-color: #471c1c;
    text-decoration: none;
}

/* palette tile grid */
.palette-grid {
    /* inherit background color from body */
    /* background-color: inherit; */
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    /* gri colums reflexive  */
    grid-template-columns: repeat(auto-fill, minmax(200px, 4fr));
    gap: 20px;
    margin-top: 20px;
    width: auto;
}

.palette-tile {
    /* inherit background color from body */
    /* background-color: #c3c4c6; */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
    /* Smooth transition */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* hover palette-tile */
.palette-tile:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background-color: var(--custom-color, #fff);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: background 0.5s ease-in-out;
}



/* darkmode pallete */
.palette-grid.dark-mode {
    background-color: #333;
}


.palette-tile.light-mode {
    background: linear-gradient(to bottom,
            rgba(240, 240, 240, 0.8),
            /* Light gray with 80% opacity */
            rgba(255, 255, 255, 0.8)
            /* White with 80% opacity */
        );
}

.palette-tile.dark-mode {
    background: linear-gradient(to bottom,
            rgba(34, 34, 34, 0.8),
            /* Slightly lighter dark gray with 80% opacity */
            rgba(18, 18, 18, 0.8)
            /* Dark gray with 80% opacity */
        );
    background-color: #471c1c;
}




.collapsible-content.content.dark-mode {
    background-color: #333;
    color: white;
}

.palette-modal-grid {
    display: grid;
    grid-template-columns: 3fr 10fr 3fr;
    /* First and last columns are smaller */
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    position: relative;
    /* Enables child positioning */
}

.palette-modal-grid> :first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #b3b3b3;
    opacity: 0.2;
    width: 90%;
    /* Adjust width as needed */
    position: relative;
    transform: translateX(0%);
    /* Adjust the overlap by moving it right */
    z-index: 1;
    /* Ensures it appears above the second item */
}

.palette-modal-grid> :nth-child(2) {
    position: relative;
    z-index: 0;
    /* Places it below the first item */
}

.palette-modal-grid> :last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s ease;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* transparent background */
    background-color: #b3b3b3;
    opacity: 0.2;

    width: 90%;
    /* Adjust width as needed */
    position: relative;
    transform: translateX(0%);
    /* Adjust the overlap by moving it right */
    z-index: 1;
    /* Ensures it appears above the second item */
}






/* character ads */
.banner2 {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10%;
    background-color: #333;
    outline: 1px solid #c6c6c6;
    color: white;
    text-align: center;
    padding: 10px;
    z-index: 1001;
    /* Make sure it stays on top of other elements */
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner2-content {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #06b82d;  */
    max-height: 100px;
    max-width: 80%;
}

.banner2-ad-space {
    display: grid;
    display: transparent;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    background-color: #333;
    color: white;
    justify-content: center;
    text-align: center;
}





.shield-advantage {
    position: relative;
    /* Make it a reference for the popup positioning */
    display: inline-block;
    cursor: pointer;
    /* Show pointer to indicate it's interactive */
}

.shield-advantage::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    /* Position above the element */
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    background-color: rgb(90, 90, 90);
    /* Black background with opacity */
    color: #fff;
    border-radius: 1px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    /* Initially hidden */
    visibility: hidden;
    /* Prevent it from being in the flow */
    transition: opacity 0.3s, visibility 0.3s;
    /* Smooth transition for showing the popup */
    z-index: 1;
}

.shield-advantage:hover::after {
    opacity: 1;
    /* Show the popup */
    visibility: visible;
    /* Make the tooltip visible */
}

.warning-banner {
    background-color: #c1612d;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
    min-height: 50px;
    position: relative;
    bottom: 0;
    z-index: 0;
    border-top: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 1vw, 0.9rem);
    /* Dynamically resizes text */
    white-space: linebreak;
    /* Keeps text on one line */
}

.warning-banner p {
    margin: 0;
    /* Removes default margin for p tag */
}