*::-webkit-scrollbar-thumb {
    /* border-radius: 5px; */
    /* background: linear-gradient(180deg, rgba(3, 153, 56, 0.3) 0%, rgba(14, 121, 70, 0.3) 33.3%, rgba(24, 89, 83, 0.3) 66.6%); */
    background-color: #bbbbbb;
}
*::-webkit-scrollbar {
    width: 6px;
}

@keyframes slideIn {
    from {
        transform: translateY(-100%) translateX(-50%);
    }
    to {
        transform: translateY(0) translateX(-50%);
    }
}

@keyframes slideOut {
    from {
        transform: translateY(0) translateX(-50%);
    }
    to {
        transform: translateY(-100%) translateX(-50%);
    }
}

.popUp {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
    background: var(--background-color); /* Change this to the background color you want */
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--secondary-color); /* Add border to the left */
    border-right: 1px solid var(--secondary-color); /* Add border to the right */
    border-bottom: 1px solid var(--secondary-color); /* Add border to the bottom */
    border-top: none; /* Remove border from the top */
    border-radius: 0 0 16px 16px; /* Add border radius to the bottom-left and bottom-right corners */
    padding: 10px; /* Add padding similar to buttons */
    font-family: Arial, sans-serif; /* Use the same font as buttons */
    font-size: 14px; /* Use the same font size as buttons */
    color: var(--text-color); /* Use the same text color as buttons */
    text-align: center; /* Center the text */
    z-index: 2000;
}

.popUp > h2 {
    margin: 0;
    /* padding: 10px; */
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    /* Add other styles as needed */
}
.popUp > p {
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: var(--font-size);
    /* Add other styles as needed */
}

.popUp > a {
    text-decoration: none;
    color: var(--a-colour);
    /* Add other styles as needed */
}

.popUp > a:hover {
    color: var(--a-hover-colour);
    /* Add other styles as needed */
}

:root {
    --background-color: #ffffff;
    --text-color: #333333;
    --secondary-color: #ccc;
    --a-colour: #00e;
    --a-hover-colour: rgb(63, 63, 255);
}

[data-theme="dark"] {
    --background-color: #333333;
    --text-color: #e8eaed;
    --secondary-color: #414141;
    --a-colour: #0075bd;
    --a-hover-colour: #024e77;
}

:root {
    --font-size: 16px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
}

[data-theme-font="fontBig"] {
    --font-size: 20px;
    --font-size-h1: 34px;
    --font-size-h2: 26px;
}

[data-theme-font="fontHuge"] {
    --font-size: 24px;
    --font-size-h1: 36px;
    --font-size-h2: 28px;
}

/* @media (prefers-color-scheme: dark) {
    .popUp {
        background-color: #333333 !important;
        color: #e8eaed !important;
        border-left: 1px solid #414141 !important;
        border-right: 1px solid #414141 !important;
        border-bottom: 1px solid #414141 !important;
    }
} */