style.css

* {
    margin: auto auto;
    padding : 0;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
}

.background {
    transition: 2s;
    /* background-color: rgb(90,150,90); */
    background-image: linear-gradient(rgb(90,150,90), rgb(55,80,50));
}

.background-img {
    width: 100%;
    height: auto;
    background-image: url("./img/shirtLogoTall.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: contain;
}

.container {
    margin: 0 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-width: 100vw;
    height: auto;
    border: 1px solid rgb(70,70,70);
    border-radius: 15px;
    position: absolute;
    top:20%;
    transition: all 1s;
    object-fit: contain;
    background-color: rgb(65,120,70);
}

.card-move {
    /* -webkit-transform: (translateZ(0)); */ /* This one line supposedly enables the 3d graphic acceleration on mobile Apple devices for smoother animations.
                                                It unfortunately has the side effect of changing the spacing and layout significantly enough to be impractical */

    -ms-transform: translateY(-65%) scale(.5,.5);
    -webkit-transform: translateY(-65%) scale(.5,.5);
    -moz-transform: translateY(-65%) scale(.5,.5);
    -o-transform: translateY(-65%) scale(.5,.5); 
    /* transform: translateY(-30%) scale(.5, .5); */ 
    transition: all 1s ease-in-out;
}

img {
    max-width: 100%;
    height:auto;
    max-height: 100%;
}

.frame {
    position: absolute;
    top: 30%;
    left: 5%;
    right: 95%;
    bottom: 3%;
    opacity: 0.0;
    transition: opacity 1s;
    width: 90vw;
    height: auto;
}

.frame-move {
    transition: opacity 3s;
    opacity: 1.0;
}