html,
body {
    min-height: 100vh;
    overflow: auto;
}

:root {
    --pastel-white: rgb(250, 248, 246);
    --pastel-black: rgb(29, 28, 26);
    --pastel-red: rgb(255, 138, 138);
    --pastel-blue: rgb(120, 171, 168);
    --pastel-lightblue: rgb(120, 171, 168);
    --pastel-green: rgb(200, 207, 160);
    --pastel-purple: rgb(177, 175, 255);
    --pastel-yellow: rgb(252, 220, 148);
    --bang-red: rgb(255, 0, 0);
}

/* Navigation-Main*/
.navbar {
    background-image: linear-gradient(145deg, var(--pastel-yellow) 25%, var(--pastel-yellow) 40%, var(--pastel-white) 50%, var(--pastel-green) 70%, var(--pastel-green) 100%);
}

body {
    background-color: white;
}

footer {
    background-color: var(--pastel-green);
}

.droppy {
    flex-wrap: wrap;
}

/* Item Card */

.card-header {
    color: var(--pastel-black);
    background-color: var(--pastel-green);
}

.image-card {
    aspect-ratio: 1;
    width: 100%;
    height: auto;
}

.card-footer {
    color: var(--pastel-black);
    background-color: var(--pastel-green);
}

/* Button */
.unify-btn {
    color: var(--pastel-black);
    background-color: var(--pastel-yellow);
}

.unify-btn:hover,
.unify-btn:focus,
.unify-btn:active,
.unify-btn.active {
    transition-duration: 0.4s;
    color: var(--pastel-black);
    border-color: var(--pastel-black);
    background-color: var(--pastel-green);
}

/* xs */
.logo {
    width: 49px;
    height: auto;
}

/* basket */
.basket-qty {
    color: var(--pastel-white);
    background: var(--bang-red);
    border: 2px solid var(--pastel-white);
    border-radius: 50%;
    text-align: center;
    font-size: 11px;
    height: 15px;
    width: 14px;
    position: absolute;
    box-sizing: content-box;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 1px;
    right: 10px;
}

.basket-btn {
    color: rgb(29, 28, 26);
    position: relative;
}

.basket-btn:hover,
.basket-btn:focus,
.basket-btn:active,
.basket-btn.active {
    color: var(--pastel-lightblue);
    transition-duration: 0.4s;
    background-color: var(--pastel-white);
}

.normal-btn {
    color: rgb(29, 28, 26);
}

.normal-btn:hover,
.normal-btn:focus,
.normal-btn:active,
.normal-btn.active {
    flex-grow: 0 0 auto;
    color: var(--pastel-lightblue);
    transition-duration: 0.4s;
    background-color: var(--pastel-white);
}

.footer>div>div>ul>li {
    padding-bottom: 8px;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    top: 58px;
    left: 0px;
    padding: 10px;
}