* {
    margin: 0;
    padding: 0;
}



html, body {
    width: 100%;
}

html[color-preferences="light"] {
    .filter-container {
        background: linear-gradient(90deg, rgb(255, 253, 242) 0%, rgba(255, 253, 242, 0.8) 10%, rgba(255, 253, 242, 0.8) 90%, rgb(255, 253, 242) 100%);
        box-shadow: 0px 0px 5px 5px rgba(255, 253, 242, 0.8);
    }
    
    .filter {
        background-color: rgb(255, 249, 231);
        box-shadow: 0px 0px 2px 2px rgba(155, 155, 155, 0.5);

        p {
            color: black;
        }
    }

    .shadow {
        box-shadow: inset 0px 0px 5px 5px rgb(255, 253, 242);
    }

    .filter ul:hover {
        background-color: rgb(248, 240, 220);
    }

    .filter t {
        color: black;
    }

    .controls div {
        background-color: rgba(41, 41, 41, 0.5);
    }

    .banner-container::after {
        background: linear-gradient(transparent 70%, #fff);
    }

    path {
        stroke: #fff;
        fill: #fff;
    }
}

html[color-preferences="dark"] {
    .filter-container {
        background: linear-gradient(90deg, rgb(15, 15, 14) 0%, rgba(15, 15, 14, 0.8) 10%, rgba(15, 15, 14, 0.8) 90%, rgb(15, 15, 14) 100%);
        box-shadow: 0px 0px 5px 5px rgba(15, 15, 14, 0.8);
    }
    
    .filter {
        background-color: rgb(37, 37, 35);
        box-shadow: 0px 0px 2px 2px rgba(61, 61, 59, 0.8);

        p {
            color: white;
        }
    }

    .shadow {
        box-shadow: inset 0px 0px 5px 5px rgb(22, 22, 22);
    }

    .filter ul:hover {
        background-color: rgb(48, 48, 45);
    }

    .filter t {
        color: white;
    }

    .banner-container::after {
        background: linear-gradient(transparent 70%, rgb(22, 22, 22));
    }

    path {
        stroke: #fff;
        fill: #fff;
    }
}

.banner-container {
    width: 100%;
    height: 740px;
    translate: 0;
    opacity: 1;
    overflow: hidden;
    user-select: none;

    .banner {
        position: absolute;
        display: flex;
        justify-content: center;
        height: 740px;
        width: 100%;
        overflow: hidden;
        transition: left 800ms;

        img {
            height: 740px;
        }
    }
}

.banner-container::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}

.controls {
    position: absolute;
    display: flex;
    bottom: 50px;
    left: calc(50% - 65px);
    gap: 5px;
    height: 40px;
    z-index: 1;
    user-select: none;

    div {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 400ms;
        height: 40px;
        width: 40px;
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        color: white;
        transition: all 200ms;
    }
    
    .right {
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        font-size: 30px;

        span {
            translate: -3px;
        }
    }
    
    .left {
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        font-size: 30px;

        span {
            translate: 3px;
        }
    }

    .one {
        span {
            font-size: 50px;
            margin-top: 5px;
        }
    }

    .two {
        span {
            font-size: 50px;
            margin-top: 5px;
        }
    }

    div:hover {
        background-color: rgba(22, 189, 0, 0.8) !important;
        cursor: pointer;
    }

    .right:hover {
        span {
            translate: 3px;
        }
    }
    
    .left:hover {
        span {
            translate: -3px;
        }
    }
}

.banner2-active {
    left: 0 !important;
}

.banner-active {
    left: -100% !important;
}

/* ----------------------------- SHOP-CONTAINER ----------------------------- */

.shop-container {
    margin-top: 120px;
    margin-bottom: 20px;

    .bottom {
        height: 10px;
        width: 100%;
    }
    
    .filter-container {
        position: sticky;
        display: flex;
        justify-content: center;
        z-index: 2;
        width: 100%;
        backdrop-filter: blur(15px);
        padding-bottom: 10px;
        padding-top: 13px;
        margin-bottom: 8px;
        top: 70px;
    }
    
    .filter {
        transition: background-color 400ms, height 200ms;
        display: flex;
        flex-direction: column;
        width: 600px;
        height: 40px;
        border-radius: 20px;
        font-size: 20px;
    
        ul {
            display: flex;
            flex-direction: row;
            cursor: pointer;
            width: calc(100% - 14px);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 26px;
            padding: 7px;
            border-radius: 20px;
            transition: all 200ms;

            li {
                margin-right: 30px;
                color: transparent;
            }

            .menu-end-li {
                margin-right: 0;
            }
        }

        p {
            transition: all 400ms;
        }
    }
    
    .filter-active {
        height: 400px;
    }
    
    .category-active {
        height: 300px !important;
        overflow-y: scroll !important;
        padding-top: 10px !important;
    }
    
    svg {
        transition: all 200ms;
    }
    
    .svg-active {
        transform: rotateX(180deg) !important;
    }
    
    .category {
        padding-top: 0;
        padding-left: 10px;
        overflow: hidden;
        height: 0;
        transition: all 200ms;
    }
    
    .elements {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    
        img {
            height: 300px;
            width: 300px;
            transition: all ease-in-out 400ms;
        }
    }
    
    .hover-element {
        opacity: 0;
        translate: 0 50px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 25px;
        height: 25px;
        padding: 10px;
        background-color: rgb(255, 253, 242);
        border-radius: 10px;
        bottom: 20px;
        left: calc(50% - 22.5px);
        transition: all 400ms;
        box-shadow: 0 0 5px 5px rgb(0, 0, 0, 0.2);
        font-size: 14px;
    
        img {
            height: 25px;
            width: 25px;
            background-color: rgb(255, 253, 242);
            transition: all 400ms;
        }
    
        .d {
            transition: all 400ms;
            width: 0px;
            overflow: hidden;
        }
    
        .c {
            display: flex;
            width: 65px;
            color: black;
            transition: all 400ms;
        }
    }
    
    .element {
        position: relative;
        height: 300px;
        width: 300px;
        background-color: lightgray;
        overflow: hidden;
    
        a {
            display: block;
        }
    }
    
    .element:hover {
        .img {
            transform: scale(1.1);
        }
    
        .hover-element {
            opacity: 1;
            translate: 0 0;
        }
    }
    
    .hover-element:hover {
        background-color: rgb(236, 255, 231);
        width: 90px;
        left: calc(50% - 50px);
        cursor: pointer;
        
        img {
            translate: 0;
            background-color: rgb(236, 255, 231);
        }
    
        .d {
            width: 65px;
        }
    }
    
    .mono:hover {
        background-color: rgb(255, 93, 93) !important;
        img {
            background-color: rgb(255, 93, 93) !important;
        }
    }
    
    .shadow {
        position: absolute;
        top: 0;
        left: 0;
        height: 300px;
        width: 300px;
    }
    
    .mono-chromatic {
        filter: grayscale(100%);
    }
}

/*  */

@media only screen and (max-width: 600px) {

}