.body {
    display: flex;
    width: 70%;
    min-height: 82vh;
    padding: 13vh 15% 5vh 15%;
}

.body .noItems {
    width: 100%;
    font-size: 1.75vh;
    color: #fff;
    margin: 10vh 0% 0vh 0%;
    text-align: center;
}

.body .noItems a {
    color: var(--main-color);
}

.body .containerTitle {
    font-size: 1.7vh;
    color: #fff;
    margin: 0;
    margin-bottom: 2vh;
}

.body .left {
    width: 65%;
    margin-right: 8%;
}

.body .left .products {
    margin-bottom: 4vh;
}

.body .left .products .product {
    display: flex;
    width: 100%;
    background-color: var(--dark-color);
    border-radius: .8vh;
    padding: 2vh 2%;
    margin-bottom: 2vh;
}

.body .left .products .product .image {
    width: 10vw;
    height: 4.93vw;
    border-radius: .5vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    margin-right: 2vw;
}

.body .left .products .product .information {
    display: flex;
    flex-grow: 100;
}

.body .left .products .product .information .productInfo {
    flex-grow: 100;
    align-self: flex-start;
}

.body .left .products .product .information .productInfo .category {
    font-size: 1.3vh;
    color: var(--main-color);
    margin: 0;
}

.body .left .products .product .information .productInfo .name {
    font-size: 2.2vh;
    color: #fff;
    margin: .5vh 0% 0vh 0%;
}

.body .left .products .product .information .productInfo .type {
    font-size: 1.4vh;
    color: #fff;
    opacity: .5;
    margin: 2.6vh 0% 0vh 0%;
    font-style: italic;
}

.body .left .products .product .information .price {
    display: flex;
    align-self: center;
    margin-right: .5vw;
    align-items: center;
}

.body .left .products .product .information .price h1 {
    font-size: 1.6vh;
    color: var(--main-color);
    margin: 0;
}

.body .left .products .product .information .price a {
    font-size: 1.6vh;
    color: var(--main-color);
    margin-left: .5vw;
}

.body .right {
    width: 30%;
}

.body .right .breakdown {
    padding: 1.5vh 3% 1.5vh 3%;
    background-color: var(--dark-color);
    border-radius: .8vh;
    margin-bottom: 5vh;
}

.body .right .breakdown .line.last {
    margin-bottom: 0vh;
}

.body .right .breakdown .line {
    display: flex;
    margin-bottom: 1.5vh;
}

.body .right .breakdown .line h1 {
    font-size: 1.6vh;
    color: #fff;
    flex-grow: 100;
    margin: 0;
}

.body .right .breakdown .line h2 {
    font-size: 1.6vh;
    color: #fff;
    font-weight: 500;
    margin: 0;
}

.body .right .breakdown .line h2.mainColor {
    font-weight: 700;
    color: var(--main-color);
}

.body .right .checkout a {
    display: flex;
    width: 100%;
    background-color: var(--main-color);
    color: #000;
    font-size: 1.5vh;
    font-weight: 700;
    text-decoration: none;
    padding: 1vh 0%;
    border-radius: .8vh;
    align-items: center;
    justify-content: center;
}

.body .right .checkout a.discord {
    color: #fff;
    background-color: #5865F2;
}

.body .right .checkout a span {
    margin-left: .5vw;
}

@media screen and (max-width: 600px), (orientation : portrait) {
    .body {
        display: block;
    }

    .body .left {
        width: 100%;
        margin-right: 0%;
    }

    .body .left .products .product {
        display: block;
        width: 63vw;
        padding: 2vh 5%;
    }

    .body .left .products .product .image {
        width: 63vw;
        height: 31.07vw;
        margin-bottom: 2vh;
    }

    .body .left .products .product .information {
        display: block;
        text-align: center;
    }

    .body .right {
        width: 100%;
    }
}