theme.css

/* Add your existing styles here */

body,
textarea {
    font-family: 'Jost', sans-serif;
}

/*
p, h1, h2, h3, div, span, a, li, td, th, strong, em, small, big, i, b, u, s, sub, sup {
    transition: color 0.5s ease;
}
*/
:root {
    --bs-secondary-rgb: 150, 105, 100;
    --bg-blur: blur(20px);
}

body {
    background-image: url('assets/img/blob-scene.svg');
    background-size: cover;
    background-repeat: no-repeat;
}


footer {
    backdrop-filter: var(--bg-blur);
}

footer,
.item-page section.row {
    --bs-bg-opacity: 0.5;
    background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}

.shoes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.shoes-container .item {
    width: 100%;
}

.shoes-container .item>a>div {
    height: 100%;

}

@media (max-width: 560px) {
    .shoes-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .shoes-container .item>* {
        width: min(max-content, 100%);
        margin: auto;
    }
}

header {
    background-image: url('assets/img/title-bg.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    box-shadow: inset 0 -1rem 1rem -.5rem hsla(0, 0%, 0%, 0.43);
    background-size: 101%;
}

#theme-switcher {
    font-size: 1.75em;
}

#logo {
    position: relative;
    top: 5px;
    filter: invert(1);
}

@media (width >=576px) {
    #logo {
        position: absolute;
        left: 0;
        height: 80px;
        top: initial;
    }
}

.logo {
    filter: invert(1);
}

h1 {

    font-family: 'Darker Grotesque', sans-serif;
    font-size: 4em;
}

h2 {
    font-family: 'Jost', sans-serif;
    font-weight: 700;
}

.bi-star-fill,
.bi-star-half,
.bi-star {
    font-size: 2em;
}

.price {
    color: black !important;
    text-shadow: 0.000em 0.3em #fff, 0.116em 0.276em #fff, 0.212em 0.212em #fff, 0.276em 0.116em #fff, 0.3em 0.000em #fff, 0.276em -0.116em #fff, 0.212em -0.212em #fff, 0.116em -0.276em #fff, 0.000em -0.3em #fff, -0.116em -0.276em #fff, -0.212em -0.212em #fff, -0.276em -0.116em #fff, -0.3em -0.000em #fff, -0.276em 0.116em #fff, -0.212em 0.212em #fff, -0.116em 0.276em #fff;
    font-weight: 600;
    font-family: 'Jost', sans-serif;
    top: 160px !important;
}

.fraction {
    top: -0.9em;
    position: relative;
}

.price>span:nth-child(1) {
    font-size: 3.5em;
}

.stars.animate>i:hover {
    font-size: 2.25em;
    /* Adjust the font size as needed */
}

.stars>i {
    transition: font-size 0.25s ease-in-out;
    /* Added 's' after 0.5 for seconds */
}

.fw-900 {
    font-weight: 900;
}

.fw-700 {
    font-weight: 700;
}

.fw-600 {
    font-weight: 600;
}

.fw-500 {
    font-weight: 500;
}

.fw-400 {
    font-weight: 400;
}

.fw-300 {
    font-weight: 300;
}

.fw-200 {
    font-weight: 200;
}

.shoe-title {
    font-size: 3.5em;
    font-weight: 600;
}


/*
    font-family: 'Darker Grotesque', sans-serif;
    font-family: 'Jost', sans-serif; 3 4 5 6 7 9

    https://fonts.google.com/specimen/Jost?preview.text=Bahnschrift&preview.size=89&stroke=Sans+Serif
*/

#paypal-button-container {
    max-width: 750px;
    margin: auto;
}

input[type="radio"] {
    display: none;
}

/* Style for the custom radio buttons */
div.radios {
    display: flex;
    width: 100%;
}

.radios>label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    font-size: 1.5em;
    color: white;
    margin-right: 5px;
    cursor: pointer;
    flex-grow: 1;
    user-select: none;
}

.radios>label:last-child {
    margin-right: 0;
}

input[type="radio"]+label {
    outline: 0px solid #ffc439;
    transition: outline 0.25s ease-in-out;
}

/* Style for the selected radio button */
input[type="radio"]:checked+label {
    outline: 6px solid #ffc439;
    /* Change border color when selected */
    z-index: 2;
}

.max-vw-50 {
    max-width: 50vw;
}

.max-vw-80 {
    max-width: 80vw;
}

.w-max {
    width: max-content;
}

.w-min {
    width: min-content;
}

.savenow {
    background-image: url('assets/img/low-poly.svg');
    background-size: cover;
    background-repeat: no-repeat;
}