.high-contrast {
    background-color: black;
    color: yellow;
}

.light-background {
    background-color: white;
    color: black;
}

.remove-colors {
    filter: grayscale(1);
}
a:link.underline, a:hover.underline, a:visited.underline{
    text-decoration: underline;
}
/* .dark{
    background-color: #000;
    color: #fff;
} */
/* 
.invertcontrast{
    filter: hue-rotate(180deg);
    filter: invert(1);
} */
.high-contrast{
    background-color: #000;
    color: #ffff00;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat;
}
*::-webkit-scrollbar{
    display: none;
}

body, html {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    /* text-wrap: wrap; */
}

.accessibility-container {
    position: fixed;
    right: 15px;
    top: 5vw;
    /* transform: translateY(-100%); */
    display: flex;
    align-items: top;
    z-index: 1000000;
    min-height: 305px;
    user-select: none;
    
}

.toggle-button {
    background-color: rgba(36, 40, 50, 1);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 24px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
}

.toggle-button span {
    width: 30px;
    height: 30px;

}
.toggle-button.high-contrast, .toggle-button.high-contrast svg.high-contrast, path.high-contrast, ul.list.high-contrast{
    background-color: rgba(36, 40, 50, 1);
}
.toggle-button svg {
    width: 30px;
}
.label.high-contrast, svg.high-contrast{
    background-color: transparent;
}
a:link{
    text-decoration: none;
    /* color: #000; */
}
a:hover{
text-decoration: none;
/* color: #000; */
}
a:visited{
text-decoration: none;
/* color: #000; */
}
.panel {
    background-color: #333;
    color: white;
    width: 200px;
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    text-align: center;
}

.panel h2 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #ddd;
}

.panel ul {
    list-style-type: none;
}

.panel ul li {
    margin: 5px 0;
}

.panel ul li a {
    color: #ddd;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.panel ul li a:hover {
    color: #fff;
}
span#editKon, span#editBri{
    border-bottom: #fff 1px solid;
    outline: none;
}
#card.show {
    display: flex;
}

/* From Uiverse.io by Na3ar-17 */
#card {
    width: fit-content;
    /* background-color: rgba(36, 40, 50, 1);
background-image: linear-gradient(135deg, rgba(36, 40, 50, 1) 0%, rgba(36, 40, 50, 1) 40%, rgba(37, 28, 40, 1) 100%); */

    background-color: rgba(36, 40, 50, 1);
    background-image: linear-gradient(139deg,
            rgba(36, 40, 50, 1) 0%,
            rgba(36, 40, 50, 1) 0%,
            rgba(37, 28, 40, 1) 100%);

    border-radius: 0 0 0 10px;
    padding: 15px 0px;
    display: none;
    flex-direction: column;
    gap: 10px;
}

#card .separator {
    border-top: 1.5px solid #42434a;
}

#card .list {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px;
}
#card .list .element,
        #card .list #range,
        #card .list #rangeBri {
            display: flex;
            align-items: center;
            color: #fff;
            gap: 10px;
            transition: all 0.3s ease-out;
            padding: 7px;
            border-radius: 6px;
            cursor: pointer;
            background-color: #000;
        }

        #card .list #range,
        #card .list #range li#range,
        #card .list #rangeBri,
        #card .list #rangeBri li#rangeBri {
            width: 100%;
            margin-top: -10px;
            padding-top: 10px;
            border-radius: 0 0 6px 6px;
        }

        #card .list #range input, #card .list #rangeBri input {
            width: 100%;
            background-color: transparent;
            filter: drop-shadow(0 0 10px rgb(0, 0, 0));
        }

        #card .list #range, #card .list #rangeBri {
            display: none;
        }

        /*********** Baseline, reset styles ***********/
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            cursor: pointer;
            width: 25rem;
        }

        /* Removes default focus */
        input[type="range"]:focus {
            outline: none;
        }

        /******** Chrome, Safari, Opera and Edge Chromium styles ********/
        /* slider track */
        input[type="range"]::-webkit-slider-runnable-track {
            background-color: #00a6ff;
            border-radius: 10px;
            height: 10px;
        }

        /* slider thumb */
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            /* Override default look */
            appearance: none;
            margin-top: -3px;
            /* Centers thumb on the track */
            background-color: #0075ff;
            border-radius: 50%;
            height: 16px;
            width: 1rem;
        }


        /*********** Firefox styles ***********/
        /* slider track */
        input[type="range"]::-moz-range-track {
            background-color: #00a6ff;
            border-radius: 10px;
            height: 10px;
        }

        /* slider thumb */
        input[type="range"]::-moz-range-thumb {
            background-color: #0075ff;
            border: none;
            /*Removes extra border that FF applies*/
            border-radius: 50%;
            height: 16px;
            width: 1rem;
        }



        /* #card .list #contrast {
            border-radius: 6px 6px 0 0;
        } */

        #card:has(.list #contrast:hover) .list #range,
        #card:has(.list #range:hover) .list #contrast {
            background-color: #5353ff;
            transform: translate(1px, -1px);
        }

        #card .list .element svg {
            width: 19px;
            height: 19px;
            transition: all 0.3s ease-out;
        }

        #card .list .element .label {
            font-weight: 600;
            font-size: 20px;
        }

        #card .list .element:hover,
        #card .list #range:hover {
            background-color: #5353ff;
            color: #ffffff;
            transform: translate(1px, -1px);
        }

        #card .list .delete:hover {
            background-color: #5353ff;
        }

        #card .list .element:active,
        #card .list #range:active {
            transform: scale(0.99);
        }

        #card .list:not(:last-child) .element:hover svg {
            stroke: #ffffff;
        }

        #card .list:last-child svg {
            stroke: #fff;
        }

        #card .list:last-child .element,
        #card .list:last-child #range {
            color: #fff;
        }

        #card .list:last-child .element:hover {
            background-color: #8e2a2a;
        }

/* Dodajemy animację do panelu*/
@keyframes slideIn {
    from {
        transform: translate(calc(100% - 50px), 0);
    }

    to {
        transform: translate(0, 0);
    }
}

@keyframes slideOut {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(calc(100% - 50px), 0);
    }
}

div:has(#card) {
    transform: translate(0, 0);
    transition: transform 0.3s linear;
}

div:has(#card.show) {
    transform: translate(0, 0);
    animation: slideIn 0.3s forwards;
}

div:has(#card.hide) {
    animation: slideOut 0.3s forwards;
}
@media (max-width: 1000px) {
    .accessibility-container{
        top: 75px;
    }
}