step3.css

/**
    Card-Generator. A program designed to make cards.
    Copyright (C) 2020  Elijah Anderson<contact@frustratedprogrammer.com>

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, version 3 of the License.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 **/
.step3_img_choice_container {
    width: 30%;
}

.step3_img_container {
    width: 100%;
}

.border {
}

@keyframes border-dance {
    0% {
        background-position: 0 0, 100% 100%, 100% 0, 0 100%;
    }
    100% {
        background-position: 100% 0, 0 100%, 100% 100%, 0 0;
    }
}

.step3_img_container img {
    width: 95%;
    max-width: 100%;
    max-height: 420px;
    margin: auto;
    display: none;
    background: linear-gradient(90deg, #000000 50%, transparent 50%), linear-gradient(90deg, #000000 50%, transparent 50%), linear-gradient(0deg, #000000 50%, transparent 50%), linear-gradient(0deg, #000000 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 15px 4px, 15px 4px, 4px 15px, 4px 15px;
    background-position: 0 0, 100% 0, 0 100%, 100% 0;
    padding: 4px;
    animation: border-dance 8s infinite linear;
}

#step3_frontside, #step3_backside {
    width: 20%;
    top: 54%;
    display: grid;
    position: absolute;
    transform: translate(-50%, -50%);
}

#front_card_select, #back_card_select {
    font-size: 150%;
    width: 100%;
    font-family: ringbearer, cursive;
    background-color: #bdbdbd;
}

#step3_frontside {
    left: 30%;
}

#step3_backside {
    left: 70%;
}

.step3_upload {
    font-family: widelatin, monospace;
    font-size: 90%;
}

#step3_title {
    margin: 0;
    font-family: ringbearer;
    text-align: center;
    font-size: 150%;
}

#step3_approve {
    position: absolute;
    color: black;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 75%;
    font-family: ringbearer;
    padding: 5px;
    font-size: 200%;
    background-color: #a0a0a0;
}

@keyframes fadeOpacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation: fadeOpacity 2s;
    opacity: 1;
}

.fadeOut {
    animation: fadeOpacity 0.5s reverse;
    opacity: 0;
}
@keyframes slideUpDown {
    0%, 100%{
        height: 90px;
        animation-timing-function: ease-in-out;
    }
    50%{
        height: 130px;
        animation-timing-function: ease-in-out;
    }
}
#step3ArrowGroup{
    position: absolute;
    top:90%;
    left:0;
    transform: translateY(-100%);
    margin: 0;
    font-size: 120%;
    font-family: fantasy;
}
#step3Arrow{
    animation-timing-function: ease-in-out;
    animation: slideUpDown;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    width: 71px;
    height: 90px;
}