:root { 
    --BackGround: hsl(226,25%,17%);
    --BackGroundPill: hsl(225,23%,24%);
    --Off: hsl(226,11%,37%);
    --Neutral300: hsl(0,0%,78%);
    --Text: hsl(200,60%,99%);
    --On: hsl(3,86%,64%);
    --Brick: hsl(3,71%,56%);

    --gradient: linear-gradient(180deg, #040918 0%, #091540 100%);
    --visibility: visible;
    --CustomLogo: contrast(0.85) brightness(2.5);
    }

:root[data-theme="light"] {
    --On: hsl(3,77%,44%);
    --Off: hsl(0,0%,78%);
    --BackGround: hsl(200,60%,99%);
    --BackGroundPill:hsl(200,60%,99%);
    --Text: hsl(227,75%,14%);

    --gradient: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);
    --visibility: hidden;
    --CustomLogo: contrast(1) brightness(1);
}

html {
    font-size: 16px;
    font-family: 'Noto Sans', sans-serif;
}

body {
    background-image: var(--gradient);
}

.upper_bar {
    border-radius: 10px;
    background-color: var(--BackGround);
}

.logo_extensions {
    position: absolute;
    max-width: 100%;
    filter: var(--CustomLogo);
}

.abc {
    width: 50px;
    height: 50px;
    overflow: hidden; 
}

.theme_button {
    padding: 10px;
    background-color: var(--BackGroundPill);
    border-radius: 5px;
}

.theme_button:hover, .pill:hover, .remove_button:hover {
    cursor: pointer;
    background-color: var(--Off);
}

h1, h2 {
    color: var(--White);
    font-weight: 700;
    font-family: 'Noto Sans';
}

.list_title {
    font-size: 2rem;
    color: var(--Text);
}

nav {
    background-color: transparent;
    gap: 0.5rem;
}

.pill {
    border-radius: 25px;
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    color: var(--Text);
    background-color: var(--BackGroundPill);
    font-weight: 400;
}

.extensions_list {
    @media screen and (min-width: 600px) {
        display: grid;
        column-gap: 1rem;
        grid-template-columns: auto auto;
    }

    @media screen and (min-width: 1024px) {
        display: grid;
        column-gap: 1rem;
        grid-template-columns: auto auto auto;
    }
}

.extension {
    border: 1px solid var(--Off);
    width: 330px;
    background-color: var(--BackGround);
    box-shadow: none;
}

.switch {
    height: 20px;
    width: 40px;
    border-radius: 10px;
}

.active, .active_sort {
    background-color: var(--On);
    color: var(--Text);
}

.inactive_sort {
    background-color: var(--BackGroundPill);
} 

.pill:hover, .remove_button:hover{
    color: hsl(227,75%,14%);
}

.inactive {
    background-color: var(--Off);
}

.switch_button {
    background-color: hsl(200,60%,99%);
    height: 20px;
    width: 20px;
    border-radius: 50%;
}

.on {
    border: 1px solid var(--On);
}

.off {
    border: 1px solid var(--Off);
}

.remove_button {
    border: 1px solid var(--Neutral300);
    border-radius: 25px;
    padding: 10px;
    padding-left: 14px;
    padding-right: 14px;
    font-weight: 500;
    background-color: transparent;
    color: var(--Text);
}

.remove_button:hover{
    background-color: var(--On);
}

.none, .removed {
    display: none !important;
}

.shown {
    display: block;
}

:focus {
    outline: 2px solid var(--On);
}