body {
    background-image: linear-gradient(#bebbcd, #8c85ad);
    font-family: 'Crimson Text', serif;
    font-size: 1.3rem;
}

a {
	color: rgb(37, 1, 58);
    text-decoration: none;
}

a:hover {
    color: rgb(144, 3, 226);
}

nav, h1, h2, h3{
    font-family: 'Poppins', sans-serif;
}

.dropdown-menu, .nav-link, .btn-outline-dark:hover {
    background-color:#8e87aa;
}

.dropdown-item:hover, .nav-link:hover {
    background-color: #bebbcd;
}

footer {
    font-size: 1rem;
}


/* Custom border start */
.border-sm-bottom {
    border-bottom: 1px solid black;
}
.border-sm-right-0 {
  border-right: 0;
}
.border-sm-left-0 {
  border-left: 0;
}
@media (min-width: 768px) {
    .border-md-bottom-0 {
        border-bottom: 0;
    }
    .border-md-right {
        border-right: 1px solid black;
    }
    .border-md-left {
        border-left: 1px solid black;
    }
}
/* Custom border end */




.card-body .btn-outline-dark {
    font-family: 'Crimson Text', serif;
    font-size: 1.3rem;
}

.prod {
    background-color:#8e87aa;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}


.inputwrapper {
    margin-bottom: 20px;

}

input[type=text], input[type=email]{
    padding: 12px 20px;
    width: 75%;
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    box-sizing: border-box;
    
}

textarea {
    padding: 12px 20px;
    width: 100%;
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    box-sizing: border-box;
}

.mybutton {
    font-family: 'Poppins', sans-serif;
}

.gallery2 {
    transition: transform .2s;
}

.gallery2:hover {
    transform: scale(2);
    z-index: 5;
}

.nick {
    margin-top: 10px;
    color: rgb(95, 0, 95);
}


#snipcart {
    /* ----------------- 
        Colors
    ----------------- */
    --color-default: #000000;
    --color-alt: hsl(0, 0%, 15%);
    --color-icon: rgb(37, 1, 58);
    --color-success: hsl(145, 41%, 34%);
    --color-error: #000000;

    --color-link: rgb(37, 1, 58);
    --color-link-hover: rgb(144, 3, 226);
    --color-link-active: var(--color-link);
    --color-link-focus: var(--color-link);

    --color-input: var(--color-default);
    --color-input-hover: var(--color-input);
    --color-input-focus: var(--color-input);
    --color-input-checked: var(--color-input);
    --color-input-disabled: var(--color-alt);
    --color-input-error: var(--color-error);
    --color-inputLabel: var(--color-default);
    --color-inputLabel-hover: var(--color-inputLabel);
    --color-inputLabel-focus: var(--color-inputLabel);
    --color-inputIcon: var(--color-alt);
    --color-inputIcon-hover: var(--color-default);
    --color-inputIcon-focus: var(--color-inputIcon);
    --color-inputIcon-checked: var(--color-default);
    --color-inputIcon-error: var(--color-error);
    --color-inputPlaceholder: var(--color-alt);

    --color-buttonPrimary: var(--color-default);
    --color-buttonPrimary-hover: hsl(0, 0%, 100%);
    --color-buttonPrimary-active: var(--color-buttonPrimary);
    --color-buttonPrimary-focus: var(--color-buttonPrimary);
    --color-buttonPrimary-disabled: var(--color-alt);
    --color-buttonPrimary-success: var(--color-buttonPrimary);
    --color-buttonPrimary-error: var(--color-buttonPrimary);

    --color-buttonSecondary: var(--color-icon);
    --color-buttonSecondary-hover: hsl(0, 0%, 100%);
    --color-buttonSecondary-active: var(--color-buttonSecondary);
    --color-buttonSecondary-focus: var(--color-buttonSecondary);
    --color-buttonSecondary-disabled: hsl(210, 10%, 25%);
    --color-buttonSecondary-success: var(--color-success);
    --color-buttonSecondary-error: var(--color-error);

    --color-buttonDanger: var(--color-error);
    --color-buttonDanger-hover: #000000;
    --color-buttonDanger-active: var(--color-buttonDanger);
    --color-buttonDanger-focus: var(--color-buttonDanger);
    --color-buttonDanger-disabled: hsl(210, 10%, 25%);
    --color-buttonDanger-success: var(--color-default);
    --color-buttonDanger-error: var(--color-default);

    --color-badge: var(--color-link);
    --color-badge-active: var(--color-link);
    --color-badge-disabled: var(--color-alt);

    /* ----------------- 
        Border colors
    ----------------- */
    --borderColor-default: rgba(0, 0, 0, 0.1);
    --borderColor-error: #000000;

    --borderColor-link: currentColor;
    --borderColor-link-hover: currentColor;
    --borderColor-link-active: currentColor;
    --borderColor-link-focus: currentColor;

    --borderColor-input: rgba(0, 0, 0, 0.1);
    --borderColor-input-hover: hsl(0, 0%, 0%);
    --borderColor-input-focus: var(--borderColor-input-hover);
    --borderColor-input-checked: var(--borderColor-input-hover);
    --borderColor-input-disabled: hsl(210, 10%, 20%);
    --borderColor-input-error: var(--borderColor-error);

    --borderColor-buttonPrimary: currentColor;
    --borderColor-buttonPrimary-hover: black;
    --borderColor-buttonPrimary-focus: currentColor;
    --borderColor-buttonPrimary-disabled: currentColor;
    --borderColor-buttonPrimary-success: currentColor;
    --borderColor-buttonPrimary-error: currentColor;

    --borderColor-buttonSecondary: currentColor;
    --borderColor-buttonSecondary-hover: black;
    --borderColor-buttonSecondary-focus: currentColor;
    --borderColor-buttonSecondary-disabled: currentColor;
    --borderColor-buttonSecondary-success: currentColor;
    --borderColor-buttonSecondary-error: currentColor;

    --borderColor-badge: currentColor;
    --borderColor-badge-active: currentColor;
    --borderColor-badge-disabled: currentColor;

    /* ----------------- 
        Background colors
    ----------------- */
    --bgColor-default: #8e87aa;
    --bgColor-alt: #757283;
    --bgColor-success: hsl(144, 69%, 39%);
    --bgColor-error: hsl(6, 45%, 56%);
    --bgColor-info: #8e87aa;

    --bgColor-modal: #bebbcd;
    --bgColor-modalVeil: #bebbcd;

    --bgColor-link: none;
    --bgColor-link-hover: none;
    --bgColor-link-active: none;
    --bgColor-link-focus: hsl(210, 55%, 10%);

    --bgColor-input: #cccccc;
    --bgColor-input-hover: var(--bgColor-input);
    --bgColor-input-focus: var(--bgColor-input);
    --bgColor-input-checked: var(--borderColor-input-hover);
    --bgColor-input-disabled: hsl(210, 10%, 14%);
    --bgColor-input-error: var(--bgColor-input);
    --bgColor-input-autofill: hsl(0, 0%, 38%);

    --bgColor-buttonPrimary: #bebbcd;
    --bgColor-buttonPrimary-hover: #8e87aa;
    --bgColor-buttonPrimary-active: var(--bgColor-buttonPrimary);
    --bgColor-buttonPrimary-focus: var(--bgColor-buttonPrimary);
    --bgColor-buttonPrimary-disabled: hsl(210, 10%, 25%);
    --bgColor-buttonPrimary-success: hsl(144, 66%, 30%);
    --bgColor-buttonPrimary-error: hsl(6, 45%, 56%);

    --bgColor-buttonSecondary: var(--bgColor-info);
    --bgColor-buttonSecondary-hover: #8e87aa;
    --bgColor-buttonSecondary-active: var(--bgColor-buttonSecondary);
    --bgColor-buttonSecondary-focus: var(--bgColor-buttonSecondary);
    --bgColor-buttonSecondary-disabled: hsl(210, 10%, 9%);
    --bgColor-buttonSecondary-success: var(--bgColor-success);
    --bgColor-buttonSecondary-error: var(--bgColor-error);

    --bgColor-buttonDanger: var(--bgColor-error);
    --bgColor-buttonDanger-hover: hsl(6, 55%, 70%);
    --bgColor-buttonDanger-active: var(--bgColor-buttonDanger);
    --bgColor-buttonDanger-focus: var(--bgColor-buttonDanger);
    --bgColor-buttonDanger-disabled: hsl(210, 10%, 9%);
    --bgColor-buttonDanger-success: hsl(144, 66%, 30%);
    --bgColor-buttonDanger-error: hsl(6, 45%, 56%);

    --bgColor-badge: #bebbcd;
    --bgColor-badge-active: #8e87aa;
    --bgColor-badge-disabled: hsl(210, 10%, 11%);

    /* ----------------- 
        Shadows
    ----------------- */

    --shadow-default: 0px 20px 24px -20px hsla(0, 0%, 0%, .5);
    --shadow-tooltip: 0px 8px 16px rgba(84, 85, 85, 0.5);

    --shadow-link-focus: 0px 6px 4px -3px rgba(192, 193, 194, 0.5);

    --shadow-input-hover: none;
    --shadow-input-focus: 0px 5px 10px -3px rgba(188, 188, 189, 0.3);
    --shadow-input-checked: none;

    --shadow-buttonPrimary-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .5);
    --shadow-buttonPrimary-active: none;
    --shadow-buttonPrimary-focus: 0px 0px 6px 2px hsl(200, 2%, 74%);

    --shadow-buttonSecondary-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .2);
    --shadow-buttonSecondary-active: none;
    --shadow-buttonSecondary-focus: 0px 0px 6px 2px rgba(188, 188, 189, 0.8);

    --shadow-buttonDanger-hover: 0px 10px 4px -8px hsla(0, 0%, 0%, .25);
    --shadow-buttonDanger-active: none;
    --shadow-buttonDanger-focus: 0px 0px 6px 2px hsla(6, 55%, 60%);
}