body {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

@media(max-width: 768px) {
    html {
        flex-direction: column;
        text-align: center;
        resize: auto;
        object-fit: cover;
    }
}

.notice {
    opacity: .5;
    text-align: left;
    font-size: 1rem;
}

.intro {
    text-align: right;
    padding-right: 15px;

    p {
        opacity: .7;
    }
}

.intro_conv {
    text-align: center;

    p {
        opacity: .7;
    }
}

.intro_jord {
    text-align: left;
    padding-left: 15px;

    p {
        opacity: .7;
    }
}

.product_image:hover img {
    transform: scale(1.2);
}

[data-theme="white_theme"] {
    --text: black;
    --bgcolor: white;
}

[data-theme="black_theme"] {
    --text: white;
    --bgcolor: black;
}

[data-theme="whitebg"] {
    --bgcolor: #FAFAFA;
    --bgimage: url('https://github.com/onanaalan69-ctrl/Nike-website/blob/main/Images/bgindexw.png?raw=true');
    --text: black;
}

[data-theme="blackbg"] {
    --bgcolor: black;
    --bgimage: url('https://github.com/onanaalan69-ctrl/Nike-website/blob/main/Images/bgindexb.png?raw=true');
    --text: white;
}

.magicButton {
    color: var(--text);
    text-align: center;
}

.index_body {
    background-color: var(--bgcolor);
    background-image: var(--bgimage);
    color: var(--text);
    background-repeat: no-repeat;
    background-size: cover;
    transition: background-color 0.4s ease, background-image 0.4s ease, color 0.4s ease;
}

.link {
    text-decoration: none;
    text-align: center;
    font-size: xx-large;
    font-weight: 900;
    font-family: 'Monument Extended', 'Helvetica Neue', 'Arial Black', sans-serif;

    button {
        border: solid var(--bgcolor);
        border-radius: 25px;
        padding: 20px;
        max-width: 400px;

        cursor: pointer;
        color: var(--text);
        background-color: var(--bgcolor);
    }

}

.product_image {
    margin: 0 auto;
    overflow: visible;

    img {
        margin: 0 auto;
        display: block;
        border-radius: 20px;
        height: 323px;
        width: 400px;
        position: relative;
        z-index: 2;
        transition: transform 0.4s ease;
    }
}

nav {
    display: flex;
    border: solid transparent;
    border-radius: 25px;
    margin: 15px;
    box-shadow: 0px 0px 20px rgb(255, 255, 255);
    background-color: black;
    color: whitesmoke;
    z-index: 1000;
    position: sticky;
    top: 0;
    justify-content: space-between;


    img {
        height: 50px;
        width: 50px;
        border-radius: 50px;
    }

    a {
        text-decoration: none;
        color: white;
        margin: 0 auto;
    }

    .on {
        background-color: white;
        color: black;
        border-radius: 25px;
        padding: 6px;
        font-weight: 700;
    }
}

.product_container {
    padding-bottom: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 20px;
    background-color: #f5f5f5;

    h1 {
        display: flex;
        justify-content: center;
        font-weight: 500;
        margin-bottom: 20px;
    }

    h2 {
        display: flex;
        justify-content: center;
        font-weight: 200;
    }

    p {
        line-height: 1.5;
    }
}

.sales_text {
    border-radius: 20px;
    padding: 20px;
    margin: 30px 20px 30px 20px;
}

.buy a {
    text-decoration: none;
    display: inline-block;
    font-size: 2rem;
}

.buy {
    margin-left: 100px;
}

.Mercurial {
    background: linear-gradient(to bottom, black, lightpink, black, lightpink);
    border-radius: 20px;

    h2,
    h1 {
        color: silver;
    }

    img {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
    }

    .sales_text {
        background-color: transparent;
        color: pink;
    }

}

.Air_Force_white {
    background: linear-gradient(to bottom right, lightgray, #ffffff);
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
        width: 320px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
    }
}

.pegassus {
    background: linear-gradient(to bottom right, #ff7700, orange);
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
    }

    .sales_text {
        background-color: transparent;
        color: black;
    }
}

.sinner_1 {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: gold;
    }

    img {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: gold;
    }
}

.supreme {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
    }
}

.lego {
    background: linear-gradient(to bottom right, rgb(252, 196, 118), #ffa007);
    border-radius: 20px;

    h2,
    h1 {
        color: blue;
    }

    img {
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: rgb(0, 0, 255);
        ;
    }
}

.beat {
    background: linear-gradient(to bottom, rgb(165, 246, 165), white);
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: lightgreen;
    }
}

.bts {
    background-color: black;
    background-image: url('https://github.com/onanaalan69-ctrl/Nike-website/blob/main/Images/bgbts.png?raw=true');
    border-radius: 20px;

    h2,
    h1 {
        color: gainsboro;
    }

    img {
        box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.6);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: gainsboro;
    }
}

.kyky {
    background: linear-gradient(to bottom right, rgba(255, 217, 0, 0.689), green);
    border-radius: 20px;

    h2,
    h1 {
        color: rgba(0, 0, 255, 0.688);
    }

    img {
        box-shadow: 0px 0px 20px blue;
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: rgba(0, 0, 255, 0.688);
        margin: 15px;
    }
}

.wemby {
    background-color: black;
    background-image: url('https://github.com/onanaalan69-ctrl/Nike-website/blob/main/Images/alien.png?raw=true');
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(101, 101, 126);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.alcaraz {
    background-color: rgb(123, 199, 229);
    border-radius: 20px;

    h2,
    h1 {
        color: rgb(171, 16, 171);
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 300px;
        height: 343px;
    }

    .sales_text {
        background-color: transparent;
        color: rgb(171, 16, 171);
        margin: 15px;
    }
}

.rash {
    background-color: white;
    border-radius: 20px;

    h2,
    h1 {
        color: orange;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 300px;
        height: 355px;
    }

    .sales_text {
        background-color: transparent;
        color: orange;
        margin: 15px;
    }
}

.one {
    background-color: rgba(255, 0, 0, 0.721);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 355px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.max {
    background: linear-gradient(to bottom right, rgba(255, 0, 0, 0.967), white);
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.slam {
    background-color: orange;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.vomero {
    background-color: rgba(0, 0, 255, 0.773);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.mid {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: rgb(231, 150, 29);
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: rgb(231, 150, 29);
        margin: 15px;
    }
}

.chuck {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.hike {
    background-color: brown;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.weps {
    background-color: blue;
    background-image: url('https://github.com/onanaalan69-ctrl/Nike-website/blob/main/Images/bgweps.png?raw=true');
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 255);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.j4 {
    background-color: rgb(20, 105, 158);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 400px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.j39 {
    background-color: rgb(232, 123, 35);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.j1 {
    background-color: rgb(94, 124, 10);
    border-radius: 20px;

    h2,
    h1 {
        color: gold;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: gold;
        margin: 15px;
    }
}

.DN {
    background-color: rgb(239, 21, 239);
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.unity {
    background: linear-gradient(to bottom right, lightblue, rgb(159, 112, 47));
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.proto {
    background: linear-gradient(to bottom right, white, orange);
    border-radius: 20px;

    h2,
    h1 {
        color: brown;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: brown;
        margin: 15px;
    }
}

.GT {
    background-color: lightgreen;
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 255, 183);
        width: 290px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.P41 {
    background: linear-gradient(to bottom, black, rgb(31, 161, 31), black, rgb(31, 161, 31));
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 320px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.crush {
    background-color: #e06a0b;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.patch {
    background-image: url('Images/bgpatch.png');
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.BB {
    background-color: #e06a0b;
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.run {
    background-color: pink;
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.AS {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.cruise {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.grat {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: goldenrod;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: goldenrod;
        margin: 15px;
    }
}

.cat {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: rgba(255, 255, 255, 0.3);
        color: black;
        margin: 15px;

    }
}

.paris {
    background-color: pink;
    border-radius: 20px;

    h2,
    h1 {
        color: rgb(205, 5, 72);
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: rgb(205, 5, 72);
        margin: 15px;
    }
}

.thunder {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.heir {
    background-color: lightblue;
    border-radius: 20px;

    h2,
    h1 {
        color: green;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: green;
        margin: 15px;
    }
}

.dior {
    background: linear-gradient(to bottom right, gray, rgb(185, 183, 183));
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.rei {
    background-color: gray;
    border-radius: 20px;

    h2,
    h1 {
        color: red;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.sacai {
    background: linear-gradient(to bottom right, wheat, gray);
    border-radius: 20px;

    h2,
    h1 {
        color: darkblue;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 280px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: green;
        margin: 15px;
    }
}

.scott {
    background: linear-gradient(to bottom, rgb(152, 252, 215), #BCAF07);
    border-radius: 20px;

    h2,
    h1 {
        color: #BCAF07;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 320px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: rgb(152, 252, 215);
        margin: 15px;
    }
}

.billie {
    background-color: skyblue;
    border-radius: 20px;
    transition: 2s ease;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.billie:hover {
    transform: rotate(-5deg);
}

.sw {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: gold;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 300px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: gold;
        margin: 15px;
    }
}

.LJ {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.sab {
    background-color: rgb(122, 183, 49);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.haaland {
    background-color: rgb(15, 87, 115);
    border-radius: 20px;

    h2,
    h1 {
        color: orange;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: orange;
        margin: 15px;
    }
}

.kip {
    background-image: url(https://github.com/onanaalan69-ctrl/Nike-website/blob/main/Images/bgkip.png?raw=true);
    border-radius: 20px;

    h2,
    h1 {
        color: green;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: red;
        margin: 15px;
    }
}

.ohsu {
    background-color: wheat;
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.PS {
    background: linear-gradient(to bottom right, red, rgb(31, 161, 31), blue, yellow);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.EA {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.oc {
    background-color: lightskyblue;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 255, 255);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.GE {
    background-color: rgb(255, 132, 0);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.rot {
    background-color: white;
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.vitra {
    background-color: white;
    border-radius: 20px;

    h2,
    h1 {
        color: black;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: black;
        margin: 15px;
    }
}

.csr {
    background-color: white;
    border-radius: 20px;

    h2,
    h1 {
        color: lightskyblue;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: lightskyblue;
        margin: 15px;
    }
}

.bcm {
    background-color: yellowgreen;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.N7 {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 350px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.Girls {
    background: linear-gradient(to bottom, white, gray);
    border-radius: 20px;

    h2,
    h1 {
        color: gray;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.liquid {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: green;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: green;
        margin: 15px;
    }
}

.invincible {
    background-color: pink;
    border-radius: 20px;

    h2,
    h1 {
        color: lightskyblue;
    }

    img {
        box-shadow: 0px 0px 20px rgb(0, 0, 0);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: lightskyblue;
        margin: 15px;
    }
}

.winflo {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: rgba(169, 144, 6, 0.723);
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: rgba(169, 144, 6, 0.723);
        margin: 15px;
    }
}

.j38 {
    background: linear-gradient(to bottom right, white, gray);
    border-radius: 20px;

    h2,
    h1 {
        color: rgb(223, 54, 54);
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 380px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: rgb(223, 54, 54);
        margin: 15px;
    }
}

.j41 {
    background-color: rgb(128, 24, 24);
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.j2 {
    background-color: black;
    border-radius: 20px;

    h2,
    h1 {
        color: white;
    }

    img {
        box-shadow: 0px 0px 20px rgb(255, 255, 255);
        width: 270px;
        height: 300px;
    }

    .sales_text {
        background-color: transparent;
        color: white;
        margin: 15px;
    }
}

.intro_image {
    background-color: gray;
    display: block;
    object-fit: cover;
    border: solid transparent;
    border-radius: 25px;
    width: 1200px;
    height: 500px;
    margin: auto;
}

.item_lists {
    text-align: left;
    padding-left: 50px;
    font-size: large;
}

.item_roll {
    padding: 0 1rem;
    overflow-x: scroll;
    min-height: 430px;
    display: flex;

}

.item_container {
    border: solid black;
    border-radius: 25px;
    min-width: 300px;
    max-height: 450px;
    margin: 20px;
    color: var(--text_ball);
    background: var(--bgcolor_ball);

    img {
        width: 100px;
        height: 100px;
        border: transparent solid;
        border-radius: 25px;
        object-fit: cover;
    }

    ul {
        margin: auto;
    }

    li {
        text-align: left;
    }

    p {
        text-align: center;
        font-weight: 900;
    }
}

.item_container:hover {
    transform: scale(1.1);
    transition: 0.5s ease;
}

[data-theme="flight"] {
    --bgcolor_ball: rgb(206, 255, 255);
    --text_ball: rgb(57, 57, 244);
}

[data-theme="legacy"] {
    --bgcolor_ball: rgba(255, 217, 0, 0.749);
    --text_ball: black;
}

[data-theme="control"] {
    --bgcolor_ball: white;
    --text_ball: black;
}

[data-theme="academy"] {
    --bgcolor_ball: black;
    --text_ball: white;
}

[data-theme="plus"] {
    --bgcolor_ball: linear-gradient(to bottom, red, black);
    --text_ball: white;
}

[data-theme="standard"] {
    --bgcolor_ball: rgba(255, 217, 0, 0.996);
    --text_ball: black;
}

[data-theme="pitch"] {
    --bgcolor_ball: black;
    --text_ball: green;
}

[data-theme="strike"] {
    --bgcolor_ball: lightskyblue;
    --text_ball: white;
}

[data-theme="Maestro"] {
    --bgcolor_ball: red;
    --text_ball: wheat;
}

[data-theme="skills"] {
    --bgcolor_ball: linear-gradient(to bottom right, purple, greenyellow);
    --text_ball: white;
}

[data-theme="champ"] {
    --bgcolor_ball: black;
    --text_ball: red;
}

[data-theme="dom"] {
    --bgcolor_ball: orange;
    --text_ball: white;
}

[data-theme="tournament"] {
    --bgcolor_ball: rgb(181, 121, 11);
    --text_ball: black;
}

[data-theme="all"] {
    --bgcolor_ball: rgb(147, 199, 27);
    --text_ball: gray;
}

[data-theme="grip"] {
    --bgcolor_ball: linear-gradient(to bottom right, rgb(125, 27, 16), black);
    --text_ball: white;
}

[data-theme="jordan"] {
    --bgcolor_ball: rgb(138, 28, 22);
    --text_ball: white;
}

[data-theme="lebron"] {
    --bgcolor_ball: linear-gradient(to bottom right, purple, greenyellow);
    --text_ball: white;
}

[data-theme="giannis"] {
    --bgcolor_ball: linear-gradient(to bottom, green, purple);
    --text_ball: white;
}

[data-theme="sabrina"] {
    --bgcolor_ball: black;
    --text_ball: gray;
}

[data-theme="mini"] {
    --bgcolor_ball: linear-gradient(to bottom right, lightpink, rgb(101, 56, 101), rgb(4, 127, 20));
    --text_ball: white;
}

[data-theme="vapor"] {
    --bgcolor_ball: brown;
    --text_ball: white;
}

[data-theme="tournamentA"] {
    --bgcolor_ball: rgb(189, 45, 45);
    --text_ball: white;
}

[data-theme="champA"] {
    --bgcolor_ball: rgba(165, 42, 42, 0.418);
    --text_ball: white;
}

[data-theme="vapor1"] {
    --bgcolor_ball: brown;
    --text_ball: white;
}

[data-theme="refuel"] {
    --bgcolor_ball: rgb(234, 182, 24);
    --text_ball: black;
}

[data-theme="flex"] {
    --bgcolor_ball: white;
    --text_ball: black;
}

[data-theme="ACG"] {
    --bgcolor_ball: black;
    --text_ball: white;
}

[data-theme="chug"] {
    --bgcolor_ball: black;
    --text_ball: white;
}

[data-theme="SS"] {
    --bgcolor_ball: lightgreen;
    --text_ball: black;
}

[data-theme="jug"] {
    --bgcolor_ball: black;
    --text_ball: white;
}

[data-theme="big"] {
    --bgcolor_ball: black;
    --text_ball: lightgreen;
}

[data-theme="tritan"] {
    --bgcolor_ball: gray;
    --text_ball: white;
}

.blue {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
}

.blue_text {
    font-size: 2.1rem;
    text-align: center;
}