#purchaseWidget {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    top: calc(var(--navigation-height) + 28px);
    height: calc(100% - var(--navigation-height) - 28px); /* set first val to number of widgets */
    width: 100%;
    max-width: 100vw;
}

#mainImage {
    height: 50vh;
    width: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: ghostwhite;
}

#buttonsContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    height: 100%;
}

#marketplaceTitle {
    font-size: calc(18px + 1vmin);
    text-align: center;
}

#comingSoon {
    /* height: 15%; */
    border: solid gainsboro 2px;
    border-radius: 10px;
    box-shadow: 0 0 6px 3px gainsboro;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: calc(16px + 1vmin);
}

.marketplaceButton {
    height: 15%;
    border: solid gainsboro 2px;
    border-radius: 10px;
    box-shadow: 0 0 6px 3px gainsboro;
    padding: 10px 20px;
    cursor: pointer;
}

.marketLogo {
    height: 100%;
    max-width: 200px;
}


/*All hover effects when valid */
@media (hover: hover) {
    .marketplaceButton:hover {
        box-shadow: inset 0 0 6px 3px gainsboro;
    }
}

@media all and (orientation: portrait), (max-width: 750px) {
    #purchaseWidget {
        flex-direction: column;
        justify-content: flex-start;
    }

    #buttonsContainer {
        height: 50%;
    }
}